各タブのAjaxコール機能

Question

cssを使用するだけで応答性の高いタブを作成しました。しかし、私はajax呼び出しを実装しようとすると、私はちょっと混乱しています。

私はいくつか質問があります。

1. を各タブのAJAX要求を行うための最善の方法は何ですか？
2. "tab" divに応答を追加する最短方法はありますか？
3. 選択したタブのページ読み込み時にajaxを呼び出すにはどうすればよいですか？
4. 最初にタブをクリックした後、再度ajaxコールを行う必要はありません。応答をキャッシュする必要がありますが、 "cache:true"は機能しません。

また、他の改良、提案や修正が参考になります。

例：私は代わりに、変化にそれを呼び出すので、私はタブボタンでそれを呼ぶだろうだろうJSFiddle

Answer 1

あなたは私はあなたが（この場合、またはオブジェクト）ストアに一度変数内のデータを、それを行うロードするために必要なすべてのデータをループを実行しますAJAXを使用する必要がある場合

イベントはすでに入力されているtabDataからIDを取得し、ajaxページを再度呼び出す必要はありません。あなたがインスタントしたいページを開いたときに、AJAX成功にif文を作成した最初の選択したタブを取り込む場合は、このシナリオ

のためにそれを必要としないので

は今、これはあなたのキャッシュの問題を解決します

最終結果は、これらの線に沿って何かになります：

$(document).ready(function() { 
    //data for the tabs 
    var tabs = { 
     1:"tabone", 
     2:"tabtwo", 
     3:"tabthree" 
    } 

    //empty object for now will be filled with ajax data 
    var tabData = {}; 

    var activeTabVal=1; 
    var activeTabID = $('input[name=tabs]:checked', ".tabs").attr('id'); 


    for(key in tabs) { 
     ajaxCall(key); 
    } 



    $('.tabs input').on('change', function() { 
     var activeTab=$('input[type="radio"]:checked', '.tabs').val(); 
     var tabElement = $('input[name=tabs]:checked', ".tabs").attr('id'); 
     //since we have the data already no need to call ajax here we just get it out of our already loaded data 
     var data = tabData[activeTab]; 
     replaceData(tabElement, data); 
    }); 

    function ajaxCall(key){ 
     $.ajax({ 
      type: "POST", 
      dataType: 'jsonp', 
      url: 'https://jsonplaceholder.typicode.com/posts/'+key, 
      async: false, 
      cache: true, 
      contentType: "application/json; charset=utf-8", 
      success: function (msg) { 
       tabData[key] = msg.body; 
       //use this to imediatly populate the selected div fo your second point 
       if(key == activeTabVal) { 
        replaceData(tabs[key], tabData[key]); 
       } 
      } 
     }); 
    } 

    function replaceData(tabElement, tabData) { 
     $('#'+tabElement).next().next().closest('div').append(tabData); 
    } 
}); 

Answer 2

1. は、あなたのタブのデータ-idと同じデータ-idのdiv要素に対応するコンテナを付け
2. をクリックあなたはをクリックして、それをバインドする場合は、$('.tab-container[data-id='+$(this).attr('data-id')+']').append('The content');
3. ような何かを行うことができます追加するとき、あなたは単に私があなただったら、私は、コンテナのdivのデータ部分にデータを格納し、WHE再びそれを取得します$('.tab-button .active').trigger('click');
4. を実行することができますn彼らはそれを再びクリックします。だから、それが設定されているかどうかをチェックし、もしそうでなければ、ajaxコールをしてください。変化よりもhttps://api.jquery.com/jquery.data/