JQuery performance issue (Or just bad CODING!)

Posted by ferronrsmith on Stack Overflow See other posts from Stack Overflow or by ferronrsmith
Published on 2010-12-29T15:25:32Z Indexed on 2011/01/01 21:54 UTC
Read the original article Hit count: 170

Filed under:
|
function getItemDialogContent(planItemType) {
    var oDialogContent = $('<div/>').append($('#cardDialogHelper').html()).addClass("card");
    if (planItemType) {
        oDialogContent.find('#cardDialogHeader').addClass(planItemType).find('#dialogTitle').html(planItemType);
        oDialogContent.find('#cardDialogCustomFields').html($('#' + planItemType + 'DialogFields').html());

        if (planItemType == 'announcement' || planItemType == 'question') {
            oDialogContent.find("#dialogPin").remove();
        }
    }
    return oDialogContent;
}

I am doing some code cleanup for a web application I am working on. The above method lags in IE and most of our user base use IE. Can someone help me. I figure the find() method is very expensive because of the DOM traversal and I am thinking of optimizing. Any ideas anyone? Thanks in advance :D

Been doing some profiling on the application and the following line seems to be causing alot of problems. help me please. is there any way I can optimize ?

$('').append($('#cardDialogHelper').html()).addClass("card");

This is the ajax call that does the work. Is there a way to do some of this after the call. Please help me. (Added some functions I thought would be helpful in the diagnosis)

    GetAllPlansTemp = function() {
        $.getJSON("/SAMPLE/GetAllPlanItems",processData);
    }

    processData = function(data) {
        _throbber = showThrobber();
        var sortedPlanItems = $(data.d).sort("Sequence", "asc");
//        hideThrobber(_throbber);

        $(sortedPlanItems).each(createCardSkipTimelime);

        doCardStacks();
        doTimelineFormat();

        if (boolViewAblePlans == 'false') {
            $("p").show();
        }

        hideThrobber(_throbber);

    }

function createCardSkipTimelime() {

    boolViewAblePlans = 'false';

    if (this.__Deleted == 'true' || IsPastPlanItem(this)) {
        return;
    }

    boolViewAblePlans = 'true';
    fixer += "\n" + this.TempKey;  // fixes what looks like a js threading issue.

    var value = CreatePlanCard2(this, GetPlanCardStackContainer(this.__type));
    UpdatePlanCardNoTimeLine(value, this);


}

function CreatePlanCard2(carddata, sContainer) {
    var sCardclass = GetPlanCardClass(carddata.__type);
    var editdialog = getItemDialogContent(sCardclass);
    return $('<div/>').attr('id', carddata.TempKey).card({ 'container': $(sContainer), 'cardclass': sCardclass, 'editdialog': editdialog, 'readonly': GetCardMode(carddata) });
}

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about jQuery