0

テーブルの任意のセルをクリックすると、ダイアログ ボックスのテーブルに動的データが表示されます。別のポップアップ (ダイアログ ボックス) の新しいテーブルに別の動的データが表示されます。この 2 番目のポップアップ テーブルは、最初のテーブルのセルをクリックした後、表示されるまでに時間がかかります。2 番目のテーブル (ダイアログ ボックス) が表示されるまでローダー イメージを表示したい.. ネットでたくさん検索しましたが、状況に合うものはありませんでした.

この関数は、最初のテーブルのセルをクリックすると呼び出されます...

// CODE SNIPPET
function access(test1,facilityName,status)
{
    var divString="<table>"+"<tr>"+"<td><table><div id='rfidMove'></div></table></td>"+"</tr></table>";

    //sending some parameters on a jsp page and based on these params getting content of   that jsp here

    $.post("RfidInventory.jsp?","container="+test1+"facilityName="+facilityName+"&                                                                                                                   status="+status, function(data){

    // showing another jsp page data here to make table in this dialog       
         $("#rfi").dialog("destroy");
         $("#rfi").html(divString);
         $("#rfi").dialog({  
         width: '650',
         height: '300',
             zIndex : '3000',
             modal:true, 
         title: "RFID INVENTORY DETAIL",
             overlay: { opacity: 0.1, background: 'black'} 
       });
   $("#rfidMove").html(data);  
});

私はすでにこれに多くの時間を費やしましたが、まだ解決策を探しています...

4

2 に答える 2

1

アニメーションGIFを使用して、DOMのどこかにローダータグを追加し、それを非表示にします。

<div id="#loader" style="display: none;"><img src='loader.gif' alt='loading' /></div>

次に、AJAX呼び出しの直前に表示します。

$("#loader").css("display", "");
$.post(url, function(data) {
    $("#loader").css("display", "none");
});

これが通常の方法です。このサイトで気の利いたカスタマイズされたアニメーションGIFをダウンロードできます：http： //ajaxload.info/

編集Firebugでこれを試してみてください。

ローダーを追加

$("body").append("<img id='myloader' src='http://www.ajaxprojects.com/db/img16.gif' />");

それを隠す

$("#myloader").css('display', 'none');
于 2012-06-26T05:58:20.510 に答える
1 
var val = 10;
$( "#progressbar" ).progressbar({
    value: val
});

<div id="progressbar"></div>

このリンクを参照してください：-

http://jqueryui.com/demos/progressbar/

http://docs.jquery.com/UI/Progressbar

http://www.codeproject.com/Articles/66049/Showing-Progress-Bar-Using-jQuery

于 2012-06-26T05:58:37.250 に答える