顯示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標籤

回答

相關問題