listview won't inherit style when appending items via ajax.- Jquery mobile

Question

i am trying to dynamically add items to a listview in jquery mobile via ajax.

When i return the data and append the generated html the new items don't inherit the listview style properties, any help would be greatly appreciated.

$(function() {
    $('.load_more').live("click",function() {
        var a_id = $(this).attr("id");
        var b_id = $(this).attr("data");
    if(a_id!='end'){
        $.ajax({
            type: "POST",
            url: "data.php",
            data: "aid="+ a_id+"&bid="+b_id,
    beforeSend:  function() {
        $('a.load_more').html('<img src="loading.gif" />');

},
    success: function(html){
        $("#more").remove();
        $("ul#updates").append(html);
        $('ul#updates').listview('refresh');
        }
    });
}
        return false;
    });
});

score 0 · Answer 1 · edited May 23 '17 at 12:04

0

jQuery Mobile does not automatically enhance dynamic content. You must trigger the create event to force jQM to initialize the new content:

$(html).trigger('create');

When it comes to listviews, the refresh should be sufficient when adding new items. See this example http://jsfiddle.net/qrYF7/.

http://jquerymobile.com/demos/1.1.1/docs/pages/page-scripting.html

Similar questions:

Forcing jQuery Mobile to re-evaluate styles/theme on dynamically inserted content

jQuery Mobile does not apply styles after dynamically adding content

edited May 23 '17 at 12:04

Community

1
1

answered Aug 12 '12 at 20:16

Derek Hunziker

12,996
4
57
105

where exactly would i call that from, after an hour of googling thats what i came up with but tried and it never worked. – Guernica Aug 12 '12 at 20:22
i tried that, $("ul#updates").append(html).trigger("create"); still doesnt work, thanks anyway – Guernica Aug 12 '12 at 20:46
Perhaps your AJAX call is not returning what you think it is..? Calling refresh should be sufficient. See: http://jsfiddle.net/qrYF7/ – Derek Hunziker Aug 13 '12 at 00:44
i have no idea why your fiddle works and my code doesnt, my ajax is returning the proper data although im gettin an error now TypeError: $("#updates").append(htmldat).listview is not a function – Guernica Aug 13 '12 at 03:25

score 0 · Answer 2 · answered Jul 30 '13 at 19:11

I have had similar issues when making AJAX calls and have had no luck with listview() or trigger() functions. These work for me when the content is not dynamic, as in the jsfiddle in Derek's reply. What I have found though is that if you are using the google ajax API (http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js -- or 1.7.1 or some variant) then the listview() function ceases to work in regards to style. When this script is added to the jsfiddle with static content, new items do not inherit style. If your page works without this script, removing it would be a temporary fix.

listview won't inherit style when appending items via ajax.- Jquery mobile

2 Answers2