Question

好的，基本上我正在使用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>

然后到目前为止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行。）

Answer 1

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

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

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

$.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数组：http://php.net/manual/en/function.json-encode.php，有关详细信息，请参阅此内容。

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

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

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

Answer 3

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

$(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吗？

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

3 个答案: