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

あなたのhrefは、実際のリンクの場合widget docによると、Ajaxは箱の外に動作するはずですが：Ajaxを介して外部コンテンツを取得

：

ロードメッセージをカスタマイズするには、spinnerオプションを使用することができます の場合は、hrefの値を に設定してタブを開きます。 が応答を待っている間に、 というラベルのラベルが「Loading ...」と変化した後、 がロードされると、 は通常のラベルに戻ります。

<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

例では、ユーザーが2番目の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

クリックラベルを「読み込み」に設定して、AJAXから応答が返ってくるようにしたい場合は、それを変更してみませんか？

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

これは、明らかに、各タブで機能するように機能を書き直すことができます。

Answer 4

あなたはタブのjquery UIに既に存在していると思います。

リモート コンテンツのロード中にこの文字列のHTMLコンテンツは、タブのタイトルに を示しています。

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

この情報がお役に立てば幸い！