Fredtrix Fredtrix - 7 months ago 12
Javascript Question

Using jQuery, ajax and php to create dynamic content. But my nav bar doesn't work

I've created a website using PHP include to get all the pieces. Then i've created a content page, this page is the only page that is refreshed. It's also the only page where the information/text is canged. I've used jQuery, PHP and Ajax to do this.

Now, this all works fine and as it should, but it has created some new problems regarding the websites navigation.

The navigation is just a set of links in a list. But whenever one of them is clicked I've made it so that it gets a new class with a new style. So that the user can see where he/she is on the website. I've done this with javascript and jQuery using the .toggleClass method. And this works, but now I'm getting to the problem at hand.

So the this is the deal:

When ever I refresh the website through the browser the .toggleClass information is lost and the button loses it's class and style. Even though the page is not changed, just refreshed. Also, when I click on the "home" button in my banner to return to the frontpage the opposite happens. The last button that had .toggleClass activated keeps it's class and style even though I'm not on that page anymore, but returned to the initial index.

I know that my code is not that impressive and it might be lots of faults in it. I'm not really that skilled at this yet, I'm still learning. Anyway is there a way to work around this? or is it's simply something I've done wrong? Or maybe there is an easier and better way to make a website like this?

Here is my code:

Index.php

<?php

include("layout/header.php");
include("content/content.php");
include("layout/footer.php");

?>


load_page.php

<?php

if(!$_GET['page']) die("0"); {

$page = (int)$_GET['page'];

if(file_exists('pages/page_'.$page.'.html')) {

echo file_get_contents('pages/page_'.$page.'.html');

}

else { echo 'There is no such page!';

}
}

?>


ajax.js

$(document).ready(function () {

checkURL();

$('ul li a').click(function (e) {

checkURL(this.hash);

});

setInterval("checkURL()", 200);

});

var lasturl = ""; // storage

function checkURL(hash) {
if (!hash) hash = window.location.hash;

if (hash != lasturl) {
lasturl = hash;
loadPage(hash);
}
}

function loadPage(url) // AJAX function
{
url = url.replace('#page', '');

$.ajax({
type: "GET",
url: "load_page.php",
data: 'page=' + url,
dataType: "html",
success: function (msg) {

if (parseInt(msg) != 0) {
$('#pageContent').html(msg);

}
}

});

}


javascript.js

$(document).ready(function(){

$('.button').click(function(){

$('.buttonselected').removeClass('buttonselected');
$(this).toggleClass('buttonselected');

});

});


I'm not going to post all of my HTML and CSS code, that would be too much. I already have a ton of code posted. But here are the essentials you might need.

My navigation that has the links for the dynamic content/pages that is generated through Ajax.

<nav>

<ul id="navigation">

<li> <a class="button" href="#page1"> Frontpage </a> </li>
<li> <a class="button" href="#page2"> Archive </a> </li>
<li> <a class="button" href="#page3"> Stuff </a> </li>
<li> <a class="button" href="#page4"> Portfolio </a> </li>


</ul>

</nav>


The content page where the pages is added through ajax and php.

content.php

<div id="pageContent">

<!-- content comes here -->

</div>


Lastly just some notes:


  • Yes, I am linking to a jQuery document.

  • Everything works as it should, excep for the buttons.

  • Let me know if you want more information about something.

  • Thanks for taking the time to read all this!


Answer

Solving the "home" button problem:

$(document).ready(function(){

    $('.button').click(function(){ 

        $('.buttonselected').removeClass('buttonselected');
        $(this).toggleClass('buttonselected'); 

    });

    $('.ce').click(function(){

        $('.buttonselected').removeClass('buttonselected');
        $('#frontpage').toggleClass('buttonselected'); 

    });

});

Where's the '.ce' is the class of the "home" button in the banner and the '#frontpage' is the id of the button that needs to get the new class after the link is pressed and the page returns to the index.

"Solving" the refresh problem:

Added this code to the content page.

$(document).ready(function(){

    location.href = "#page1" 

});

Added this code to the #page1.

<script type="text/javascript">

$(document).ready(function(){

    $('.buttonselected').removeClass('buttonselected');
    $('#frontpage').toggleClass('buttonselected');

});

This makes it so that whenver the page is refreshed it returns to the frontpage. It also makes it so that whenever someone first visits the website they will see the correct frontpage and at the same time the frontpage button will have the .toggleClass style indicating where they are on the page.

This is still not a good solution though, imo. The optimal thing would of course be to make it so that whenever the browser is refreshed it's still at the same page on the website and with it's correct button "pressed". I will post my final code when I eventuall figure it out. Just thought I'd post what I've done so far if anyone else is looking at this and haveing the same issue.