使用jQuery UI添加標籤，然後通過ajax填充內容

好吧，基本上我使用的是ui.tabs，我想在第一個標籤中有一個鏈接觸發添加2個新標籤，兩者都會由ajax調用填充，該調用取決於所點擊的鏈接的值。我有以下HTML：使用jQuery UI添加標籤，然後通過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的到目前爲止是這樣的：

$(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() { 

     }); 
    }); 
});

現在jQuery的工程，到目前爲止，它的正確拿起隱藏輸入字段的值，並返回來自ajax.php的正確響應（在Firebug的控制檯中可見），但我不知道如何實現的是如何使標籤添加正確的信息。基本上，ajax.php查詢數據庫並提取2個字段的內容（顯然記錄根據發送的值而變化）。然後，第一個字段的內容將顯示在新的「摘要」選項卡中，第二個字段的內容將放置在第二個新選項卡「讀取主題」中。然而，我不知道如何構建jQuery來實現這一點（我對這個主題相當陌生）。

（很明顯，我知道，一旦編碼正確，將不需要jQuery的第3-6行）。

來源

2011-06-21 analbeard

您是否最終找到了解決問題的方法？ – John

對不起，約翰，我一整天都在上班，現在要去玩一玩。 – analbeard

好的，所以我使用了元素其他的答案，並結束了這個工作代碼：

$(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使用？

來源

2011-06-23 07:32:36 analbeard

這背後的基本思想是按時間順序存檔文檔列表，第一個選項卡包含鏈接列表，然後關閉創建摘要和讀取選項卡。現在，如果用戶決定閱讀第二個文檔，他們最終會得到幾個打開的選項卡，這不是一個好用戶界面的最佳範例。無論如何，我可以強制新創建的選項卡具有特定的類，並讓click事件查找具有該類的選項卡，並在創建新選項卡之前將其刪除？ – analbeard

我覺得你其實很接近你想要的東西。像這樣？

<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」商店一定的價值，你需要從數據庫中獲取正確的信息。

來源

2011-06-21 22:09:30

我覺得這是我需要的答案，但是因爲Javascript是我似乎無法讓我的腦袋圍繞代碼實際正在做的事情，所以我可以自己實現它。我的主要關鍵點實際上是理解面板變量的作用？它會在哪裏尋找hidSummaryID等？在包含關閉ajax請求的鏈接的選項卡中？如果這些問題非常基本，請抱歉。 – analbeard

不錯，這很好 - 我們都在某個時候學習這些東西。面板變量作用於作爲選項卡加載的div。這就是你所看到的。在該視圖中，您可以隱藏字段，當您發佈到摘要和閱讀時使用。我認爲你會將這些字段存儲在面板中，因爲面板在你點擊它之前不會被加載？ –

啊，我現在看到你要用那個代碼去哪裏。也許有一些僞代碼可以幫助解釋我想要實現的目標？我可以看到我需要在代碼中執行的操作。 '當點擊第一個標籤中的鏈接時獲取隱藏輸入的標識'> '將隱藏輸入的商店標識作爲變量'> '用ajax.php？content = summary＆id =（隱藏輸入值）添加標籤'摘要' '> '添加標籤'讀'與ajax.php？內容=讀取和ID =（隱藏輸入值）' 抱歉我的垃圾評論格式，但我不習慣stackoverflow的評論標籤 – analbeard

所以從我所看到的這是你的問題：「我不知道如何實現的是如何使標籤添加正確的信息。」

$.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觀點：http://api.jquery.com/after/

這裏是一個快速jFiddle顯示什麼JSON編碼數組做：http://jsfiddle.net/DKuK9/1/ 它是運用一對夫婦跨度與陣列內容納入股利，不precisly你的腳本，但是我做的沒有AJAX頁面來電:)

編輯您的GET函數的用法是錯誤車道

來源

2011-06-21 22:21:34 John

使用jQuery UI添加標籤，然後通過ajax填充內容

回答

相關問題