แถบความคืบหน้า Jquery ui ไม่แสดงต่อหน้าองค์ประกอบอื่นๆ

ฉันใช้ JQuery UI 1.8.20, asp.net 4.0, VS 2010 และ

ฉันมีปัญหาในการแสดงแถบความคืบหน้าด้านหน้าองค์ประกอบมาร์กอัปอื่นๆ ทั้งหมดเมื่อโหลดข้อมูลเพื่อเติมบางรายการ

มาร์กอัป html ของฉันมีพื้นฐานดังนี้ (splitDocumentProgressbar คือแถบความคืบหน้า):

<div id="mainCategorizerContainer">
    <div id="uncategorizedArea" class="uncategorized-area">        
        <ul id="uncategorizedPagesList" class="gallery ui-helper-reset ui-widget ui-helper-clearfix uncategorized-document-pages-list-area uncategorizedPages">                   
        </ul>        
    </div>
    <div id="categorizedArea" class="categorized-area">
        <ul id="documentCategoryList" class="document-category-list-area ui-helper-reset">                                      
        </ul>
        <ul id="categorizedDocumentPagesList" class="categorized-document-pages-list-area ui-helper-reset" >                       
        </ul>
    </div>
    <div id="splitDocumentProgressbar" style="width: 20%;"></div>
    <div id="splitDocumentDialog"><span id="splitDocumentDialogContent"></span></div>
</div>

จาวาสคริปต์ที่เติมหนึ่งรายการและอัปเดตแถบความคืบหน้า (รหัสนี้อยู่ในไฟล์จาวาสคริปต์ภายนอกที่ฉันเขียนและไฟล์นี้อ้างอิงใน aspx ที่กำหนดมาร์กอัป):

var initializeUncategorizedPagesList = function (data) {
    var listItems = [];

    var progressBarSteps = data.DocumentPages.length;
    showProgressBar(true);

    $.each(data.DocumentPages, function (index, documentPage) {

        updateProgressBar(progressBarSteps, index);

        var headerClass = $.validator.format('<h5 class="ui-widget-header">{0}</h5>', documentPage.Title);
        var image = $.validator.format('<img src="Handlers/ImageHandler.ashx?docid={0}&variantid={1}" alt="{2}"/>', documentPage.DocumentId, documentPage.ThumbVariantId, documentPage.Title);
        var imageUrl = $.validator.format('<a href="/thHandlers/ImageHandler.ashx?docid={0}&variantid={1}" title="Forstørr bilde" class="ui-icon ui-icon-zoomin">Forstørr bilde</a>', documentPage.DocumentId, documentPage.HoverVariantId, documentPage.Title);
        var listClass = $.validator.format('<li id="uncategorizedPage{0}" class="ui-widget-content ui-corner-tr">{1} {2} {3}</li>', documentPage.DocumentId, headerClass, image, imageUrl);

        listItems.push(listClass);
    });

    pub.UncategorizedPagesList.append(listItems.join(''));
    showProgressBar(false);
};


var updateProgressBar = function (progressBarStep, index) {

    //If this is true, the progressbar property is not set
    if (pub.Progressbar === "Progressbar") {
        return;
    }

    if (progressBarStep === 0) {
        return;
    }

    var progressBarValue = (100 / progressBarStep) * (index + 1);

    pub.Progressbar.progressbar({
        value: progressBarValue
    });
};

// Show/hide the progress bar and will also reset the progress bar
var showProgressBar = function (show) {

    if (show === true) {
        updateProgressBar(1, -1);
        pub.Progressbar.show();
    }
    else {
        pub.Progressbar.hide();
    }
};

แถบความคืบหน้าทำงาน ฉันรู้สิ่งนี้เพราะเมื่อฉันแก้ไขโค้ดจาวาสคริปต์ ฉันจะเห็นว่าแถบความคืบหน้าแสดงขึ้นและค่าจะเพิ่มขึ้น แต่สำหรับฉันแล้วดูเหมือนว่าแถบความคืบหน้าจะซ่อนอยู่หลัง UI ที่เหลือเมื่อฉันรันโค้ดโดยไม่ทำการดีบั๊ก

คุณมีเคล็ดลับและเทคนิคที่จะแบ่งปันกับฉันหรือไม่?