Question

I’m using the jquery tab plugin with the same results that are on jquery ui site (link text).

The problem is that I want to change the tab label to something like “Loading” when the Ajax request is waiting for a response. How shall I achieve that?

Edit:

What I have now:

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

and on javascript I just have the following code:

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

    });
  });
</script>

What i want is to show a loading message inside the div of the active tab.

Answer 1

According to the widget doc, ajax should work outside the box if your href is an actual link :

To customize loading message, you can use the spinner option :

Fetch external content via Ajax for
the tabs by setting an href value in
the tab links. While the Ajax request
is waiting for a response, the tab
label changes to say “Loading…”,
then returns to the normal label once
loaded.

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