Issues with Jquery.cookie plugin

Question

I've researched several Q&As and articles on the subject and it seems somewhere I'm making a mistake in here. I've included this code in my $(document).ready javascript and loading this at the end of my index.html. Both IDs used are properly inserted on the HTML and looking through the Jquery.cookies documentation I'm not seeing what I've forgotten if anything. Would it be that I should load the cookie function at the beginning of my HTML?

HTML where the buttons switch to the proper language HTML file...

<div class="col-xs-12 col-sm-6 col-md-6"><br>
        <h1>Comment aimeriez vous être servi?</h1><a href="fr.html">
          <div id="set_fr_button" class="btn btn-primary btn-lg text-center">En Français</div></a>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-6"><br>
        <h1>How would you liked to be served?</h1><a href="en.html">
          <div id="set_en_button" class="btn btn-primary btn-lg text-center">In English</div></a>
      </div>

JS file which includes the cookie code...

        $(function () {

    var url = 'mannydesigns.co';
    var en_page = 'en.html';
    var fr_page = 'fr.html';

    if ($.cookie('default_page') != null) {
        if (window.location.href != url + '/' + $.cookie('default_page')) {
            window.location.href = url + '/' + $.cookie('default_page');
        }
    }

    $('#set_en_button').click(function () {
        $.cookie('default_page', en_page, { expires: 999 });
    });

    $('#set_fr_button').click(function () {
        $.cookie('default_page', fr_page, { expires: 999 });
    });

    });

Answer 1

Not sure what problem you have, but I found some problem in your code.

First, you don't need <div> in link.

<div class="col-xs-12 col-sm-6 col-md-6"><br>
    <h1>Comment aimeriez vous être servi?</h1>
    <a href="fr.html" id="set_fr_button" class="btn btn-primary btn-lg text-center">En Français</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-6"><br>
    <h1>How would you liked to be served?</h1>
    <a href="en.html" id="set_en_button" class="btn btn-primary btn-lg text-center">In English</a>
</div>

Second, your click event function will never work, you should use e.preventDefault(); to prevent loading new page before set cookie.

$(function () {
    var url = 'mannydesigns.co';
    var en_page = 'en.html';
    var fr_page = 'fr.html';

    if ($.cookie('default_page') != null) {
        if (window.location.href != url + '/' + $.cookie('default_page')) {
            window.location.href = url + '/' + $.cookie('default_page');
        }
    }

    $('#set_en_button').click(function (e) {
        e.preventDefault();
        $.cookie('default_page', en_page, { expires: 999 });
        window.location.href = $(this).attr('href');
    });

    $('#set_fr_button').click(function (e) {
        e.preventDefault();
        $.cookie('default_page', fr_page, { expires: 999 });
        window.location.href = $(this).attr('href');
    });
});

Answer 2

Well folks what worked for me was isolating this code and loading it last and when it worked I realized that also the code was adding the URL when I'm already on the home page and therefore couldn't find the right HTML page...so the final code that worked is the following (basically the same, removing the url in my if statement, no e.preventdefault as it's not needed):

  $(function () {

var url = 'mannydesigns.co';
var en_page = 'en.html';
var fr_page = 'fr.html';

if ($.cookie('default_page') != null) {
    if (window.location.href != '/' + $.cookie('default_page')) {
        window.location.href = '/' + $.cookie('default_page');
    }
}

$('#set_en_button').click(function () {
    $.cookie('default_page', en_page, { expires: 999 });
});

$('#set_fr_button').click(function () {
    $.cookie('default_page', fr_page, { expires: 999 });
});

});