显示jquery GIF onload jquery标签

我想显示一个微调gif内我的标签显示，而AJAX内容加载区域内。但是，我的Ajax调用不会在选项卡代码内发生。它通过下面显示的外部ajax调用发生，然后在ajax调用的.done（）方法期间，我将json数据放置在位于选项卡内的div中。显示jquery GIF onload jquery标签

我想在ajax调用发生时在选项卡内显示一个微调框。我在网上查了几篇教程，但没有任何内容符合我的需求。任何帮助赞赏谢谢。

      $('#tabs').tabs({ 
            selected: 1, 
            beforeLoad: function(event, ui) { 
             $('#imageSpinner').show(); 
             /* if ajax call to retrieve tab content failed */ 
             ui.jqXHR.error(function() { 
              // $('#imageSpinner').hide(); 
              ui.panel.html("An error occured."); 
             }); 
            }, 

            /* Called when tab is loaded */ 
            load: function(event, ui) { 
             // $('#imageSpinner').hide(); 

            } 
           }); 


<div id="tabs"> 
           <ul> 
            <li><a href="#tabs-1">PL Message Viewer</a> 
            </li> 
            <li><a href="#tabs-2">File Message Viewer</a> 
            </li> 
           </ul> 

           <div id="tabs-1" style="height:535px; overflow-y:scroll; float:left; z-index:1;"> 
            <div style="margin-left:32px;"> 
             <div id="buttonContent" class="buttonContente"> 
             <img id="imageSpinner" src="images/image_623941.gif" style="vertical-align:middle; z-index:200;'"> 
             </div> 
            </div> 
           </div> 

           <div id="tabs-2" style="height:535px; overflow-y:scroll; float:left;"> 
            <div style="margin-left:32px;"> 
             <div id="buttonContentFile" class="buttonContente"></div> 
            </div> 
           </div> 

          </div> 




function getFilters() { 
        return $.ajax({ 
         type: "GET", 
         url: "InsertMessage", 
         data: "term=PLM", 
         cache: false, 
         success: function (data) {}, 
         error: function (xhr, status, error) { 
          alert(xhr.responseText); 
         } 
        }); 
       } 
       getFilters().done(function (r) { 
        if (r) { 
         gridValsstr = r; 
         gridvals = JSON.parse(gridValsstr); 
         $.each(gridvals.messagetypes, function (key, value) { 
          $("#buttonContent").append('<div id="ck-button"> <label> <input type="checkbox" value="' + value.id + '"><span>' + value.messagetype + '</span> </label></div>'); 
         }); 

        } 
       }) 
        .fail(function (x) { 
         alert("Asynchronous call failed."); 
        });

来源

2014-03-12 user3196063

心不是的微调器已经显示何时加载页面？ – mathius1

这是我不能说的另一件事我有一个本地数据库，它发生得太快，如果它显示。 – user3196063

看起来像被默认显示在页面加载的时候。要删除图像并显示内容，请在done函数中使用html（）而不是append（）。

这将替换与加载的内容的图像。

$("#buttonContent").html('<div id="ck-button"> <label> <input type="checkbox" value="' + value.id + '"><span>' + value.messagetype + '</span> </label></div>');

因为它似乎你知道你加载你的结果元素Ajax调用，当你调用getFilters内容可以设置为微调（）函数

function getFilters() 
{ 
    $("#buttonContent").html('<img id="imageSpinner" src="images/image_623941.gif" style="vertical-align:middle; z-index:200;'">'; 
    // your ajax call 
});

来源

2014-03-12 17:30:53 mathius1

是的，这工作，然后将其隐藏在.done（）方法。 – user3196063

尝试改变beforeLoad功能，包括一个函数来处理Ajax调用的事件做...

beforeLoad: function(event, ui) { 
    $('#imageSpinner').show(); 

    // when ajax call to retrieve tab content is complete 
    ui.jqXHT.done(function() { 
     $('#imageSpinner').hide(); 
    }); 

    // if ajax call to retrieve tab content failed 
    ui.jqXHR.error(function() { 
     ui.panel.html("An error occured."); 
    }); 
},

来源

2014-03-12 17:11:11 Archer

是的，这将无法正常工作bc我有多个Ajax调用...对于页面的不同区域 – user3196063

我已经改变了答案。试试看，让我们知道你是怎么做的。 – Archer

感谢Archer，我刚刚发现在ajax调用开始时显示gif，然后在调用ajax调用的.done（）部分期间在包含图像的div中调用.hide（）是实现它的最简单方法。 – user3196063

// Tabs 
$("#tabs").tabs({ 
// This enables caching as well 
beforeLoad: function(event, ui) { 
    if (ui.tab.data("loaded")) { 
     event.preventDefault(); 
     return; 
    } 
    ui.jqXHR.success(function() { 
     ui.tab.data("loaded", true); 
     $(".spinner").hide(); 
    }), 
    ui.jqXHR.error(function(jqXHR, textStatus, errorThrown) { 
     alert(lang.tabErrorMsg); 
    }) 
}, 
beforeActivate: function(event, ui) { 
    if (ui.newPanel.html()=="") ui.newPanel.html('<img class="spinner" src="spinner.gif">); 
     } 
});

来源

2014-03-13 11:39:32

显示jquery GIF onload jquery标签

回答

相关问题