Question

我正在使用jquery选项卡插件，其结果与jquery ui site（link text）上的结果相同。

问题是我想在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

为什么不将标签标签设置为“加载”onclick，并在从AJAX获得响应后将其更改为您想要的任何内容？

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

这应该给你一个想法，显然可以更好地编写函数来对每个选项卡进行操作。

Answer 2

根据widget doc，如果您的href是实际链接，则ajax应该在框外工作：

要自定义加载消息，您可以使用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 3

我认为你所拥有的东西已经存在于Tabs的jquery ui中。

此字符串的HTML内容是远程显示在标题标题中内容正在加载。

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

希望这有帮助！

Answer 4

从您的示例中我可以正确地假设您想要在用户单击后两个选项卡中的任何一个时导航到另一个页面，但您希望在等待下一个选项卡加载时显示加载消息？

如果是这样，您可以通过在其他标签中保留加载消息来实现，如下所示：

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

通过ajax加载内容时向用户显示反馈

4 个答案: