how to make a dynamic sidebar active on a clicking - javascript

I'm creating dynamic menu. I wanted to highlight the menu once it is selected.
We use php. just need to figure out how to append the class active to the current page. Can anyone help me with this?
<div id="sidebar-wrapper" class="sidebar-toggle">
<ul class="sidebar-nav">
<?php
$i=1;
if(count($shipments) > 0)
{
foreach($shipments as $row)
{
$shipment_id = $row['id'];
$containerdest = $row['no']."-".$row['destination'];
?>
<li id="shipment<?php echo $shipment_id; ?>"><?php echo $containerdest; ?>
</li>
<?php $i++;
}
} ?>
<li>
Logout
</li>
</ul>
</div>
</div>

Change your html line with below line
<li id="shipment<?php echo $shipment_id; ?>" class="menu"><a href="<?php echo ite_url("users/get_details/$shipment_id");?>" shipmentid="<?php echo $shipment_id; ?>" ><?php echo $containerdest; ?></a>
And write javascript code as below (assuming you have included jquery library file)
<script>
$(document).ready(function(){
var url = location.pathname;
var arr = mystr.split("/");
var id = arr[2];
$(#shipment'+id).attr('shipmentid');
$('.menu').removeClass('active'); //this will remove all active class after page loading
$('#shipment'+id).addClass('active'); // this will append active class to the current clicked menu
});
</script>

Related

Unable to change the active pagination button as it refreshes using php

I am trying to change the active pagination button when I click on it but it refreshes and remains the same as I get data after refresh. Here is the code:
<?php
for ($page=1;$page<=$number_of_pages;$page++) {
?>
<li class="page-item"><a class="page-link" href="view_videos.php?page=<?php echo $page;?>"><?php echo $page; ?></a></li>
<?php
}
?>
I will be getting urls as:
domain.com/hello.php?page=1
domain.com/hello.php?page=2
When I click on the second button the url changes to domain.com/hello.php?page=2 then I want change the background of second button color as active but due to page refresh its not becoming active.
Here is a screenshot of my navigation bar
Very simple:
Get the page_id like this:
$page_id = isset($_GET['page']) ? $_GET['page'] : false;
Now you have the number of the current page you are on
Then inside the loop, you could do another check like this:
<li class="page-item<?php echo ($page_id == $page) ? ' my-background' : '' ?>"><a class="page-link" href="view_videos.php?page=<?php echo $page;?>"><?php echo $page; ?></a></li>
Then you could do this in your .css-file:
.my-background {
background-color: #FF0000; /* Maybe add "!important" if necessary */
}
You have to get the page number from the URL after the page loads, and check it against each page indicator to see if it is the active one. Then you can add a class active, and style that in your CSS.
So you can try this:
<?php
for ($page = 1; $page <= $number_of_pages; $page++) {
if ($page === $_GET["page"]) {
$active = " active";
} else {
$active = "";
}
?>
<li class="page-item">
<a class="page-link <?= $active ?>" href="view_videos.php?page=<?= $page ?>"><?= $page ?></a>
</li>
<?php
}
?>
Note: <?= $foo ?> is the same as <?php echo $foo ?> manual

Hide menu item according to user account

On my login mysql table, i have an account type column. If the user has a Manager account type, i want to show a management menu item and if not hide it.
This is pretty simple but its not working:
In my header, i have the following:
<script>
var logged_in_account_type = "<?php echo $_SESSION['account_type'] ; ?>";
if(logged_in_account_type === "Manager") {
document.getElementById('management_menu').style.display = 'block';
} else {
document.getElementById('management_menu').style.display = 'none';
}
</script>
I tried without the echo has well.
<div id="management_menu" style="display:none">
<li>
<i class="menu-icon fa fa-dashboard"></i><span class="mm-text">Dashboard</span>
</li>
</div>
<div class="text-bg"><span class="text-slim">Welcome,</span> <span class="text-semibold"><?php echo $_SESSION['account_type'] ?></span></div>
Have you tried using php if while rendering your menu? Something like this:
<?php if($_SESSION['account_type'] == 'Manager'): ?>
<div id="management_menu">
<ul>
<li>
Dashboard
</li>
<li>
Users
</li>
</ul>
</div>
<?php endif; ?>
Where is your javascript code in the document? If your javascript code is on the top of the document, it possibly shows or hides the <div> element properly, but, because the <div> element is at the bottom of the document, it is hidden because its "style" says so.
The solution is to move the javascript code below the <div> element, this will solve the "execution order" problem you have. Example :
<div id="management_menu" style="display:none">
<li>
<i class="menu-icon fa fa-dashboard"></i><span class="mm-text">Dashboard</span>
</li>
</div>
<?php
session_start();
$_SESSION['account_type'] = "Manager";
?>
<script>
var logged_in_account_type = "<?php echo $_SESSION['account_type'] ; ?>";
if(logged_in_account_type === "Manager") {
document.getElementById('management_menu').style.display = 'block';
} else {
document.getElementById('management_menu').style.display = 'none';
}
</script>

opencart div tab content doesn't show on page load

I am using opencart template. Here I'm trying to show some mysql table datas in div tab. it works fine. But, when I reload the browser it doesn't show the default current div mysql datas. If I click another tab it shows all datas properly
When I reload the browser it shows like this
Then I click Notes tab and again I click Reviews tab. I got this.
Why Reviews tab content doesn't show on page load?
<ul id="dashboard_tabs">
<?php if($description) { ?>
<li><?php echo $tab_description; ?></li>
<?php } ?>
<?php if ($review_status) { ?>
<li><a href="#two" ><?php echo $tab_review; ?></a></li>
<?php } ?>
<?php if ($attribute_groups) { ?>
<li>Notes</li>
<?php } ?>
<?php if ($products) { ?>
<li><a href="#four" ><?php echo $tab_related; ?> <?php /*echo count($products);*/ ?></a></li>
<?php } ?>
</ul>
<div id="dashboard_content_details">
<div id="one">
<?php echo $description; ?>
</div>
<div id="two">
some contents
</div>
<div id="three">
some contents
</div>
<div id="four">
some contents
</div>
</div>
Jquery
$(function(){
function resetTabs(){
$("#dashboard_content_details > div").hide(); //Hide all content
$("#dashboard_tabs a").attr("id",""); //Reset id's
}
var myUrl = window.location.href; //get URL
var myUrlTab = myUrl.substring(myUrl.indexOf("#")); // For localhost/tabs.html#tab2, myUrlTab = #tab2
var myUrlTabName = myUrlTab.substring(0,4); // For the above example, myUrlTabName = #tab
(function(){
$("#dashboard_content_details > div").hide(); // Initially hide all content
$("#dashboard_tabs li:first a").attr("id","current"); // Activate first tab
$("#dashboard_content_details > div:first").fadeIn(); // Show first tab content
$("#dashboard_tabs a").on("click",function(e) {
e.preventDefault();
if ($(this).attr("id") == "current"){ //detection for current tab
return
}
else{
resetTabs();
$(this).attr("id","current"); // Activate this
$($(this).attr('href')).fadeIn(); // Show content for current tab
}
});
})()
});
I think so you need to put these function in
$(document).ready(function(){
// do the above task
})

Bring a WordPress post dynamically

I've been trying to make this feature work for many days now and it's driving me nuts!
I have a single page theme in WP and in one of them there is a div on the left with a list of the posts in the site and on the right, a div that should display the content of the clicked post.
I found this question and followed up the linked tutorial and was partially successful.
I managed to bring the content dinamically, and all I want is being displayed but it seems the order of the tasks are wrong. Heres how it's acting:
I click on the link.
the current content goes away.
the loading span appears correctely.
the SAME content fades in.
after 1 second or so the current content is replaced with the new content and the address bar does not change at all.
Here's the code I have:
atracoes.js
$(document).ready(function() {
var hash = window.location.hash.substr(1);
var href = $('.controle nav li a').each(function(){
var href = $(this).attr('href');
if(hash==href.substr(0,href)){
var aCarregar = hash+'.html #atr-conteudo';
$('#atr-conteudo').load(aCarregar)
}
});
$('.controle nav li a').click(function() {
var aCarregar = $(this).attr('href')+' #atr-conteudo';
$('#atr-conteudo').hide('fast',carregarConteudo);
$('#carregando').remove();
$('#atracoes').append('<span id="carregando">Carregando...</span>');
$('#carregando').fadeIn('normal');
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href'));
function carregarConteudo () {
$('#atr-conteudo').load(aCarregar,'',mostrarNovoConteudo());
}
function mostrarNovoConteudo () {
$('#atr-conteudo').show('normal',esconderCarregando());
}
function esconderCarregando () {
$('#carregando').fadeOut('normal');
}
return false;
});
});
index.php (the dynamic content part)
<div class="main" id="atracoes">
<div class="controle">
<nav>
<?php
$args = array( 'posts_per_page' => 20);
$myposts = get_posts( $args );
foreach ( $myposts as $post ) : setup_postdata( $post ); ?>
<li>
<?php the_title(); ?>
</li>
<?php endforeach;
wp_reset_postdata();?>
</nav>
</div>
<div id="atr-conteudo">
<?php the_post_thumbnail(); ?>
<div id="atr-texto">
<h2><?php the_title(); ?></h2>
<?php the_content(); ?>
</div>
</div>
</div>
single.php (the part I'm plucking with ajax)
<!-- article -->
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<!-- post thumbnail -->
<?php if ( has_post_thumbnail()) : // Check if Thumbnail exists ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<?php the_post_thumbnail(); // Fullsize image for the single post ?>
</a>
<?php endif; ?>
<!-- /post thumbnail -->
<div id="atr-texto">
<!-- post title -->
<h1>
<?php the_title(); ?>
</h1>
<!-- /post title -->
<?php the_content(); // Dynamic Content ?>
<?php edit_post_link(); // Always handy to have Edit Post Links available ?>
</div>
</article>
You're calling the functions before you pass them to jQuery to execute, instead of allowing jQuery to execute them:
function carregarConteudo () {
$('#atr-conteudo').load(aCarregar,'',mostrarNovoConteudo);
}
function mostrarNovoConteudo () {
$('#atr-conteudo').show('normal',esconderCarregando);
}
(Notice they no longer have () after the function names)

How to update the data in one region through ajax?

i want to upload the data in one region of four links, when I clicked the link1 it will load the data in specific region, and when I clicked the link 2 it will load the page on the same region where first link open, how can I do that?
<div class="container">
<div class="span-5">
<ul>
<li><?php echo $this->Manager->link('Ecommerce',array('controller'=>'associations','action'=>"view_report"),array('id'=> 'home','class'=>'nav'));?></li>
<li>Home</li>
<li>About</li>
<li>Contact Us</li>
</ul>
</div>
</div>
the data which I want to open from ecommerce link is int the newfile.ctp like that
<?php v_start($this);?>
<h1><?php echo __l('View Report');?></h1>
<div class="firsttable">
<table width="100%" border="0" cellspacing="0" cellpadding="2">
<thead>
<tr class="heading">
<td><?php echo __l('Financials');?></td>
<td><?php echo __l('Payment Methods');?></td>
<td><?php echo __l('By Credit Card');?></td>
</tr>
</thead>
<tbody>
<tr>
<td>
<?php
echo __l("YTD \t ");
$ytd_total=0;
foreach ($YTD as $yearData)
{
$ytd_total +=$yearData['AssocPaymentDetail']['membership_fee'] - $yearData['AssociationDiscount']['amount'];
}
echo $ytd_total."<br />";
?>
<?php
echo __l("Last 5days ");
$fda_total= 0;
foreach ($fiveDays as $fiveDaysData)
{
$fda_total += $fiveDaysData['AssocPaymentDetail']['membership_fee'] - $fiveDaysData['AssociationDiscount']['amount'];
}
echo $fda_total ."<br />";
?>
</td>
<td><?php echo __l('creditcard');?> <?php echo __l($ccSum) ?> </td>
<td>
<?php
// debug($paymentRecord);
// debug($ccIndex);
foreach($paymentRecord as $data =>$key){
foreach($ccIndex as $index){
if($data== $index)
{
echo "$data \t\t\t";
if(is_array($key))
echo array_sum($key);
else
echo "\t\t $key";
}
echo "<br/>";
}
}
?>
</td>
</tr>
</tbody>
</table>
</div>
Please help me to do this, thanks in advance
Well I have done this without using any additional jquery
<div class="container">
<div class="span-5">
<ul>
<li><?php echo $this->Manager->link('Ecommerce',array('controller'=>'associations','action'=>"view_report"),array('update'=> '#testDiv'));?>li>
<li>Home</li>
<li>About</li>
<li>Contact Us</li>
</ul>
</div>
</div>
<div id = 'testdiv'></div>
The cake will update the region by itselp using the property update of cake. thanks a lot who answer that question, not matter answer is right or wrong. thanks all
you not specifie region in your html, here i'll assume it will be just after your ul node
$uls = $("ul.span5"); // select all page ul.span5
$uls.each(function(){ // for all ul.span5 node
$ul = $(this); // current ul to work
$region = $("<div/>").insertAfter($ul); // dynamic create and insert the region, as a div
$links = $ul.find("a.nav"); // select all sub links
$links.click(function(e){ // click on links
$a = $(this); // current link
var href = $a.attr("href"); // i assume you work on the href
$region.load("myajax.php",{href:href},function(data){ // do ajax and load it in the common region
// here load is done, do next step here
});
e.preventDefault(); // no real click please
});
});
put in the links in href attribute and then handle them thru jquery something like this
$('a.nav').click(function(e){
e.preventDefault();
$.get($(this).attr('href'), function(data){
$cont = $('[CONTAINERS SELECTOR]');
$cont.html(data);
})
})
EDIT-AFTER COMMENT
change your html to something like this
<div class="container">
<div class="innerCont"></div>
<div class="span-5">
<ul>
<li><?php echo $this->Manager->link('Ecommerce',array('controller'=>'associations','action'=>"view_report"),array('id'=> 'home','class'=>'nav'));?></li>
<li>Home</li>
<li>About</li>
<li>Contact Us</li>
</ul>
</div>
and put the content selector to div.innerCont
$cont = $('div.innerCont');
You can attach a single request handler to all links with nav as class name and then load the output to a container
$(".nav").on('click', function() {
$("#loadingdiv").load("linktoload.php"); // or other
});

Categories

Resources