JQuery UI 对话框中的选项卡 - 根据对话框标题加载选项卡内容？

Question

我正在克隆带有嵌套选项卡的 JQuery UI 对话框。

<div class="dialog">
            <div id='tabs'>
                <ul>
                    <li><a href="#presentations">Presentations</a>
                    </li>
                    <li><a href="#outcomes">Learning Outcomes</a>
                    </li>
                    <li><a href="#conditions">Core Conditions</a>
                    </li>
                </ul>
                <div data-type="presentations" id="presentations"></div>
                <div data-type="outcomes" id="outcomes"></div>
                <div data-type="conditions" id="conditions"></div>
            </div>
        </div>

和

var dialogs = $( ".dialog" ).clone().appendTo('body').removeClass( 'dialog' ).dialog( {
                                title: dialogName,
                                width: '383'
                            } ).tabs();

单击克隆对话框中的选项卡时，我想根据 parent 对话框的标题使用 Ajax 将内容加载到该特定选项卡。例如。类似下面的内容（不起作用...）：

    $( '.ui-tabs-tab' ).click( function () {
                if ( $( this ).data( 'type' == 'outcomes' ) ) {
                    $.ajax( {
                        type: "POST",
                        url: "scripts/get_learning_event_outcomes.php",
                        data: {
                            learning_event: $(this).parent().dialog( "option", "title" ),
                        },
                        success: function (data) {
                            $( this ).html(data);
                        }
                    } );
                }
            } )

我该怎么做？我在选项卡上的点击有误吗？？

更新

好的，除了将内容加载到特定选项卡外，我的克隆对话框和嵌套选项卡工作正常。我不想为选项卡 div 分配唯一 ID，而是想通过 DOM 访问相关的 div，即与点击的 li 相关。ui-tabs-tab:

<div class="dialog">
            <div class='tabs'>
                <ul>
                    <li data-type="presentations"><a href="#presentations">Presentations</a>
                    </li>
                    <li data-type="outcomes"><a href="#outcomes">Learning Outcomes</a>
                    </li>
                    <li data-type="conditions"><a href="#conditions">Core Conditions</a>
                    </li>
                </ul>
                <div id="presentations" class='presentations'></div>
                <div id="outcomes" class='outcomes'></div>
                <div id="conditions" class='conditions'></div>
            </div>
        </div>

和

$(document).off("click").on('click','li.ui-tabs-tab',function () {  
        if ( $( this ).data( 'type' === 'outcomes' ) ) {
     $.ajax( {
                        type: "POST",
                        url: "scripts/get_learning_event_outcomes.php",
                        data: {
                            learning_event: $(this).parent().dialog( "option", "title" ),
                        },
                        success: function (data) {
                            $( '#outcomes').html(data);
                        }
                    } );
        }
    });

将 $( '#outcomes').html(data); 替换为选项卡中的关联 div。有任何想法吗？请注意，可能会同时打开多个对话框和嵌套的选项卡小部件，因此 Ajax 内容的目标需要特定于单击的选项卡...

更新 2 我现在有下面的代码，只需要在克隆的 Dialog/Tabs.

中识别 Ajax 加载数据的选项卡

var dialogs = $( ".dialog" ).clone().appendTo( 'body' ).removeClass( 'dialog' ).dialog( {
                                title: dialogName,
                                width: '383',
                                open: function ( event, ui ) {
                                    $.ajax( {
                                        type: "POST",
                                        url: "scripts/get_learning_event_outcomes.php",
                                        data: {
                                            learning_event: $( this ).dialog( "option", "title" ),
                                        },
                                        success: function ( data ) {
                                            $(this).find('.outcomes').html(data);
                                        }
                                    } );
                                }
                            } ).tabs();

即 $(this).find('.outcomes').html(data); 注意 $('.outcomes').html(data); 有效，但不是特定于克隆的对话框...

Answer 1

（修改后的答案）

简单的方法...就像 this:

Fetch external content via Ajax for the tabs by setting an href value in the tab links.

或者如果您不想那样做，那么您可以将 beforeActivate and create 事件用于 jQuery UI 选项卡，如下所示：

Demo on CodePen

function loadPanelContent( panel, tab ) {
  // Run your AJAX here. See the demo for an example.
}

// Clone the dialog.
$( '.dialog' ).clone()
  .dialog({
    title: dialogName, // I assumed `dialogName` is defined somewhere.
    width: 383
  }).tabs({
    // Fired before a panel is opened.
    beforeActivate: ( event, ui ) => loadPanelContent( ui.newPanel, ui.newTab ),

    // This is for the first/default active tab/panel.
    create: ( event, ui ) => loadPanelContent( ui.panel, ui.tab )
  });

更新

更新了演示和上面的代码。还有...

I can't use the first option for cloned tabs

为什么不呢？

您可以动态更改 href 值：

$( '.dialog' ).clone()
  .find( 'a[href="#outcomes"]' )
    .attr( 'href', 'scripts/get_learning_event_outcomes.php' ) // change the href
  .end()
  .dialog({
    title: dialogName,
    width: 383
  }).tabs();

Answer 2

这对我有用：

var dialogs = $( ".dialog" ).clone().appendTo( 'body' ).removeClass( 'dialog' ).dialog( {
                                title: dialogName,
                                width: '383',
                                open: function ( event, ui ) {
                                    var el = $(this).find('.outcomes');
                                    $.ajax( {
                                        type: "POST",
                                        url: "scripts/get_learning_event_outcomes.php",
                                        data: {
                                            learning_event: $( this ).dialog( "option", "title" ),
                                        },
                                        success: function ( data ) {
                                            el.html(data);
                                        }
                                    } );
                                }
                            } ).tabs();

JQuery UI 对话框中的选项卡 - 根据对话框标题加载选项卡内容？

JQuery UI Tabs inside Dialog - Load Tab content based on Dialog title?

jquery

jquery-ui

更新