javascript - 将 HTML/PHP 加载到 JQuery 选项卡中

Question

我将以下 JQuery 选项卡附加到 JQuery 对话框，并希望将 HTML 或 PHP 页面加载到每个选项卡中：

<div id='analytics_modal'>
   <div class='tabs'>
    <ul>
        <li data-type='discipline_categories'><a href='#discipline_categories'>Discipine Categories</a></li>
        <li data-type='learning_event_time'><a href='#learning_event_time'>Learning Event Time</a></li>
        </ul>
    <div id='discipline_categories' class='discipline_categories'></div>
    <div id='learning_event_time' class='learning_event_time'></div>
  </div>
</div>

我尝试了以下操作，但两个加载都发生在第一个选项卡上，而不是指定的选项卡上：

$('#analytics_btn').click(function() {  

            $.ajax({
                type: "POST",
                url: "json/generate_json_discipline_categories.php",
                success: function(data) {
                        }
                    });
                  
                $.ajax({
                type: "POST",
                url: "json/generate_json_learning_event_time.php",
                success: function(data) {
                        }
                    });

        $('#analytics_modal').dialog({
              title: 'Analytics',
              width: '800',
              height: '650',
               position: {
                        my: "left top",
                        at: "left+354 top+129",
                        of: "body"
                    },
              dialogClass: 'dialogClass',
              open: function(event, ui) {
                                  
                  var discipline_categories_tab = $(this).find('.discipline_categories');                                                       
                  discipline_categories_tab.load("charts/discipline_categories_chart.php");
                  
                 var learning_event_time_tab = $(this).find('.learning_event_time');                                                        
                 learning_event_time_tab.load("charts/learning_event_time_chart.php");
                        }
                            }).tabs().css({
                    'max-height': '650px'
                        });
});

这也被忽略了覆盖在一个选项卡中的两个页面：

    $('#discipline_categories').load("charts/discipline_categories_chart.php"); 
$('#learning_event_time').load("charts/learning_event_time_chart.php");

标签： javascriptjquery

Answer 1

这可行，并且 PHP 图表可以加载到相应的选项卡中。但是代码并不完全漂亮：

$('#analytics_btn').click(function() {      
        
        $('#analytics_modal').dialog({
              title: 'Analytics',
              width: '800',
              height: '650',
               position: {
                        my: "left top",
                        at: "left+354 top+129",
                        of: "body"
                    },
              dialogClass: 'dialogClass',
              open: function(event, ui) {
                  
                 discipline_categories_tab = $(this).find('.discipline_categories'); 
                 learning_event_time_tab = $(this).find('.learning_event_time');    
                  
                        $.ajax({
                type: "POST",
                url: "json/generate_json_discipline_categories.php",
                success: function(data) {
                    discipline_categories_tab.load("charts/discipline_categories_chart.php");
                        }
                    });
                  
                $.ajax({
                type: "POST",
                url: "json/generate_json_learning_event_time.php",
                success: function(data) {
                    //learning_event_time_tab.load("charts/learning_event_time_chart.php");
                        }
                    });
                        }
                            }).tabs({
    activate: function(event, ui) {
        var active = $(this).tabs('option', 'active');
        if(active == 0){
            //discipline_categories_tab.load("charts/discipline_categories_chart.php");
        } else if(active == 1){
            learning_event_time_tab.load("charts/learning_event_time_chart.php");
        }
        
    },
        }).css({
                    'max-height': '650px'
                        });
});