ajax - trouble styling dynamically created jquery mobile listview -


i trying generate jquery mobile listview on fly pulling down movie data tmdb , constructing each <li> , appending existing <ul> element. trouble is, can't format no matter do. i'm getting data , tmdb fine list view isn't styling when call $("#ul").listview("refresh"); here of code ( relevant stuff):

ajax call grabs data , builds each <li>:

    $.ajax({         type: "post",         data: {             action: 'searchfilm',             film: film         },         datatype: "json",         url: "./php/functions.php",         success: function(json) {             console.log(json);             for(var = 0;  < object.size(json); i++){                 var film = json[i.tostring()];                 $('#film-search-results').append("<li data-theme='j'><img src='" + film.poster_path + "' alt='poster' /><a href=''><h3 class='ui-li-heading'>" + film.title + "</h3><p class='ui-li-desc'><strong>" + film.tagline + "</strong></p><p class='ui-li-desc'>" + film.overview + "</p></a></li>");             }         },         error: function(jqxhr, status, text){             console.log(jqxhr);         }     }); 

existing content div holds <ul> element:

 <div id="content-add-title" data-role="content">     <ul id='film-search-results' data-role='listview'></ul>  </div><!-- end content-add-title --> 

and function calls ajax method:

    $('#add-add-title-btn').click(function() {         if ($('#add-title-type-select').val() === "movie") {             $('#right-panel3').panel("close");             $('#film-search-results').html("");             searchfilms($('#add-title-name-field').val());             $('#add-title-page').trigger("create");             $('#film-search-results').listview("refresh");         }     }); 

really not sure why won't style 1 have ideas?

you need refresh listview in success of ajax call, not in click event handler -

success: function(json) {     console.log(json);     for(var = 0;  < object.size(json); i++){         var film = json[i.tostring()];         $('#film-search-results').append("<li data-theme='j'><img src='" + film.poster_path + "' alt='poster' /><a href=''><h3 class='ui-li-heading'>" + film.title + "</h3><p class='ui-li-desc'><strong>" + film.tagline + "</strong></p><p class='ui-li-desc'>" + film.overview + "</p></a></li>");     }     $('#add-title-page').trigger("pagecreate"); // <- trigger pagecreate here, shouldnt need listview refresh }, 

i'm guessing ajax call inside of searchfilms function. when call $('#film-search-results').listview("refresh"); , $('#add-title-page').trigger("create"); after call searchfilms ajax call isn't complete yet , hasn't populated listview json response. why not working.


Comments

Popular posts from this blog

javascript - JS causing window size to be bigger than necessary - Dropdown bug -

How to mention the localhost in android -

php - Calling a template part from a post -