Показывать обратную связь пользователю при загрузке контента через ajax

Question

Я использую плагин вкладки jquery с теми же результатами, что и на сайте jquery ui ( текст ссылки ).

Проблема в том, что я хочу изменить ярлык вкладки начто-то вроде «Загрузка», когда 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

Согласно документу для виджетов , 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

Почему бы вам просто не установить ярлык вкладки на "загрузку" и не изменить его на любое, как только вы получите ответ от AJAX?

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

Это должно дать вам представление, очевидно, что функцию можно написать лучше, чтобы она действовала на каждой вкладке.

Answer 3

Я думаю, что вы после уже существует в пользовательском интерфейсе jquery для вкладок.

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