Question

I’ve managed to get my main navigation to work so that JQ loads the content HTML from another file and places them as the innerHTML of my main content div. However, each time that I refresh the page it returns me to the default state of the file, that is without the content that was dynamically altered via JQ. Also, I can’t figure out a way to link to the index page with the altered content since the URL stays the same. Any idea on how to do these things?

Here’s the function used for dynamically altering the content:

$(document).ready(function() {                                                                                                                            
  $('#menu_items').on('click', '#menu_items a', function(event) {                                                                                   
    event.preventDefault();                                                                                                                   
    var href = $(this).attr('href');                                                                                                          
    $('#main_content').load(href);                                                                                                            
  });
});

Answer 1

I completely stole these functions from another website, http://www.quirksmode.org/js/cookies.html
but this is what you need to make this easy.

function createCookie(name,value,days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        var expires = "; expires="+date.toGMTString();
    }
    else var expires = "";
    document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}

function eraseCookie(name) {
    createCookie(name,"",-1);
}

$(document).ready(function() {
$('#main_content').load($("#"+readCookie("content")).attr('href'));
$('#menu_items').on('click', '#menu_items a', function(event) {
event.preventDefault();
var href = $(this).attr('href');
$('#main_content').load(href);
createCookie("content",$(this).attr('id'), 1);
});
});

just make sure all your menu links have an ID, otherwise you’ll have to change this code a bit.