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

如何解决用jQuery UI添加选项卡，然后通过ajax将其填充内容

|| 好的，所以基本上我正在使用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\',\'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行了）。

解决方法

因此，从我可以看到的是您的问题：“我不知道如何实现的是如何为选项卡添加正确的信息。”

$.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/ 这是一个快速的jFiddle，它显示JSON编码的数组在做什么：http://jsfiddle.net/DKuK9/1/ 它正在将多个带有数组内容的跨度应用到div中，不是精确地您的脚本在做什么，但是我没有要调用的ajax页面：）编辑您的get函数用法是错误的- , 我认为您实际上非常接近您想要的。像这样吗

<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 \'存储一些值的位置，您需要从数据库中获取正确的信息。 , 好的，所以我使用了其他答案的元素，并得到了下面的工作代码：

$(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的正确合理使用吗？