populate a jquery page with javascript - how to refresh a list

Question

After spending one week testing, testing and testing again codes, I must admit a have reached my limits...

I am trying to convert a web site (sql-php) to a mobile one, using the jquery framework. My main problem is that I have limited knowledge with javascript... but studied a lot those last 168 hours...

Below is the part of the javascript code which is suppose to populate the ul (id = list-area) section of my html code.

This code is working... only if put the alert(list); line! Should I remove this part, the "list" is not added to the menu.

I can't understand why this alert is needed... There must be something wrong about the way I try to refresh the page. Your help would be really appreciated.

Thanks

$(function() {
    list = "";
    $.getJSON("http://www.sogival.com/jquery-fetch.php", // le fichier qui recevera la requête
    {
        "page": "area",
        "page_id": 0,
        "lang": "fr"
    }, // les paramètres


    function(data) { // la fonction qui traitera l'objet reçu
        for (var i = 0; i < data.items.length; i++) {
            // alert(data.items[i].name);
            list += '<li><a href="m-area.html">';
            list += data.items[i].name;
            list += '<span class="ui-li-count">';
            list += data.items[i].total;
            list += '</span></a></li>';
        }
    });
    alert(list);
    $("ul#list-area").append(list).listview("refresh");
});​

Answer 1

Put this code:

$("ul#list-area").append(list).listview("refresh");

right after your for loop.

EDIT:

Also. var list = ''