Question

I load external content using ajax with the help of a navigation.

Everything is working fine. The user also can’t load the same content again if he is clicking oftener of the menu tab. But if the user is the first time on the website he is able to load the content again (first menu tab).

I want that this isn’t possible for the user.

Here is the JavaScript:

$.get('header/1.php', function(data) {
    $('.contentHeader').html(data);
}); 

$.get('content/1.php', function(data) {
    $('.content').html(data);
}); 

$.get('advertisement/1.php', function(data) {
    $('.advertisement').html(data);
}); 
var current;
$(".navigation li").click(function() {
    var source = $(this).attr('id') + ".php";

    // the current content doesn't load again
    if(current === source) {
        return;
    }

    current = source;

    // content
    $(".content").fadeOut(function() {
        $(this).load("content/" + source).fadeIn('normal');
    })

    // advertisement
    $(".advertisement").fadeOut(function() {
        $(this).load("advertisement/" + source).fadeIn('normal');
    })

    // header
    $(".contentHeader").fadeOut(function() {
        $(this).load("header/" + source).fadeIn('normal');
    })

});

Here is the html code:

<div class="navigation">

        <ul>
            <li id="1">
                <div id="menuImage1" class="menuImage"></div>
                <div class="menuText"><p>1</p></div>
            </li>
            <li id="2">
                <div id="menuImage2" class="menuImage"></div>
                <div class="menuText"><p>2</p></div>
            </li>
            <li id="3">
                <div id="menuImage3" class="menuImage"></div>
                <div class="menuText"><p>3</p></div>
            </li>
            <li id="4">
                <div id="menuImage4" class="menuImage"></div>
                <div class="menuText"><p>4</p></div>
            </li>
            <li id="5">
                <div id="menuImage5" class="menuImage"></div>
                <div class="menuText"><p>5</p></div>
            </li>
            <li id="6">
                <div id="menuImage6" class="menuImage"></div>
                <div class="menuText"><p>6</p></div>
            </li>
        </ul>

    </div>

Answer 1

i think you should initialize the current variable.

i.e -:

$.get('header/1.php', function(data) {
    $('.contentHeader').html(data);
}); 

$.get('content/1.php', function(data) {
    $('.content').html(data);
}); 

$.get('advertisement/1.php', function(data) {
    $('.advertisement').html(data);
}); 
var current = "1.php";
$(".navigation li").click(function() {
    var source = $(this).attr('id') + ".php";

    // the current content doesn't load again
    if(current === source) {
        return;
    }

    current = source;

    // content
    $(".content").fadeOut(function() {
        $(this).load("content/" + source).fadeIn('normal');
    })

    // advertisement
    $(".advertisement").fadeOut(function() {
        $(this).load("advertisement/" + source).fadeIn('normal');
    })

    // header
    $(".contentHeader").fadeOut(function() {
        $(this).load("header/" + source).fadeIn('normal');
    })

});