listview('refresh') not working - ajax

Question

In my application listView('refresh') doesn't work. Here is my code
I create listView dynamically
var str = "<ul data-role='listview' data-inset='true' id='mylist'>";
for(var i = 0; i<data.length; i++ ){
str += "<li>"+data[i].note.text+"</li>";
}
str += "</ul>"
$('#content').append(str);
function addnote(){
var note_text = $('#note_text').val();
var note_lat = $('#lat').val();
var note_lng = $('#lng').val();
$.ajax({
type: "POST",
beforeSend: function (jqXHR) {
jqXHR.setRequestHeader(KEY1, _key1);
jqXHR.setRequestHeader(KEY2, _key2);
},
url:SERVER_URL+"api/addNotes/",
data: {type: 'text',note_text: note_text, note_lat: note_lat , note_lng: note_lng},
success: function(data, textStatus, jqXHR) {
if (data.status == "ok"){
$.mobile.changePage("file:///android_asset/www/index.html?"+_key1+"|"+_key2+"|");
}
else{
alert("Something wrong");
}
},
error: function(jqXHR, textStatus, errorThrown) {
alert("Error=" + errorThrown);
},
complete: function() {
$('#mylist').listview('refresh');
}
});
}
I read many reports and forums there said I have to call listview('refresh') in ajax's complete function. But in my code it doesn't work, could anyone tell me what is the problem here?

Answer 1

Refresh is for when you are adding elements to an existing, enhanced listview. If you are creating the entire listview dynamically you need to trigger a "create" on the parent div.
So if you had <div id="container><ul></ul></div>, you would need to call $("#container").trigger("create").

Answer 2

You probably want to see your data after adding some values. If you want to do this listview.refresh doesn't help you after adding some values you have to call you data again, i.e you have to call getNote() again.
I think it helps.

Answer 3

Try this for you complete function instead
complete: function() {
$('#mylist').listview();
}
As someone else mentions the refresh method is for when you are adding listitems to a listview that JQM has already created.

Answer 4

First of all , You must understand how does the refresh work, it will just refresh the listview's css when you add a new LI so that the new LI will have a right css,
function createItem(tx,results){
var len = results.rows.length;
console.log("lisitem len "+len);
for(var i = 0;i<len;i++){
var content = results.rows.item(i).content;
var id = results.rows.item(i).id;
var string = '<li>'+content+' ['+results.rows.item(i).date+']</li>';
$("#all_list").append(string);
};
freshList("all_list");
}
freshList("all_list"); it will refresh the listview ,if you don't do it, all of the LI will display like below.
<li> 测试成功 [2013-10-02]</li>
the LI doesn't have a css description
that's why your ajax operation doesn't work