对于jQuery 1.11

Question

我从数据库获取数据并使用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>

在每个标签内，我得到一个名字树：

然后点击图标，会出现一个包含用户列表的弹出窗口：

以下是对话框窗口的代码：

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

功能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");
            }
        });
    }
}

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

修改

好的，我试图获取标签的索引并刷新它。我添加了测试按钮：

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

和jquery：

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

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

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

Answer 1

您有两个选择

使用ajax＆amp; javascript在客户端创建标签的html内容。
将当前标签的锚点放入网址，以便在刷新网页时显示当前标签。

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

用以下内容替换当前标签初始化代码：

对于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>

对于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>

Answer 2

我试图通过使用window.location.hash属性大大简化逻辑来构建问题Manuel Otto Answer。

<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>

如果您决定将HASH用于选项卡的索引以外的任何内容，那么此逻辑将失败，但应该让您开始使用解决方案。如果您需要更全面地使用URL HASH，请在下面留下评论，我很乐意扩大答案。

Answer 3

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

Answer 4

它目前没有ajax标签（还）。令人难以置信的是，还没有人要求它，所以我从来没有开始构建它。我可能会在下一个版本中有这个。

与此同时，你可以这样做：

 <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>

然后在你的javascript中，有类似的东西：

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

我认为这个讨论非常有用

Loading tab content via Ajax

在选项卡中调用ajax后加载数据

修改

4 个答案:

对于jQuery 1.11

对于jQuery 1.9 +