Context: e-commerce training project
Using: PHP and JQuery
Issue: Jquery script to display modal is called on page load but not after refreshing part of the page
When I first load my page, I have a button (icon) which, when clicked, loads a modal (description of the item selected). If I subsequently filter the items on the page ( this reloads the element containing the items), clicking on the button to load the modal does not work any more. The JQuery script is not called (I added an alert to debug). Note: if the first action on loading the page is to refresh the product list and click on the eye, it does NOT work either.
If I look at the page source immediately after first loading and again after reloading the product list, they are identical (using Notepad++ compare function), so I think it's a case of the Java script becoming disabled when an AJAX request is sent to reload the ?
I think the easiest way to illustrate is with the site itself. Hopefully it's not against the rules
http://pickarooney.sytes.net/__NEW/shop-grid.php
Mouse over a product and click the eye. An alert appears and a modal displays Then filter by clicking on a category or brand or clicking on the refresh icon beside the search bar The alert/modal no longer display when the eye icon is clicked.
The script called by the eye icon is this one:
$(".ti-eye").click(function(event) {
var searchCode = event.target.id.replace("mod", "");
$.ajax({
url:"searchproduct.php", //the page containing php script
type: "post", //request type,
data: {searchCode: searchCode},
dataType: 'text',
success:function(result){
alert("OK");
$("#productmodal").html(result);
$("#productmodal").modal('toggle');
}
});
});
example of script called when a category filter is applied
$(".cat").click(function(event) {
var searchCat = event.target.id.replace("cat", "");
$.ajax({
url:"searchproduct.php", //the page containing php script
type: "post", //request type,
data: {searchCat: searchCat},
dataType: 'text',
success:function(result){
$("#product-grid").html(result);
}
});
});