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>
Related
I've been assigned with continuing to work on a WP-theme someone else has set up and I am still running into some problems, being very new to Wordpress.
I believe, one thing the person who worked on this before me did, is set up buttons at the top of the page which allow for sorting or restricting the posts displayed according to their respective categories. This is exactly what the user should be able to do, but it is not working yet and I'm having trouble understanding how to use the code my former colleague did write for this. This is the markup for the display of the site's posts, the script at the bottom is what I think is supposed to enable the filtering of the posts:
<?php get_header(); ?>
</div>
<br>
<div class="wrapper-offset-fix wrapper-projekte">
<div class="projekte">
<div class="button-group filters-button-group">
<button class="active btn" id="all">alle</button>
<button class="projekt-btn" id="category-wise-201516">WiSe15/16</button>
<button class="projekt-btn" id="category-sose-15">SoSe15</button>
<button class="projekt-btn" id="category-wise-201415">WiSe14/15</button>
<button class="projekt-btn" id="category-sose-14">SoSe14</button>
</div>
<?php if (is_home()) {
query_posts("cat=-3");
} ?>
<?php if (have_posts()): ?>
<?php while(have_posts()): the_post(); ?>
<div <?php post_class(); ?>>
<p><?php the_title(); ?></p>
<a href="<?php the_permalink(); ?>">
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail('large');
} ?>
</a>
<!--<div class="meta">Tags: <?php the_tags( '', ', ', '<br />' ); ?> </div>-->
</div>
<?php endwhile; ?>
<?php else : ?>
<h2>Couldn’t find any articles!</h2>
<?php endif; ?>
</div>
<script>
var $btns = $('.btn').click(function() {
if (this.id == 'all') {
$('.projekte > .post').fadeIn(600);
} else {
var $el = $('.' + this.id).fadeIn(600);
$('.projekte > .post').not($el).hide();
}
$btns.removeClass('active');
$(this).addClass('active');
})
</script>
<?php get_footer(); ?>
It be incredibly helpful if someone could explain this to me and also help me with getting it to work. I'm definitely new to WP, php and JS but would really like to get a grasp on it. And of course get the site to work properly.
EDIT
Here's the javascript at the bottom of the page as a separate piece of code:
<script>
var $btns = $('.btn').click(function() {
if (this.id == 'all') {
$('.projekte > .post').fadeIn(600);
} else {
var $el = $('.' + this.id).fadeIn(600);
$('.projekte > .post').not($el).hide();
}
$btns.removeClass('active');
$(this).addClass('active');
})
</script>
As far as I can tell there is no other JS linked to the page or executed in regards to the filter buttons. Here's also a link to the current version of the website which the code posted in my question is taken from: http://udkdev.skopec.de/category/projekte/
Actually, the javascript binds the click event on elements with class "btn" but only your "all" button has that class. So it looks as if it does nothing.
Either change the buttons class, or the click target.
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>
I am displaying anchor tag in php loop. Now I am trying to get text of these anchor tags which is coming from PHP loop in Jquery but I am getting the wrong Result. Check the Screen Shots Below...
Anchor Tags
Wrong Result That I am getting
Now when I click on any link Like Baby Food Or Baby Furniture Or any other link then I am getting the text of all Anchor Tags instead of specific anchor tag which is clicked. For Example when I click on Baby Food then I want Just Baby Food to be displayed not all Anchor Tag Text. Please Help me. Below is my code
PHP
<h4>Related Category</h4>
<?php foreach($grouped_with_count as $relatedCat) { ?>
<b> <?php echo $relatedCat['industry']; ?> </b>
<li> <?php echo $relatedCat['product_type']; ?> (<?php echo $relatedCat['count'];?>) </li>
<br />
<?php } ?>
Jquery
function RelatedCatLink(){
var href = $('.GetHref').text();
console.log(href);
//alert($('.GetHref').attr('href'));
}
Please help me out. Thanks in advance..
Problem in your code
You are using class for selection. There will be multiple <a> with the same class.
Solution
Pass the element along with your function call
HTML
<?php echo $relatedCat['product_type']; ?> (<?php echo $relatedCat['count'];?>) </li>
JS
function RelatedCatLink(elem){
var href = $(elem).text();
}
Working Demo
function RelatedCatLink(elem){
var href = $(elem).text();
alert(href);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li> 1 </li>
<li> 2 </li>
<li> 3 </li>
<li> 4 </li>
//PHP CODE
<h4>Related Category</h4>
<?php foreach($grouped_with_count as $relatedCat) { ?>
<b> <?php echo $relatedCat['industry']; ?> </b>
<li> <?php echo $relatedCat['product_type']; ?> (<?php echo $relatedCat['count'];?>) </li>
<br />
<?php } ?>
//JQUERY CODE
function RelatedCatLink(id){
var href = $('#GetHref-'+id).text();
console.log(href);
}
I have a function on my project which allows users to set certain rss source as favourite.
I'm using codeigniter, and my view is something like that:
<a href="#" data-toggle="collapse">
<h5><b> <span class="glyphicon glyphicon-star-empty"></span> Favorites </b></i></h5>
</a>
<ul class="list-unstyled collapse in" id="favorites">
<?php foreach( $source as $fav ) : if( $fav->favourite == 1 ) {?>
<li>
<a id="some_id"> <?php echo $fav->rss_title; ?></a>
</li>
<?php } endforeach; } ?>
</ul>
<!-- all favorite links are placed in a left sidebar....in header, i have a div with different opperations... -->
<div class="col-sm-12">
<?php if ( $isFavourite == 0 ) { ?>
<li><h4><a class="addfav" id='just_id' href="#favorite">Add this Rss Source to Favourites</a></h4></li>
<?php } else { ?>
<li><h4><a class="removefav" id='just_id' href="#favorite">Remove this Rss Source from Favourites</a></h4></li>
<?php } ?>
// and other options ...
</div>
Here is the script where i use ajax:
<script>
$(document).ready(function(){
$(document).on('click','.addfav',function(){
var id=this.id;
$.ajax( {
type: "POST",
data: {id:id},
url: "<?php echo site_url('rssFeedReader/addFavorites'); ?>",
success: function(msg)
{
$("#favorites").append(msg);
}
})
});
});
</script>
Everything is working fine, but i cannot do something...after i add to favourites the link( via 'append' ), I want to change the option in my header from 'Add this Rss Source to favourites' to 'Remove this rss Source to favourites'. I did this, but only work if i reload the page...I want to do this when i add the link with ajax....
How can i change the div which contain those options, in the same ajax call ? Can i do something after the line '$('#favorites').append(msg); ?
If you want to change the option, do this:
$('.addfav').addClass('removefav').removeClass('addfav').text('Remove this Rss Source from Favourites');
after the
$("#favorites").append(msg);
line
This will transform
<a class="addfav" id='just_id' href="#favorite">Add this Rss Source to Favourites</a>
to
<a class="removefav" id='just_id' href="#favorite">Remove this Rss Source from Favourites</a>
and after you can obviously add listener to the object to add fucntionnalities.
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
})