0

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);
                }
            });
        });
Jonathan Hall
  • 75,165
  • 16
  • 143
  • 189
pickarooney
  • 385
  • 2
  • 18
  • You should bind events using on instead of directly click. $('#whatever').on('click' ... – xrodas Dec 11 '20 at 10:49
  • it makes no difference using on $(".ti-eye").on("click", function(event) { not sure why the question is closed as none of the answers in the duplicate question work – pickarooney Dec 11 '20 at 10:59
  • @pickarooney you need to use the delegated version of `on()`, not just `on('click', fn)`. In your case it will be `$(document).on('click', '.ti-eye', function(event) {...` and `$(document).on('click', '.cat', function(event) {...` – Rory McCrossan Dec 11 '20 at 11:02
  • that doesn't work at all, even on first page load – pickarooney Dec 11 '20 at 11:04
  • sorry, I missed a bracket when I moved it outside of the document.ready section. Works now! brackets and braces would drive you nuts. – pickarooney Dec 11 '20 at 11:09

0 Answers0