当通过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

希望这有助于！