在tab中加载ajax调用后的数据

I get data from database and use jquery tabs to display it:

我从数据库中获取数据并使用jquery选项卡显示:

<script>
$(function () {
   $( "#treeTabs" ).tabs();
});
</script>

<div id="treeTabs">
    <ul>
<?php
$hod_result = getFamilyTree();
$i = 0;
while($hod_row = mysqli_fetch_array($hod_result))
{
?>
    <li>
        <a href="#<?php echo $hod_row["staff_id"]?>" class="tab_header"><span class="closer" data-id3="<?php echo $hod_row["staff_id"] ?>"><i class="fa fa-times" aria-hidden="true"></i></span><?php echo $hod_row["longname"].' ('.$hod_row["team_role"].')' ?></a>              
    </li>
<?php $i++;} ?>
    </ul>
<?php
$hod_result_tabs = getFamilyTree();
$i_tabs = 0;
while($hod_row_tabs = mysqli_fetch_array($hod_result_tabs))
{
?>    
  <div id="<?php echo $hod_row_tabs["staff_id"]?>">
    <div class="tree" id="<?php echo $hod_row_tabs["staff_id"]?>"> 
    <ul>
    <li>
    <?php
    $hod_id_list = $hod_row_tabs["staff_id"];
    $sv_result_list= getSupervisorRole($hod_id_list);
    ?>
    <a href="#">
        <table>
        <tr>
            <th colspan="3">Head Of The Department:</th>    
        </tr>
        <tr>
            <td>
                <?php echo $hod_row_tabs["username"].' '.$hod_row_tabs["staff_id"]; ?>
                <span class="closer" data-id3="<?php echo $hod_row_tabs["staff_id"]; ?>"><i class="fa fa-times" aria-hidden="true"></i></span>
                <a href="#" style="background-color:#808080; color:white; font-size: 8px; padding: 3px 3px 3px 3px;"><?php echo substr($hod_row_tabs["team_role"], 0, 3); ?></a>
                <span class="createTree" data-id3="<?php echo $hod_row_tabs["staff_id"].'|Supervisor';?>"><!--<img alt="" src="imagesAssessment/add.png">--><i class="fa fa-user-plus fa-lg" aria-hidden="true"></i></span>
                <span class="btn_details" data-id3="<?php echo $hod_row_tabs["staff_id"]; ?>"><!--<img title="View Evaluation Details" src="imagesAssessment/details.png">--><i class="fa fa-search fa-lg" aria-hidden="true"></i></span>
            </td>            
        </tr>
        </table>
    </a>
        <?php
        $sv_result= getSupervisorRole($hod_id_list);
        if(mysqli_num_rows($sv_result) > 0){
        ?>        
        <ul>
        <?php
            while($sv_row = mysqli_fetch_array($sv_result))
            {
        ?>
        <!--<ul>-->
            <li>
                <a href="#" >
                    <table style='all:unset;'>
                    <tr>
                        <td>
                            <a href="#" style='all:unset;' class="expand" data-id3="<?php echo $sv_row["staff_id"].'|'.$sv_row["username"].'|'.$sv_row["importance"]; ?>">
                            <?php echo $sv_row["username"]; ?> 
                            </a>
                            <span class="closer" data-id3="<?php echo $sv_row["staff_id"]; ?>"><i class="fa fa-times" aria-hidden="true"></i></span>  
                            <a href="#" style="background-color:#808080; color:white; font-size: 8px; padding: 3px 3px 3px 3px;"><?php echo strtoupper(substr($sv_row["team_role"], 0, 3)); ?></a>              
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <?php echo $sv_row["staff_id"]; ?> 
                            <span class="createTree" data-id3="<?php echo $sv_row["staff_id"].'|Checker'; ?>"><!--<img alt="" src="imagesAssessment/add.png">--><i class="fa fa-user-plus fa-lg" aria-hidden="true"></i></span>
                            <span class="btn_details" data-id3="<?php echo $sv_row["staff_id"]; ?>"><!--<img title="View Evaluation Details" src="imagesAssessment/details.png">--><i class="fa fa-search fa-lg" aria-hidden="true"></i></span>
                        </td>
                    </tr>
                    </table>
                </a>
                <?php                     
                $sv_id=$sv_row["staff_id"];
                $ch_result= getCheckerRole($sv_id); 
                if (mysqli_num_rows($ch_result) > 0){?>
                <ul style='' >
                    <li >
                    <?php
                    while($ch_row = mysqli_fetch_array($ch_result)){ ?>
                <a href="#" style='display: block;'>
                    <table style='all:unset;'>
                    <tr>
                        <td>
                            <a href="#" style='all:unset;' class="expand" data-id3="<?php echo $ch_row["staff_id"].'|'.$ch_row["username"].'|'.$ch_row["importance"]; ?>">
                            <?php echo $ch_row["username"]; ?>                             
                            </a>
                            <span class="closer" data-id3="<?php echo $ch_row["staff_id"]; ?>"><i class="fa fa-times" aria-hidden="true"></i></span>    
                            <a href="#" style="background-color:#808080; color:white; font-size: 8px; padding: 3px 3px 3px 3px;"><?php echo strtoupper(substr($ch_row["team_role"], 0, 3)); ?></a>    
                        </td>
                    </tr>                        
                    <tr>
                        <td>
                            <?php echo $ch_row["staff_id"]; ?>  
                            <span class="createTree" data-id3="<?php echo $ch_row["staff_id"].'|Squad Leader'; ?>"><!--<img alt="" src="imagesAssessment/add.png">--><i class="fa fa-user-plus fa-lg" aria-hidden="true"></i></span>                            
                            <span class="btn_details" data-id3="<?php echo $ch_row["staff_id"]; ?>"><!--<img title="View Evaluation Details" src="imagesAssessment/details.png">--><i class="fa fa-search fa-lg" aria-hidden="true"></i></span>
                        </td>
                    </tr>
                    </table>
                </a>
                    <?php } ?>
                    </li>
                </ul>
                <?php } ?>
            </li>

        <!--</ul>-->
        <?php }} ?>
        </ul>
    </li>
    </ul>
    </div>
    <div class="input"></div>
  </div>
<?php $i_tabs++;} ?>
</div>

Inside each tab i get a tree of names:

在每个选项卡中，我都有一个名字树:

Then by clicking on icon there is popup window with list of users:

然后点击图标，弹出用户列表窗口:

Here is code for dialog window:

下面是对话框窗口的代码:

var addUserDlg, form;

/*create and open pop up window to create a team*/
addUserDlg = $("#addUserDialog").dialog({
    autoOpen: false,
    height: 650,
    width: 570,
    modal: true,
    position: { my: "center", at: "top" },
    buttons: {
        "Create a tree": addUser,
        Cancel: function () {
            addUserDlg.dialog("close");
        }
    },
    close: function () {
        form[ 0 ].reset();
    }
});
$(document).on('click', '.createTree', function(){
    addUserDlg.dialog("open");
    var leader_role = $(this).data("id3");              
    $.ajax({
        url: "comAssessment/hr_tree_list.php",
        method: "POST",
        data: {leader_role: leader_role},
        success: function (data) {
            $('#users').html(data);

        }
    });
});
 form = addUserDlg.find("form").on("submit", function (event) {
    event.preventDefault();
    addUser();
});

And function addUser:

和功能addUser:

/*function to add new user to team*/
function addUser() {
    var insert = [];
    if ($('input[name="chk"]:checked').length > 0)
    {
        $('.get_value').each(function () {
            if ($(this).is(":checked"))
            {
                insert.push($(this).val());
            }
        });
        var user_to_leader = $('#user_to_leader').val();
        var team_role = $('#team_role').val();
        insert = insert.toString();
        $.ajax({
            url: "comAssessment/hr_tree_insert.php",
            method: "POST",
            data: {insert: insert, user_to_leader:user_to_leader, team_role:team_role},
            success: function (data) {
                location.reload();
                addUserDlg.dialog("close");
            }
        });
    }
}

Right now I update whole page location.reload(); but it doesnt look nice because it opens first tab every time. How can I update only current tab after adding new users?

现在我更新整个页面location.reload();但是它看起来不太好，因为它每次都打开第一个标签。如何只在添加新用户后更新当前选项卡?

EDIT

Ok, I tried to get index of the tab and refresh it. I added button for testing:

我尝试获取标签的索引并刷新它。我增加了测试按钮:

<button id="button">Click me</button>
<div class="test_bt"></div>

And jquery:

jquery:

$("#button").click(function() {
    var current_index = $("#treeTabs").tabs("option","active");
    $("#treeTabs").tabs('load',current_index);
    $('.test_bt').html(current_index);
});

Then I removed location.reload(); from ajax success function to check if my button will do the work. But it doesnt work. I only get index, no loading happens.

然后我删除location.reload();从ajax成功函数到检查我的按钮是否能完成工作。但它不工作。我只得到索引，没有加载。

function addUser() {
    var insert = [];
    if ($('input[name="chk"]:checked').length > 0)
    {
        $('.get_value').each(function () {
            if ($(this).is(":checked"))
            {
                insert.push($(this).val());
            }
        });
        var user_to_leader = $('#user_to_leader').val();
        var team_role = $('#team_role').val();
        insert = insert.toString();
        $.ajax({
            url: "comAssessment/hr_tree_insert.php",
            method: "POST",
            data: {insert: insert, user_to_leader:user_to_leader, team_role:team_role},
            success: function (data) {

                addUserDlg.dialog("close");
            }
        });
    }
}

4 个解决方案

#1

You have two options

你有两个选择

1. Create the tabs' html content on clientside with ajax&javascript.
2. 使用ajax&javascript在客户端创建标签的html内容。
3. Put an anchor of the current tab into the url, so you can show the current tab when the page is refreshed.
4. 将当前选项卡的锚点放入url中，以便在刷新页面时显示当前选项卡。

Option 1 is alot of work, so I'm gonna elaborate option 2 now.

选项1有很多工作要做，所以我现在要详细说明选项2。

Replace your current tabs initializing code with this:

用以下代码替换当前的选项卡初始化代码:

For jQuery 1.11

<script>
$(function () {

    var url_hashtag_index = location.href.indexOf('#')
    var initial_tab = url_hashtag_index==-1 ? 0 : parseInt(location.href.slice(url_hashtag_index+1))

    $("#treeTabs").tabs({activate: tabSelected, active: initial_tab});

    function tabSelected(event,ui){
        var tab_index = $('#treeTabs').tabs("option", "active")
        var hashtag_index = location.href.indexOf('#')
        var url = hashtag_index==-1 ? location.href : location.href.slice(0,hashtag_index)
        location.replace(url+'#'+tab_index)
    }

});
</script>

For jQuery 1.9+

<script>
$(function () {

    var url_hashtag_index = location.href.indexOf('#') // check if # is un url
    var initial_tab = url_hashtag_index==-1 ? 0 : parseInt(location.href.slice(url_hashtag_index+1)) // if so get tab index

    $("#treeTabs").tabs({select: tabSelected, selected: initial_tab}); // set tab index and add listener for tab selection

    function tabSelected(event,ui){
        var hashtag_index = location.href.indexOf('#')
        var url = hashtag_index==-1 ? location.href : location.href.slice(0,hashtag_index) // remove existing tab from url
        location.replace(url+'#'+ui.index) // replace url with new tab index (replace -> no history in browser)
    }

});
</script>

#2

I am trying to build upon Manuel Otto Answer to the question by simplifying the logic greatly through the usage of the window.location.hash property.

我试图在Manuel Otto的基础上，通过使用windows .location大大简化逻辑来回答这个问题。散列属性。

<script>
    $(function () {
        // Setup event for selecting a tab
        $("#treeTabs").tabs({ activate: tabSelected });

        // Bail if there is no hash as the first tab will load by default
        if (!window.location.hash) { return; }

        // Get the index
        var tabIndex = location.hash.split("#")[1]

        // Set the current index
        $("#treeTabs").tabs({ activate: tabSelected, active: tabIndex });
    });

    function tabSelected(event, ui) {
        window.location.hash = "#" + ui.newTab.index();
        return false; //disables browser anchor jump behavior
    }
</script>

This logic will fail if you decided to use the HASH for anything but the index of your tab but should get you started with a solution. If you need a more comprehensive usage of the URL HASH leave a comment below and I would be happy to expand the answer.

如果您决定将散列用于除选项卡的索引之外的任何东西，那么这个逻辑将失败，但是应该让您开始使用解决方案。如果您需要更全面地使用URL散列，请在下面留下评论，我很乐意扩展答案。

#3

You could extract the code from the loop that populates the content of the tab and create a new file. The new file should use the staffid/hod from a querystring parameter and instead of using the id from the loop. Then on the master page, each tab only gets an empty div with an id of the of the employee. When you first load the page, use ajax to populate the first tab from the new script. When you update any tab, just use ajax to post the change and if successful, reload the contents of the current tab into the div again. Better still, return the updated results from the post and insert that into the div.

您可以从填充选项卡内容的循环中提取代码并创建一个新文件。新的文件应该使用来自querystring参数的staffid/hod，而不是使用来自循环的id。然后在母版页上，每个选项卡只获取一个空div，其中包含雇员的id。第一次加载页面时，使用ajax填充新脚本的第一个选项卡。更新任何选项卡时，只需使用ajax发布更改，如果成功，则再次将当前选项卡的内容加载到div中。更好的是，返回post的更新结果并将其插入到div中。

#4

It doesn't currently do ajax tabs (yet). Unbelievably, no one has requested it yet, so I just never got around to building that in. I could probably have that in the next version.

它目前还没有使用ajax选项卡。令人难以置信的是，还没有人提出这个要求，所以我从来没有考虑过把它建进去。在下一个版本中我可能会有。

In the meantime, you could do something like this:

同时，你可以这样做:

 <div id="container">

   <a href="#panel-1" data-url="/some/url/path" class="tabs">I'm a tab</a>
      ...
      <div id="panel-1"></div>
      ...
 </div>

And then in your javascript, having something like:

然后在javascript中，有如下内容:

  $('#container').easytabs();
    $('.tabs').click(function(){
     var $this = $(this);
     $($this.attr('href')).load($this.data('url'));
   });

I think this discussion is very helpful to

我认为这次讨论对我们很有帮助

Loading tab content via Ajax

通过Ajax加载选项卡内容