对话框内的 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。有任何想法吗？请注意，可能会同时打开多个对话框和嵌套选项卡小部件，因此 Ajax 内容的目标需要特定于单击的选项卡...

更新2我现在有了下面的代码，只需要在克隆的对话框/选项卡中识别 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和 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();