Menu
I get data from database and use jquery tabs to display it:
<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:
/*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?
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:
$("#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.
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");
}
});
}
}
899
You have two options
Option 1 is alot of work, so I'm gonna elaborate option 2 now.
Replace your current tabs initializing code with this:
<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>
<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>
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.
<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.
34
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.
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
