JavaScript and client side scripting.
Moderator: General Moderators
PhpExile
Forum Newbie
Posts: 17 Joined: Wed Mar 05, 2014 12:45 pm
Post
by PhpExile » Wed Mar 12, 2014 1:26 pm
I have a jQuery script that is firing but it keeps resetting once the page is refreshed. I have searched and searched for a good tutorial for this and cannot find one. There are alot of bad ones out there. Here is what I am working with:
Navigation:
Code: Select all
<li><a class="nav_btns active" href="?main">Home</a></li>
<li><a class="nav_btns" href="?demo">Demo</a></li>
<li><a class="nav_btns" href="?videos">Videos</a></li>
<li><a class="nav_btns" href="?pics">Pictures</a></li>
<li><a class="nav_btns" href="?price">Pricing</a></li>
<li><a class="nav_btns" href="?faq">FAQ</a></li>
<li><a class="nav_btns" href="?aboutus">About Us</a></li>
<li><a class="nav_btns" href="?contactus">Contact Us</a></li>
Jquery Script:
Code: Select all
<script type="text/javascript">
$(document).ready(function() {
$('a.nav_btns').click(function() {
$('a.nav_btns').removeClass("active");
$(this).addClass("active");
});
});
</script>
Here is where I initialize Jquery:
Code: Select all
echo $Sys->Content->meta(); <---- included below
echo $Sys->head();
//Load Jquery scripts
$Sys->Template->load(TEMP. 'main' . php_ext); <--- this is the script that changes the active class to the link that was clicked
echo $Sys->Content->wrapper(); <-- the ul nav is called here so the script is before the navigation
Finally, This is the scripts that are called:
Code: Select all
<script type="text/javascript" src="core/js/jquery.min.js"></script>
<script type="text/javascript" src="core/js/custom.min.js"></script>
<script type="text/javascript" src="core/js/colorbox.js"></script>
<script type="text/javascript" src="core/js/tiny_mce/tiny_mce.js"></script>
The jQuery is doing what it is supposed to do. It removes all active classes and adds active to the correct clicked link but then it resets back to the home. What am I doing wrong? Thanks in advance.
Christopher
Site Administrator
Posts: 13596 Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US
Post
by Christopher » Wed Mar 12, 2014 3:42 pm
Have you looked at the actual HTML output of the script to see if there are some other javascript/jQuery calls that are resetting the elements? It is difficult to tell from the PHP code for your script.
(#10850)
PhpExile
Forum Newbie
Posts: 17 Joined: Wed Mar 05, 2014 12:45 pm
Post
by PhpExile » Wed Mar 12, 2014 5:56 pm
There isn't. The only jQuery I have targeting the a tag is what i posted.
Celauran
Moderator
Posts: 6427 Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada
Post
by Celauran » Wed Mar 12, 2014 6:29 pm
Looks like you're setting ?main active by default on page load then only changing the active class when a link is clicked. The link loads the new page, which brings us back to the initial state of ?main being active. Why not set active to match your query string when you load the page? You can do so in PHP with $_SERVER['QUERY_STRING'] or in JS with window.location.search
PhpExile
Forum Newbie
Posts: 17 Joined: Wed Mar 05, 2014 12:45 pm
Post
by PhpExile » Wed Mar 12, 2014 6:42 pm
Code: Select all
<div id="nav">
<ul>
<li><a class="nav_btns active" href="?main">Home</a></li>
<li><a class="nav_btns" href="?demo">Demo</a></li>
<li><a class="nav_btns" href="?videos">Videos</a></li>
<li><a class="nav_btns" href="?pics">Pictures</a></li>
<li><a class="nav_btns" href="?price">Pricing</a></li>
<li><a class="nav_btns" href="?faq">FAQ</a></li>
<li><a class="nav_btns" href="?aboutus">About Us</a></li>
<li><a class="nav_btns" href="?contactus">Contact Us</a></li>
</ul>
</div>
<div id="mbody">
<?php if(isset($_GET['main']) || empty($_GET)) { echo $Sys->Template->load('main' . php_ext); } ?>
<?php if(isset($_GET['demo'])) { echo $Sys->Template->load('demo' . php_ext); } ?>
<?php if(isset($_GET['videos'])) { echo $Sys->Template->load('videos' . php_ext); } ?>
<?php if(isset($_GET['pics'])) { echo $Sys->Template->load('pictures' . php_ext); } ?>
<?php if(isset($_GET['price'])) { echo $Sys->Template->load('packages' . php_ext); } ?>
<?php if(isset($_GET['faq'])) { echo $Sys->Template->load('faq' . php_ext); } ?>
<?php if(isset($_GET['aboutus'])) { echo $Sys->Template->load('about' . php_ext); } ?>
<?php if(isset($_GET['contactus'])) { echo $Sys->Template->load('contact' . php_ext); } ?>
</div>
This is what loads the pages.
PhpExile
Forum Newbie
Posts: 17 Joined: Wed Mar 05, 2014 12:45 pm
Post
by PhpExile » Wed Mar 12, 2014 8:00 pm
It is making the clicked tab active but once the page refreshes its back to the default active.
Celauran
Moderator
Posts: 6427 Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada
Post
by Celauran » Wed Mar 12, 2014 8:22 pm
Yes, I know. That's what I just said. It's because you've got 'active' hardcoded into the first entry. Instead, try to determine the active page programmatically and set the active link that way.
Code: Select all
<li><a class="nav_btns <?= ($_SERVER['QUERY_STRING'] == 'main') ? 'active' : ''; ?>" href="?main">Home</a></li>
for example
PhpExile
Forum Newbie
Posts: 17 Joined: Wed Mar 05, 2014 12:45 pm
Post
by PhpExile » Wed Mar 12, 2014 10:03 pm
Code: Select all
<li><a class="<?php if($_SERVER['QUERY_STRING'] == 'main' || empty($_GET)) { echo 'active'; } ?>" href="?main">Home</a></li>
<li><a class="<?php if($_SERVER['QUERY_STRING'] == 'demo') { echo 'active'; } ?>" href="?demo">Demo</a></li>
<li><a class="<?php if($_SERVER['QUERY_STRING'] == 'videos') { echo 'active'; } ?>" href="?videos">Videos</a></li>
<li><a class="<?php if($_SERVER['QUERY_STRING'] == 'pics') { echo 'active'; } ?>" href="?pics">Pictures</a></li>
<li><a class="<?php if($_SERVER['QUERY_STRING'] == 'price') { echo 'active'; } ?>" href="?price">Pricing</a></li>
<li><a class="<?php if($_SERVER['QUERY_STRING'] == 'faq') { echo 'active'; } ?>" href="?faq">FAQ</a></li>
<li><a class="<?php if($_SERVER['QUERY_STRING'] == 'aboutus') { echo 'active'; } ?>" href="?aboutus">About Us</a></li>
<li><a class="<?php if($_SERVER['QUERY_STRING'] == 'contactus') { echo 'active'; } ?>" href="?contactus">Contact Us</a></li>
Had to do it like this but thank you it works. Didn't even know there was a query string in the $_SERVER heh.