Using ajax: javascript – Append element to list dynamically, but browser doesn’t refresh UI on newest questions tagged ajax – Stack Overflow
I have a JavaScript code segment for loading server’s data items, and insert them into UL element with generated LI elements like this:
function loadNewFileTemplates() {
var list = _fileTemplateContainer.find("ul");
$.submitToServer("[server URL]", null, function (data) {
list.empty();
if (data == "") {
list.append("Templates not available."); // in sample code, removed HTML tags
}
else {
$.each(data, function (index, item) {
var itemElement = $("[HTML template string]");
itemElement.find("div[data-field='image']").css("background-image", "url(" + item.icon + ")");
itemElement.find("div[data-field='caption']").text(item.caption);
itemElement.find("div[data-field='description']").text(item.description);
itemElement.find("div[data-field='type']").text(item.type);
itemElement.bind("click", function (e) {
$(e.target).parents("ul").find("li").removeClass("projectSelected");
$(e.target).parents("li").addClass("projectSelected");
});
itemElement.appendTo(list);
});
}
console.log(list);
});
}
This code works on first loading, but in second loading, the UI cannot refresh after elements inserted into UL element.
I confirmed the data is inserted successfully (use console.log() to output result), so I can’t find the reason about this issue.
Please view the screen shot for this issue.
How to resolve this problem?
Thanks.
My browser: Chrome 19.0.1084.56, IE 9.0.8112.16421
jQuery version 1.5.1
source: http://stackoverflow.com/questions/11028884/javascript-append-element-to-list-dynamically-but-browser-doesnt-refresh-ui
Using ajax: using-ajax
Recent Comments