CODEWITHSUNDEEP
javascriptjqueryjquery-mobilecordova
Justin
Justin

Reputation: 2530

jquery-mobile List View -> Refresh Events

I have seen a few of these posts similar to this, so i'm sorry in advance if this is a duplicate.

I have this code when pulling in some data, but I can't seem to figure out why my list isn't being refreshed... Any possible solutions? This is my JS.

/* VARIABLES
-------------------------------------------------------------------- */
var serviceUrl = "http://localhost/app/services/";
var serviceToLoad = "homeList.php";

var home;
var pageId    = "#homePage";
var contentId = "#homeList";


/* JQUERY
-------------------------------------------------------------------- */
$(pageId).live('pageshow', function(event){
    getHomeList();
});


/* FUNCTION SET
-------------------------------------------------------------------- */
function getHomeList() {

    $.getJSON(serviceUrl + serviceToLoad, function(data) {

        // Remove all content first
        $(contentId +' li').remove();

        // Load Data
        $.each(data.items, function(index, list){
            $(contentId).append('<li><a href="#">' + list.name + '</a></li>\n');
        });

    });

    // Reload View
    $(contentId).listview('refresh');
}

And this is my HTML page

<div id="homePage" data-role="page" >
    <div data-role="header" data-position="fixed"><h1>Home</h1></div>

    <div data-role="content">
         <ul id="homeList" data-role="listview"></ul>
    </div>
</div>

Any help would be greatly appreciated!

Upvotes: 0

Views: 3594

Answers (3)

Reddy Prasad
Reddy Prasad

Reputation: 251

try this $(contentId).listview('refresh',true); . And be sure to call .listview on the ul element

Upvotes: 0

aki
aki

Reputation: 709

Ajax call is asynchronous so, put the refresh listview inside jSON call!

/* VARIABLES
-------------------------------------------------------------------- */
var serviceUrl = "http://localhost/app/services/";
var serviceToLoad = "homeList.php";

var home;
var pageId    = "#homePage";
var contentId = "#homeList";


/* JQUERY
-------------------------------------------------------------------- */
$(pageId).live('pageshow', function(event){
    getHomeList();
});


/* FUNCTION SET
-------------------------------------------------------------------- */
function getHomeList() {

$.getJSON(serviceUrl + serviceToLoad, function(data) {

    // Remove all content first
    $(contentId +' li').remove();

    // Load Data
    $.each(data.items, function(index, list){
        $(contentId).append('<li><a href="#">' + list.name + '</a></li>\n');
    });

    // Reload View
   $(contentId).listview('refresh')
});
}

Upvotes: 4

ghostCoder
ghostCoder

Reputation: 7655

After you add the rows to your list do a 

var contentDiv=$(".ui-page-active div[data-role*='content'] ul");
contentDiv.listview("refresh");

Upvotes: 1

Related Questions