用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\',\'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行了）。     
2020-02-23 4 条评论
分享

没有找到相关结果

    已邀请:

    咖哀烈

            因此，从我可以看到的是您的问题：“我不知道如何实现的是如何为选项卡添加正确的信息。” 
    $.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函数用法是错误的-     
    2020-02-23 0 0
    分享

    糕泰灌

            我认为您实际上非常接近您想要的。像这样吗 
    <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 \'存储一些值的位置，您需要从数据库中获取正确的信息。     
    2020-02-23 0 0
    分享

    混侩闯空坷

            好的，所以我使用了其他答案的元素，并得到了下面的工作代码： 
    $(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的正确合理使用吗？     
    2020-02-23 0 0
    分享
    为什么被折叠? 0 个回复被折叠

    要回复问题请先登录或注册

    或代码 OrCode.com 备案号：粤ICP备15020848号-1
    Escape time: 0.038886070251465