使用jQuery UI添加选项卡，然后通过ajax填充内容

Ok, so basically I'm using ui.tabs and I want to have a link in the first tab trigger the adding of 2 new tabs, both of which will be populated by an ajax call which is dependent on the value of the link clicked. I have the following HTML:

好的，所以基本上我正在使用ui.tabs并且我希望在第一个选项卡中有一个链接触发添加2个新选项卡，这两个选项卡都将由ajax调用填充，这取决于单击链接的值。我有以下HTML：

<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>

And then the jQuery so far looks like this:

然后到目前为止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() {

        });
    });
});

Now the jQuery works so far, it's picking up the value of the hidden input field properly and returning the correct response from ajax.php (visible in Firebug's console), but what I have no idea how to achieve is how to have the tabs added with the correct information. Basically, ajax.php queries a database and pulls out the content of 2 fields (obviously the record varies depending on the value sent). The content of the first field would then be displayed in the new 'Summary' tab, and the content of the second field would be placed in the second new tab, 'Read Topic'. However, I have no idea how to structure the jQuery to achieve this (I'm fairly new to the subject).

现在jQuery工作到目前为止，它正确地获取隐藏输入字段的值并从ajax.php返回正确的响应（在Firebug的控制台中可见），但我不知道如何实现如何添加选项卡有正确的信息。基本上，ajax.php查询数据库并提取2个字段的内容（显然记录会根据发送的值而变化）。然后，第一个字段的内容将显示在新的“摘要”选项卡中，第二个字段的内容将放置在第二个新选项卡“读取主题”中。但是，我不知道如何构造jQuery来实现这一点（我对这个主题相当新）。

(Obviously I'm aware that lines 3-6 of the jQuery won't be needed once this is coded correctly).

（显然我知道一旦正确编码，就不需要jQuery的第3-6行）。

3 个解决方案

#1

So from what I can see this is your problem: "what I have no idea how to achieve is how to have the tabs added with the correct information."

所以从我可以看到这是你的问题：“我不知道如何实现如何使用正确的信息添加选项卡。”

$.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

});

Firstly your ajax.php page needs to be returning a simple JSON_encode'ed array: http://php.net/manual/en/function.json-encode.php, see this for more details.

首先，你的ajax.php页面需要返回一个简单的JSON_encode数组：http：//php.net/manual/en/function.json-encode.php，有关详细信息，请参阅此内容。

The next step is when you are appending the new content AFTER the button you pressed, use .after to the documet view: http://api.jquery.com/after/

下一步是在您按下按钮后附加新内容时，使用.after到文档视图：http：//api.jquery.com/after/

Here is a quick jFiddle that shows what the JSON encoded array is doing: http://jsfiddle.net/DKuK9/1/ it is applying a couple of spans with the arrayed content into the div, not precisly what your script is doing however i do not have a ajax page to call to :)

这是一个快速的jFiddle，它显示了JSON编码数组正在做什么：http：//jsfiddle.net/DKuK9/1/它将几个带有排列内容的跨度应用到div中，但不是说你的脚本正在做什么我没有ajax页面可以打电话给:)

edit your get function usage was wrong-

编辑你的get函数用法是错误的 -

#2

I think you are actually pretty close to what you want. Something like this?

我认为你实际上非常接近你想要的东西。像这样的东西？

<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');
    }
});

Where 'hidSummaryID' and 'hidReadID' store some value you need to get the correct info from the database.

'hidSummaryID'和'hidReadID'存储了一些值，您需要从数据库中获取正确的信息。

#3

Ok, so I've used elements of the other answers, and ended up with this working code:

好的，所以我使用了其他答案的元素，最后得到了这个有效的代码：

$(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');
    });
});

with the link that causes it to fire being the same as in my original question. I think the reason I've done it differently is because I've fired it off a button click. Does this seem a correct and reasonable use of jquery?

导致它触发的链接与我原来的问题相同。我认为我之所以这样做的原因是因为我点击了按钮就把它解雇了。这看起来是正确合理地使用jquery吗？

#1