CODEWITHSUNDEEP
jqueryajax
user1830414
user1830414

Reputation: 51

Load externel content with AJAX

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>

Upvotes: 0

Views: 74

Answers (3)

Nelson Ben&#237;tez Le&#243;n
Nelson Ben&#237;tez Le&#243;n

Reputation: 50603

Replace your following line:

var current;

for this one:

var current = '1.php';

Upvotes: 1

Sukhdeep Singh Handa
Sukhdeep Singh Handa

Reputation: 413

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');
    })

});

Upvotes: 1

Filippo oretti
Filippo oretti

Reputation: 49843

what about something like ? :

if($(_element).is('visible')){
 // do not load again content
}else{
//load content
}

_element should be some id or class in the content just loaded :)

Upvotes: 0

Related Questions