2

I am trying to change an arbitrary paragraph to the content it from an external file. Here it is:

External Files/text.txt:

jQuery and AJAX do go well together!

Here is the file that helps change the paragraph:

jquery_ajax1.html:

...
<script language="Javascript">
...
$('button').click(function() {
   $('#p1').load('External Files/text.txt', function(responseText, statusTxt, xhr) {
        if(statusTxt == 'success') {
            window.alert("External content loaded successfully!");
        }

        if(statusTxt == 'error') {
            window.alert("You've got problems." + "\n" + xhr.status + ": " + xhr.statusText);
        }
   });
});
</script>
<body>
...
<p id="p1">Click the below button to change me!</p>
<button>Click to change paragraph using jQuery and AJAX!</button>
</body>

When I run the program, I get the parapgraph and the button, but when I click the button, the paragraph doesn't change. I tried wrapping the paragraph inside of a <div></div>, but nothing worked. I originally tried adding a new paragraph and appending the file to the new paragraph. I also tried commenting out the paragraph. Nothing worked. Is there something wrong with my code? How can I fix this?

Notes:

I saw this question, this question, this question, this question, and a lot more, but they didn't help me solve my problem.

Community
  • 1
  • 1
Obinna Nwakwue
  • 210
  • 4
  • 16
  • 3
    Your JavaScript is declared before your HTML so `$("button")` doesn't find anything. Move your script below the HTML or wrap it in a `$("document").ready()` handler. – Dave Jul 05 '16 at 22:22

1 Answers1

7

Your Javascript is running before your HTML is rendered which means that you're attaching a click listener to a button that hasn't been created in your DOM yet. As a result, your real button doesn't get a click listener attached to it because it was loaded after your Javascript has already been executed.

You should almost always use jQuery's document ready method, which will wait for the document to completely load before executing your Javascript, ensuring the elements you want to interact with are loaded already.

In your case, you should be able to do this in your Javascript.

$(function() {
  $('button').click(function() {
     $('#p1').load('External Files/text.txt', function(responseText, statusTxt, xhr) {
        if (statusTxt == 'success') {
          window.alert("External content loaded successfully!");
        }

        if (statusTxt == 'error') {
          window.alert("You've got problems." + "\n" + xhr.status + ": " + xhr.statusText);
        }
     });
  });
})
jaybee
  • 2,240
  • 14
  • 20
  • Oh, I already had a `$(document).ready()` handler, but I didn't put the code inside it! Now I get it! But, why did you use the `$(function() {})` method? Isn't that kinda hard to read? – Obinna Nwakwue Jul 06 '16 at 16:28
  • 1
    `$(function() {})` is just short-hand for `$(document).ready(function() {})` so you can feel free to use whichever you prefer. I use the shorthand version because it's a little cleaner once you're used to it. – jaybee Jul 06 '16 at 18:15