Question

I am trying to load 2 different PHP files after certain interval by users click.
Here’s the code snippet, help me through this:

function load_recent_popular(recent) {
    if( typeof load_recent_popular.counter == 'undefined' ) { 
        load_recent_popular.counter = 0;  
    }
    if(recent==1) {
        var loadUrl = "1.php"; 
        $("#box15").load(loadUrl); 
        load_recent_popular.counter = 0;  
    }
    else {
        var loadUrl = "2.php"; 
        $("#box15").load(loadUrl); 
        load_recent_popular.counter = 1;  
    }
    handle = setInterval(function() { 
        if(load_recent_popular.counter == 0) { 
            loadUrl = "1.php";  
        }
        else if(load_recent_popular.counter == 1) { 
            loadUrl = "2.php";  
        }
        $("#box15").load(loadUrl); 
    }, 10000);  
}

<a onClick="load_recent_popular(1)">Load 1</a><a onClick="load_recent_popular(2)">      Load 2</a>

<div id="box15"></div>

I tried to include 2 different intervals with 2 different handles for each and inserted module to clear 1 interval before starting another, but it is not working so if anyone got solution for that too, please share.

Answer 1

You’ll end up with multiple timers running but it looks okay other than. For the timer problem, you could store the timer ID using .data on the #box15 and then call clearTimeout to stop it before starting a new one. Something like this:

function load_recent_popular(recent) {
    var $box15 = $('#box15');
    var timer  = $box15.data('lrp_timer');
    if(timer)
        clearInterval(timer);

    if( typeof load_recent_popular.counter == 'undefined' ) { 
        load_recent_popular.counter = 0;  
    }
    if(recent==1) {
        var loadUrl = "1.php"; 
        $("#box15").load(loadUrl); 
        load_recent_popular.counter = 0;  
    }
    else {
        var loadUrl = "2.php"; 
        $("#box15").load(loadUrl); 
        load_recent_popular.counter = 1;  
    }
    $box15.data('lrp_timer', setInterval(function() { 
        if(load_recent_popular.counter == 0) { 
            loadUrl = "1.php";  
        }
        else if(load_recent_popular.counter == 1) { 
            loadUrl = "2.php";  
        }
        $("#box15").load(loadUrl); 
    }, 10000));
}

And a live demo of the technique (shorter time interval, no AJAX): http://jsfiddle.net/ambiguous/MagL4/