CODEWITHSUNDEEP
javascriptjqueryfunctionappend
gfreestone
gfreestone

Reputation: 153

jQuery's append not working outside of getJSON callback

I'm working consolidating all my JSON calls. I took everything out of this $.getJSON call and verified that my page still worked, but when I take the append and listview out, the content never appears.

This works:

    $.getJSON("data/rides.json",
        function(data){
          $('#myRideList').append( rideList.join(' ') );
          $('#myRideList').listview('refresh');
      });

but this doesn't:

  //  $.getJSON("data/rides.json",
  //    function(data){
          $('#myRideList').append( rideList.join(' ') );
          $('#myRideList').listview('refresh');
 //     });

Upvotes: 4

Views: 479

Answers (1)

I Hate Lazy
I Hate Lazy

Reputation: 48761

You're probably running the code before the DOM is ready.

The getJSON version will run asynchronously, giving the DOM a chance to load.

The second version will run immediately.

You can put the code in a .ready() handler to make sure the DOM is ready.

$(function() {
  //  $.getJSON("data/rides.json",
  //    function(data){
          $('#myRideList').append( rideList.join(' ') );
          $('#myRideList').listview('refresh');
 //     });
});

The syntax I used above is a shortcut for this:

$(document).ready(function() {
    // ...
});

The simplest solutions are very often the best. As @T.J.Crowder noted, the tried and true technique of putting your script at the bottom of the page (or at least somewhere on the page after your desired elements) is simple and requires no under-the-hood tricks.

<body>
   <!-- your HTML markup -->

   <script type="text/javascript" src="http://example.com/my/script.js"></script>
</body>

Upvotes: 5

Related Questions