javascript - Append element to list dynamically, but browser doesn't refresh UI

Question

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

Jeff Chu Jeff Chu · Accepted Answer · 2012-06-17T04:00:54

I resolved this issue myself.

I use my jQuery plug-in to initialize this form by using the following code:


    designFrameManager.updateFrameBody(data); // data is a HTML string.

    projectDesigner = $(data).projectDesigner({
        height: designFrameManager.getBodyHeight(),
        width: designFrameManager.getBodyWidth(),
        projectName: name
    });

updateFrameBody() method's code:

    this.updateFrameBody = function (ui, initFunction) {

        _designFrameBody.html(ui);

        if (initFunction != null && $.isFunction(initFunction))
            initFunction();

    };

I think the plug-in's initialization can't be binded to DOM because the init action is after UI binding to DOM, so DOM can't auto-refresh the changes after my script's call.

So, I update the code to this:


    projectDesigner = $(data).projectDesigner({
        height: designFrameManager.getBodyHeight(),
        width: designFrameManager.getBodyWidth(),
        projectName: name
    });

    designFrameManager.updateFrameBodyByObject(
       projectDesigner // initialized object
    );

updateFrameBodyByObject() method's code:

   this.updateFrameBodyByObject = function (ui, initFunction) {

        _designFrameBody.html("");
        _designFrameBody.append(ui);

        if (initFunction != null && $.isFunction(initFunction))
            initFunction();

    };

This issue is fixed successfully.

Thanks for all replies.

javascript - Append element to list dynamically, but browser doesn't refresh UI

2 Answers