2

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).

Mustafa
  • 337
  • 7
  • 14

1 Answers1

1

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();
    }
Robert
  • 3,353
  • 4
  • 32
  • 50
  • I don't get exactly what you are saying. Here is my AJAX code for transfer.php. Could you provide some clarification as to how to implement your approach into the code I already have. – Mustafa Aug 31 '16 at 07:00
  • `function loadTransferGuide(str3) {` `var xhttp3 = new XMLHttpRequest();` `xhttp3.onreadystatechange = function() {` `if (xhttp3.readyState == 4 && xhttp3.status == 200) {` `document.getElementById("transfer_guide").innerHTML` `= xhttp3.responseText;` `}` `};` `xhttp3.open("GET", "display_guide.php", true);` `xhttp3.send();` `}` – Mustafa Aug 31 '16 at 07:01
  • @Mustafa I've edited my reply. But as you are already using jQuery, i suggest you to check jQuery Ajax (http://api.jquery.com/jquery.ajax/) – Robert Aug 31 '16 at 07:05
  • hey thank you so much! it works! Could you provide an explanation why my approach didn't work? Does it have to do something with the scope of the function? Really new to programming so if you could provide an explanation, I'd appreciate it! Thanks – Mustafa Aug 31 '16 at 16:07
  • @Mustafa when your ajax request returned HTML from transfer_guide.php, it was just appended to your document, but javascript from transfer_guide file was not interpreted since the document was already loaded. That's why you had to call the code after the HTML was appended, so you can attach events to newly added elements. Imagine that as a big word file with text in red color. When you open it, text will display as red, but when you type new text in to it, it will be black until you change it's color to red. – Robert Aug 31 '16 at 21:16