JqueryネストされたAjaxタブを作成する方法

誰かがajax呼び出しによってネストされたタブを取得するのに手伝ってもらえますか？JqueryネストされたAjaxタブを作成する方法

説明：私はアヤックスオプションを使用してjQueryのタブを持っています

CODE：

$(".has_ajax_tabs").tabs({ 
     ajaxOptions: { 
      error: function(xhr, status, index, anchor) { 
       $(anchor.hash).html("<h3>OOPS...Something went wrong!</h3> Couldn't load this tab at this time. Please try again later."); 
      } 
     }, 
     spinner: "Loading...", 
     fxSlide: true 
    });

HTMLのCODE：

<div id="tabs" class="has_ajax_tabs"> 
           <ul> 
            <li><a href="#tabs-1">Profile Details</a></li> 
            <li><a href="nestedTabsLink.php">Users</a></li> 
           </ul> 

<div id="tabs-1"> Profile Details form here </div> </div>

nestedTabsLink.php Ajax呼び出し

<div id="tabs-nested" class="has_ajax_tabs"> 
    <ul> 
     <li><a href="#tabs-inner1">Inner Tab1</a></li> 
     <li><a href="#tabs-inner2">Inner Tab2</a></li> 
    </ul> 
    <div id="tabs-inner1"> 
     Nested Tabs1 
    </div> 
    <div id="tabs-inner2"> 
     Nested Tabs2 
    </div> 
</div>

によってロード

エラー：ロードされたnestedTabsLink.phpファイルも、Ajaxによってロードされても動作していないタブを持っています。 Ajaxがなければ完璧に動作します。誰かが私にコードスニペット/ガイドラインを手伝ってもらえますか？

だから、感謝

出典

2011-11-08 Anonymous

あなたはオペアンプnestedTabsLink.phpがあなたを提出するかどうまた、タブの設定権を持っているでしょうか？

ajaxを使用すると、リクエストされたページ内のjavascriptが解析されません。これを解決する最善の方法は、ページがロードされた後に実行される関数を追加することです。したがって、nestedTabsLink.php内のタブのコードをコピーして、ajax呼び出しのcompleteイベント内に貼り付けることができます。

出典

2011-11-08 13:53:01

コードの繰り返しはお勧めできません。そこにいくつかの回避策があるはずです。何か案が？ありがとう –

あなたは、リクエストされたページのすべての

まず、受け入れ率を上げるほうがよいでしょう。

私が正しく理解していれば、2番目のタブグループに「タブマジック」を実行するスクリプトを読み込んでいません。もちろん、それを動作させるオプションがありますが、私は全体のアーキテクチャを改訂することを提案します。冗長であるため、AJAX呼び出しでHTMLマークアップを読み込むべきではありません。必要なデータだけをロードし、必要に応じてJSでデータをレンダリングします。

出典

2011-11-08 13:54:02 J0HN

第2に、ネストされたタブは悪いUIデザインhttp://homepage.mac.com/bradster/iarchitect/tabs.htm –

合意。私の場合、ページは非常に長く、Ajaxによるアクセシビリティと負荷分散のために2つのセクションに分けなければなりません。だから、私はajaxを介して負荷を監視したいと思います。また、それは2つの層のタブ付き構造です。 –

JqueryネストされたAjaxタブを作成する方法

答えて

関連する問題