jQuery UIでタブを追加してから、Ajax経由でコンテンツを埋めてください

Question

基本的に私はui.tabsを使用しています。最初のタブでリンクを作成して2つの新しいタブを追加したいと思っています。クリックされたリンクの値に依存するajax呼び出しによって読み込まれます。

<div id="a"> 
    <div class="wrapper"> 
     <input class="imageID" type="hidden" value="11"> 
     <a href="#addTab" class="tabButton">asdfasdfasdfasfasf</a> 
    </div> 
    <div class="wrapper"> 
     <input class="imageID" type="hidden" value="1"> 
     <a href="#addTab" class="tabButton">asdfasdfasdfasfasf</a> 
    </div> 
</div> 

そしてjQueryのこれまでのところ、次のようになります：今、jQueryのこれまでのところ、それが適切に非表示の入力フィールドの値をピックアップしています戻っ作品

$(function(){ 
    var tabs = $("#tabs").tabs(); 
    $('.tabButton').click(function(){ 
     tabs.tabs('add','test.htm','Summary'); 
     tabs.tabs('add','test.htm','Read Topic'); 
    }); 

    $(".tabButton").live("click", function(){ 
     var getImageID = $(this).parent(); 
     $.get("ajax.php?c=" + $(".imageID",getImageID).val(), function() { 

     }); 
    }); 
}); 

を私は、次のHTMLを持っています（Firebugのコンソールに表示される）ajax.phpからの正しい応答ですが、どのように達成するかわからないのは、タブに正しい情報を追加する方法です。基本的に、ajax.phpはデータベースに問い合わせ、2つのフィールドの内容を取り出します（明らかに、送信された値によってレコードが異なります）。最初のフィールドの内容は新しい「要約」タブに表示され、2番目のフィールドの内容は2番目の新しいタブ「トピックの読込み」に置かれます。しかし、私はこれを達成するためにjQueryをどのように構築するのか分かりません（私はかなり新しいです）。

（明らかに、これが正しくコーディングされると、jQueryの3-6行は必要ないことは明らかです）。

Answer 1

だから、私は他の答えは、この作業コードで終わった：

$(function(){ 
    var tabs = $("#tabs").tabs(); 
    $(".tabButton").live("click", function(){ 
     var getImageID = $('.imageID',$(this).parent()).val(); 
      tabs.tabs('add', 'ajax.php?content=summary&id=' + getImageID, 'Summary'); 
      tabs.tabs('add', 'ajax.php?content=read&id=' + getImageID, 'Read Topic'); 
    }); 
}); 

私は元の質問と同じであることを引き起こすリンク。私は違ったやり方をしたのは、ボタンをクリックして解雇したからです。これはjqueryの正当で妥当な使用法と思われますか？

Answer 2

あなたは実際にあなたが望むものにかなり近いと思います。このようなもの？

<div> 
    <ul> 
     <li> 
      <input class="imageID" type="hidden" value="11"> 
      <a href="#addTab" class="tabButton">asdfasdfasdfasfasf</a> 
     </li> 
    </ul> 
</div> 

var tabs = $("#tabs").tabs({ 
    select: function (event, ui) { 
     if (!$(ui.tab).hasClass('tabButton')) { 
      return; // exit because you did not select the first tab 
     } 

     var panel = $(ui.panel), summaryID, readID; 
     summaryID = panel.find('#hidSummaryID').val(); 
     readID = panel.find('#hidReadID').val(); 
     tabs.tabs('add', 'summary.php?c=' + summaryID, 'Summary'); 
     tabs.tabs('add', 'read.php?c=' + readID, 'Read Topic'); 
    } 
}); 

ここで、 'hidSummaryID'と 'hidReadID'は、データベースから正しい情報を取得するために必要な値を保存します。

Answer 3

私はこれがあなたの問題だとわかります。「達成する方法がわからないのは、タブに正しい情報を追加する方法です。」

$.get("ajax.php", { name: $(getImageID).val()}, function(data) { 
//get the json array in data var  
    $(this).after("<span class='title'>Title"+obj["title"]+"</span><span class='summary'>"+obj["text"]+"</span>"); //append a couple of spans with the data after you retrieve the unique data 

}); 

まず、あなたのajax.phpページは、単純なJSON_encode'edの配列を返すする必要がありますhttp://php.net/manual/en/function.json-encode.php、詳細については、このを参照してください。

あなたは、あなたが押したボタンの後に新しいコンテンツを追加documetビューに.after使用されている場合、次のステップは次のとおりです。ここでhttp://api.jquery.com/after/

は、JSONエンコードされた配列がやっていることを示し、迅速jFiddleです：http://jsfiddle.net/DKuK9/1/ あなたのスクリプトは、しかし、私はあなたのget関数の使用が

wrong-た

編集:)をするために呼び出すAJAXのページを持っていない何をしているかprecisly、div要素に配列されたコンテンツとスパンのカップルをいない適用されます