CODEWITHSUNDEEP
javascriptphpjqueryhtmlajax
Mustafa
Mustafa

Reputation: 347

JQuery not working on AJAX Request

So I have 2 pages. transfer.php and display_guide.php. I call display_guide.php using an AJAX Request to display it on tranfer.php. There is a simple toggle function on display_guide.php and it works just fine when I test it alone. However the toggle function does not work when on transfer.php using the AJAX Call. Any help would be greatly appreciated.

I have looked on other articles and they all suggested that I use the .on method and I have done so. Some side information: I am using Bootstrap, but even when I comment out the bootstrap link, the error persists -- so it can't be bootstrap.

The code for display_guide.php is as follows:

<body>
<!-- GENED TABLE WITH CATEGORY IMPLEMENTATION----------------------------------->

<button id="sri">Toggle between hiding and showing the paragraphs</button>
<p>This is another small paragraph.</p>

<script>
    $(document).on("click", "button", function(){
        $("p").toggle();
    });
</script>
</body>

However, when I want this toggle to be reflected in transfer.php, I have issues. The content loads but it refuses to toggle when I click on the button. It does not mimic the behavior of the standalone page (display_guide.php).

Upvotes: 2

Views: 97

Answers (1)

Robert
Robert

Reputation: 3553

Move your toggle code inside ajax callback inside transfer.php file, to attach event to object after the html has been appended.

      function loadTransferGuide(str3) {
        var xhttp3 = new XMLHttpRequest();
        xhttp3.onreadystatechange = function() {
            if (xhttp3.readyState == 4 && xhttp3.status == 200) {
                document.getElementById("transfer_guide").innerHTML = xhttp3.responseText;
                $(document).on("click", "button", function(){
                     $("p").toggle();
                });
            }
        };
        xhttp3.open("GET", "display_guide.php", true);
        xhttp3.send();
    }

Upvotes: 1

Related Questions