Question

我在对话框的表格中显示一些动态数据，当我点击表格的任何单元格时，它会在另一个弹出窗口（对话框）的新表格中显示另一个动态数据。第二个弹出表在点击第一个表格的单元格后需要一些时间才会出现。我想显示一个加载器图像，直到我的第二个表（对话框）出现.... 我在网上搜索了很多，但没有遇到我的情况...

当我点击第一张桌子的单元格时，会调用此函数...

// 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);  
});

请帮助我，我已经花了很多时间，但仍在寻求解决方案......

Answer 1

使用动画GIF在DOM中的某处添加 loader 标记，并隐藏它：

<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');

Answer 2

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

当我尝试创建对话框时，如何显示加载程序图像

2 个答案: