當通過ajax加載內容時向用戶顯示反饋

Question

我正在使用jquery ui站點（link text）上的相同結果的jquery選項卡插件。

問題是，當Ajax請求正在等待響應時，我想將選項卡標籤更改爲類似「加載」的內容。我該如何實現這一目標？

編輯：

我現在擁有的一切：

<div id="tabs"> 
    <ul> 
    <li><a href="#tabs-1">User Profile</a></li> 
    <li><a href="/User/EditUser/<%: Model.Id %>">Edit</a></li> 
    <li><a href="/User/Delete/<%: Model.Id %>">Delete AccountT</a></li> 
    </ul> 

    <div id="tabs-1"> 
    <% Html.RenderPartial("UserProfile", Model); %> 
    </div> 
</div> 

，然後在JavaScript我有以下代碼：

<script type="text/javascript"> 
    $(function() { 
    $("#tabs").tabs({ 

    }); 
    }); 
</script> 

我要的是顯示加載消息在活動標籤的div內。

Answer 1

按照widget doc，AJAX應該禁區外的工作，如果你的href是實際鏈接：

要自定義加載信息，您可以使用spinner選項：

獲取通過Ajax外部內容爲 的標籤通過在 標籤鏈接中設置href值。雖然Ajax請求 正在等待響應，但標籤 標籤更改爲「加載...」， 然後返回到加載了 的正常標籤。

<script> 
    $(function() { 
     $("#tabs").tabs({ 
      spinner: "<em>My Loading Msg</em>", 
      ajaxOptions: { 
       error: function(xhr, status, index, anchor) { 
        $(anchor.hash).html(
         "Couldn't load this tab. We'll try to fix this as soon as possible. " + 
         "If this wouldn't be a demo."); 
       } 
      } 
     }); 
    }); 
</script> 

Answer 2

從你的例子我正確的假設你想要導航到另一個頁面，當用戶點擊任何一個後兩個選項卡，但你想要顯示一個加載消息，而你正在等待下一個選項卡加載？

<input type="hidden" id="modelId" value="<%=Model.Id%>" /> 
<div id="tabs"> 
    <ul> 
     <li> 
      <a href="#tabs-1">User Profile</a> 
     </li> 
     <li> 
      <a href="#tabs-2">Edit</a> 
     </li> 
     <li> 
      <a href="#tabs-3">Delete AccountT</a> 
     </li> 
    </ul> 

    <div id="tabs-1"> 
     <% Html.RenderPartial("UserProfile", Model); %> 
    </div> 
    <div id="tabs-2"> 
     <p>Loading, please wait...</p> 
    </div> 
    <div id="tabs-3"> 
     <p>Loading, please wait...</p> 
    </div> 
</div> 

，做重定向到您的JavaScript您的其他網頁，做這樣的事情：

如果是這樣，你可以通過在其他選項卡保持加載消息像這樣做

$(document).ready(document_ready); 

function document_ready() 
{ 
    $("tabs").bind("tabsselect", onTabSelected); 
} 

function onTabSelected(event, ui) 
{ 
    var modelId = $("#modelId").val(); 
    switch (ui.panel.id) 
    { 
     case "tabs-2": 
      window.location.href = "/User/EditUser/" + modelId; 
      break; 
     case "tabs-3": 
      window.location.href = "/User/Delete/" + modelId; 
      break; 
    } 
} 

Answer 3

爲什麼不設置標籤標籤來「加載」onclick，並將其更改爲任何你想要的東西，一旦你從AJAX得到迴應？

$(function() { 
    $("#tabs").tabs(); 
    $("#tab1").click(function() { 
    $(this).val("Loading..."); 
     $.ajax({ 
     blablabla... 
     success: function() { 
     $("#tab1").val("Tab 1"); 
      } 
     }); 
    }); 

這應該會給你一個想法，顯然這個函數可以寫得更好，以便在每個選項卡上執行。

Answer 4

我想你在jquery ui中已經存在的Tabs。

此字符串的HTML內容在一個標籤標題所示 在加載遠程 內容。

http://jqueryui.com/demos/tabs/#option-spinner

希望這有助於！