Question

I have a website with these menus

<li><a href="#">Man</a>
    <ul class="sub_menu">
        <li><a href="mcaps">Caps</a></li>
        <li><a href="#">Shirts</a></li>
        <li><a href="#">Tshirts</a></li>
        <li><a href="#">Jackets</a></li>
        <li><a href="#">Jeans</a></li>
        <li><a href="#">Shorts</a></li>
        <li><a href="#">Footwear</a></li>
    </ul>
</li>

<li><a href="#">Woman</a>
    <ul class="sub_menu">
        <li><a href="#">Caps</a></li>
        <li><a href="#">Sunglasses</a></li>
        <li><a href="#">Shirts</a></li>
        <li><a href="#">Tshirts</a></li>
        <li><a href="#">Dresses</a></li>
        <li><a href="#">Jackets</a></li>
        <li><a href="#">Jeans</a></li>
        <li><a href="#">Purse</a></li>
        <li><a href="#">Handbags</a></li>
        <li><a href="#">Footwear</a></li>
    </ul>
</li>

Now with my jQuery code I’m getting the images and say if a user clicks man > mcaps

$(document).ready(function() {
    $('ul.sub_menu a').click(function(e) {
        e.preventDefault();
        var txt = $(this).attr('href');
        $.ajax({
            type: "POST",
            url: "thegamer.php",
            data:{ send_txt: txt },
            success: function(data){
                $('#container').fadeOut('8000', function (){
                    $('#container').html(data);
                    $('#container').fadeIn('8000');
                });
            }   
        });
    });
}); 

Now when I refresh the page, it goes all out and the index page is displayed, I know I have to work with cookies, but how do I use them to maintain the page?

When a user clicks Woman > jeans now that cookie must be set and not vanish on page refresh.

Any detailed code would be useful.

Answer 1

First of all you’ll need to download this plugin and add it to your page.

Then modify your code like this:

$(document).ready(function() {
    // set the content on page load to match the last clicked link
    setContainerHtml($.cookie("activeElementHref"));

   // set the content on link click
    $('ul.sub_menu a').click(function(e) {
        e.preventDefault();
        var txt = $(this).attr('href');
        $.cookie("activeElementHref", txt) 
        setContainerHtml(txt);
    });
}); 

function setContainerHtml(href) {
    $.ajax({
        type: "POST",
        url: "thegamer.php",
        data:{ send_txt: href },
        success: function(data){
            $('#container').fadeOut('8000', function (){
                $('#container').html(data);
                $('#container').fadeIn('8000');
            });
        }   
    });
}