jQuery Question

Duplicate functions results in Modal header

I am calling two separate functions in header and body of Modal. Functions are calling based upon ID of product that is coming from ajax. Both functions are defined in Cart_code.php.

Now the issue is the function that should display in body is also displaying in in the header of modal also.
I want to display both functions separately in their relevant portions like header and body.

JavaScript

<script type="text/javascript">

$(document).ready(function(){
$.ajax({
type: "POST",
url: "Cart.php",
data: {"ID":id},
success: function(result){
$('.modal-header').html(result);

}
});
});
</script>


Cart.php

include('includes/Cart_code.php');

<?php

if (isset($_POST['ID'])) {
$cart_class = new cart_class($_POST['ID']);
$cart_class->cart_head_info_print();
$cart_class->cart_body_info_print();
exit();
}
?>

<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">

<!-- Modal content-->
<div class="modal-content">
<img src="" class="showPic">
<div class="modal-header" style="padding:35px 50px;">

<button type="button" class="close" data-dismiss="modal">&times;</button>
<!---HERE HEADER DATA WILL BE DISPLAY---->

</div>
<div class="modal-body" style="padding:40px 50px;">
<!---HERE BODY DATA WILL BE DISPLAY---->
</div>
</div>
</div>
</div>

Answer

OK.
Basic principle here.

Normally, you should have a page with a script that calls another page to update a section based on user input.

So create your main page.

Then, based on whatever input, call another script to update a section of this main page.

You should call a script to produce a small part of the page.
This Ā«resultĀ» will end in a div of your main page.

Ajax power is to update a section of a page without reloading the page completely.

Comments