jquery .html is not working

Question

I want to attach a variable into my HTML. I am using .html to do this but doesn't seem to be working.

Also am I right to use the pageinit event? The page is dynamic , the content is different depending on the choice from a list on the previous page.

Maybe append would be a better choice? Im unsure.. Any advice?

Here is my JS file

 $(document).on('pageinit','#details-page', function(){
      var details_view = "";
      $(function() {
        $.getJSON('js/bands.json', function(data) {
            details_view += '<div><p>Content goes here</p></div>';
         });
  });
  $('#detail_content').html(details_view);
});

Here is my HTML.

<div data-role="page" id="details-page">
    <div data-role="header" class="header">
    </div>
    <div data-role="content" id="detail_content">
        // **I want the details_view variable content to go here**
    </div>
    <div data-role="footer" class="footer" data-position="fixed">           
    </div>
</div>

possible duplicate of [How to return value from an asynchronous callback function?](http://stackoverflow.com/questions/6847697/how-to-return-value-from-an-asynchronous-callback-function) — Pointy, Mar 07 '14 at 23:38
That wouldn't be of use to me- Im new to this, and when posting it, I did not understand 'asynchronous callback function'.. there will be others in the same situation. Thanks for the cue — user3266422, Mar 08 '14 at 00:04
Well you're right that there'll be others :) This is a huge, huge stumbling block. (So don't feel bad about it!! It confuses almost everybody.) — Pointy, Mar 08 '14 at 00:08
If I remeber correctly you can set async: false. Then it will not be asynchronous — Baked Inhalf, Mar 08 '14 at 00:44

score 2 · Answer 1 · answered Mar 07 '14 at 23:38

2

Your $.getJSON() call is asynchronous. The line of code that calls .html() will run long before the data is returned.

answered Mar 07 '14 at 23:38

Pointy

405,095
59
585
614

Thanks that is good to know! I moved the .html code inside the getJSON function, as suggested by @kapa – user3266422 Mar 07 '14 at 23:54

score 2 · Accepted Answer · answered Mar 07 '14 at 23:38

2

$.getJSON() is an AJAX method. A stands for asynchronous, which means it will be finished later in the future. Whatever you want to happen when the request is finished, you should do it in the callback:

$.getJSON('js/bands.json', function(data) {
    details_view += '<div><p>Content goes here</p></div>';
    $('#detail_content').html(details_view);
});

answered Mar 07 '14 at 23:38

kapa

77,694
21
158
175

Cheers, I just tried it, adn it still didnt work - useful to know though, thanks! – user3266422 Mar 07 '14 at 23:48
When I use this -- " $("[data-role=content]").append(details_view); ", it works but it also adds the variable to the index page 'data-role=content'. Does this give any clue? – user3266422 Mar 07 '14 at 23:49
@user3266422 Do you have an element in the page with the ID of `detail_content`? :) – kapa Mar 07 '14 at 23:50
the div in the HTML has an id of called detail_content – user3266422 Mar 07 '14 at 23:52
@user3266422 In the HTML you pasted, you have `details-page`, not `details_page`. – kapa Mar 07 '14 at 23:53
1

The .html code is referring to detail_content... which is the div inside details-page (my naming is terrible.. note to self) – user3266422 Mar 07 '14 at 23:57
On init of #details-page, find variable 'details_view' and add it to the #detail_content div - in a nutshell – user3266422 Mar 08 '14 at 00:00
@user3266422 I see now, got confused. In that case, it should work. As you can see in [this fiddle](http://jsfiddle.net/94FBu/), the code itself works, so there must be something on your side that causes the problem. – kapa Mar 08 '14 at 00:18
Thank you, that's good to know. You've been very helpful, I'll keep trying :) – user3266422 Mar 08 '14 at 00:45
The difference is the getJSON so maybe it's that – user3266422 Mar 08 '14 at 00:46

jquery .html is not working

2 Answers2