对话框内的 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();

单击克隆对话框中的选项卡时，我想根据父对话框的标题使用 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。有任何想法吗？请注意，可能同时打开了多个 Dialog 和嵌套的 Tabs 小部件，因此 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:

通过设置href 为选项卡获取外部内容 选项卡链接中的值。

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

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

更新

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

我不能对克隆标签使用第一个选项

为什么不呢？

您可以动态更改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();