4

I am getting data from a JSON file and then I display it with an html structure following the jquerymobile structure with data-role, etc...here is my code on how I get the data and display it:

$(document).on('pageinit', function(){
    $.getJSON("http://danielvivancos.com/edu/wordpress/?json=get_posts&post_type=product", function(data){
    var html = "";
        $.each(data.posts, function(index, d){
        html = html + "<li><a href='" + d.slug + "' data-transition='slidedown'><img src='" + d.thumbnail_images.thumbnail.url + "' /><h3 class='ui-li-heading'> Menu" + index + "</h3></a></li>";
        });
        html= "<ul data-role='listview' data-inset='true'>"+ html + "</ul>";
        $(html).appendTo(".choice_list");


    }).error(function(jqXHR, textStatus, errorThrown){ /* assign handler */
        /* alert(jqXHR.responseText) */
        alert("error occurred!");
    });
});

The output in HTML is as follws: 

<li><a href="link1.HTML" data-transition="slidedown"> <img src="source1"><h3> Menu1</h3></a></li>

<li><a href="link2.HTML" data-transition="slidedown"> <img src="source2"><h3> Menu2</h3></a></li>

<li><a href="link3.HTML" data-transition="slidedown"> <img src="source3"><h3> Menu3</h3></a></li>

But my problem is that even though I display the content the way jquerymobile says, the style which should be applied is not. I mean all the classes added by jquerymobile script are not added to my html generated with javascript. Anyone kowns how can I fix it? How can I keep the styles from jquerymobile? Thank you so much in advanced!

ANSWER:

 $(html).appendTo(".choice_list").listview();
Improve this question
8
  • $('[data-role='listview]').listview('refresh') after appending the items / outside the loop. in other words, after closing .error function. Commented Aug 27, 2013 at 16:12
  • Omar, I've tried what you say but then my "<ul>" disappears, it's not even showing. Any ideas? Commented Aug 27, 2013 at 16:46
  • 1
    try $('[data-role='listview]').listview().listview('refresh') Commented Aug 27, 2013 at 16:48
  • Nop. It continues to display nothing. I don't understand why...please any hepl would be appreciated. Thank you Omar. Commented Aug 27, 2013 at 16:49
  • 1
    sorry my bad, place it before .error. Commented Aug 27, 2013 at 16:51

3 Answers 3

Reset to default
2

From jQuery mobile docs:

When the user clicks a link in a jQuery Mobile-driven site, the default behavior of the navigation system is to use that link's href to formulate an Ajax request (instead of allowing the browser's default link behavior of requesting that href with full page load). When that Ajax request goes out, the framework will receive its entire text content, but it will only inject the contents of the response's body element (or more specifically the data-role="page" element, if it's provided), meaning nothing in the head of the page will be used (with the exception of the page title, which is fetched specifically).

This means that any scripts and styles referenced the head of a page won't have any effect when a page is loaded via Ajax, but they will execute if the page is requested normally via HTTP.

Reference

Create vs. refresh: An important distinction

Note that there is an important difference between the create event and refresh method that some widgets have. The create event is suited for enhancing raw markup that contains one or more widgets. The refresh method should be used on existing (already enhanced) widgets that have been manipulated programmatically and need the UI be updated to match.

For example, if you had a page where you dynamically appended a new unordered list with data-role=listview attribute after page creation, triggering create on a parent element of that list would transform it into a listview styled widget. If more list items were then programmatically added, calling the listview’s refresh method would update just those new list items to the enhanced state and leave the existing list items untouched.

You want to .trigger("create") after it is loaded.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Sorry but this is wrong. create is to be used with other widgets, list-view accepts refresh method.
@Omar why the downvote? triggering create is where you, "dynamically appended a new unordered list with data-role=listview attribute after page creation," thus what OP is doing.
you're referring to old version of jQM. The latest stable version now is 1.3.2. .listview('refresh') is the solution. Update your answer with a working answer so I can remove the downvote.
add $(html).appendTo('.choice_list').listview().listview('refresh'); or $(html).appendTo('.choice_list').listview(); as an answer.
1

You likely need to call refresh on your listview:

 $('#myListview').listview('refresh');

ref: http://jquerymobile.com/demos/1.2.1/docs/lists/lists-methods.html

http://jquerymobile.com/demos/1.2.1/docs/lists/docs-lists.html

Improve this answer

9 Comments

I've given to my "<ul>" an id and tried to refresh it but it's not working. Any ideas?
And you refreshed right after $(html).appendTo(".choice_list");?
Should you be appending html? I see you have a myNewStuff variable you aren't using.
Sorry. The myNewStuff variable is actually the same variable html is. I's already fixed in my question. And yes @Chris Hardie, I've refreshed just after that and now nothing is displayed.
ok, how about: $(html).appendTo('.choice_list').listview();?
|
0 
$(html).appendTo(".choice_list").listview();
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.