我从数据库中获取数据并使用 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 success 函数中删除了 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");
}
});
}
}
最佳答案
你有两个选择
- 使用 ajax 和 javascript 在客户端创建标签的 html 内容。
- 将当前选项卡的 anchor 放入 url 中,以便在页面刷新时显示当前选项卡。
选项 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>
关于javascript - 在选项卡中调用 ajax 后加载数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45911786/