I'm working on a service finder website. What I want to achieve that there is a bootstrap modal and I have collapsible buttons inside the modal and jquery code runs as the collapsible button is pressed. The problem is that on first time I click on the collapsible button the ajax runs properly but when I open the modal again and click the collapsible button then the ajax code is not running.
This is problem I'm facing
In this the code works for the first time
In this the code doesn't work
When I click on the Wall Mounted Western Toilet button for the first time then the sub buttons in blue color are loading. When I click for the next time it doesn't load as seen in the 2nd image.
This is the code I'm trying
if(isset($_POST['action']) and $_POST['action'] == 'load_sub_or_subsub'){
function bypass_url($data){
$data = htmlspecialchars($data);
$data = strip_tags($data);
$data = stripslashes($data);
return $data;
}
$work_type = bypass_url($_POST['worktype']);
$check_query = $conn->prepare("SELECT * FROM prices WHERE work_type = ?");
$check_query->bind_param("s",$work_type);
$check_query->execute();
$check_query_res = $check_query->get_result();
$check_query_row = $check_query_res->fetch_assoc();
if($check_query_row['work_type'] != ''){
//IF SUB WORK TYPE IS BLANK THEN,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
if($check_query_row['sub_work_type'] == ''){
$sub_sub_query = $conn->prepare("SELECT * FROM prices WHERE work_type = ?");
$sub_sub_query->bind_param("s",$work_type);
$sub_sub_query->execute();
$sub_sub_query_res = $sub_sub_query->get_result();
while($sub_sub_query_row = $sub_sub_query_res->fetch_assoc()){
$output .= '
<button class="btn btn-outline-dark btn-block">
'.$sub_sub_query_row["sub_sub_work_type"].' '.
($sub_sub_query_row["price"] != 0 ?
"<font color='grey'>₹".$sub_sub_query_row["price"]."</font>"
: "<font color='grey'>Price On Visit</font>").'
</button>
';
}
}
//IF SUB WORK TYPE IS NOT BLANK THEN LOAD DISTINCT SUB WORK TYPES
else if($check_query_row['sub_work_type'] != ''){
//load distinct sub work types
$load_subworks = $conn->prepare("SELECT DISTINCT sub_work_type FROM prices WHERE work_type = ?");
$load_subworks->bind_param("s",$work_type);
$load_subworks->execute();
$load_subworks_res = $load_subworks->get_result();
$i = 0;
while($load_subworks_row = $load_subworks_res->fetch_assoc()){
$i++;
$output .= '
<button class="btn btn-outline-dark btn-block collapseSubWork" type="button" data-toggle="collapse" data-target="#collapse'.$i.'" aria-expanded="false" aria-controls="collapseExample" data-subwork="'.$load_subworks_row["sub_work_type"].'">
'.$load_subworks_row["sub_work_type"].'
</button>
<div class="collapse" id="collapse'.$i.'">
<div class="card card-body load_sub_sub_here">
</div>
</div>
';
}
$output .= '
';
}
}
$output .= '
<div class="modal fade" id="gotoCartModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title cartModalHead"></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"
">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body cartModalBody">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-dark btn-sm theCart">Add to Cart</button>
</div>
</div>
</div>
</div>
<script src="bootstrap/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<script>
$(".collapseSubWork").on("click",function(){
var subwork = $(this).data("subwork");
var action = "collapse_to_sub_sub";
$.ajax({
url: "load.php",
method: "post",
data: {action:action,subwork:subwork},
beforeSend: function(){
$(".load_sub_sub_here").html("loading...");
},
success: function(data){
$(".load_sub_sub_here").html(data);
}
});
});
</script>
';
echo $output;
}
Any idea why it doesn't work?
