Question

Updated with latest code:

Here is the latest code, still has 2 buttons and 2 functions. Each button should run the relievant function and set the code to run the same button after every minute via the setInterval. For some reason, the very first setInterval always seems to stay set, even after clicking the second button which should change it. Not sure what I'm doing wrong:

$(document).ready(function() {
    var myTimer = null;

    get_popular();

    clearInterval(myTimer);
    myTimer = null;
    myTimer = setInterval(function() {$('a.btnPopular').click();}, 60*1000);

    $('a.btnPopular').click( function(event) {
        event.preventDefault(); 
        get_popular( $(this) );

        clearInterval(myTimer);
        myTimer = null;
        myTimer = setInterval(function() {$('a.btnPopular').click();}, 60*1000);
    });

    function get_popular( that ) {
        $.ajax({
            url: 'get_popular.aspx?rand=' + Math.random(),
            type: 'GET',
            error: function(xhr, status, error) {
                // error message here
            },
            success: function(results) { 
                if ( typeof that != "undefined" ) {
                    that.closest('.outer_div').find('.inner_div').empty().append( results );
                } else {
                    $('.inner_div.new').empty().append( results ).removeClass('new');
                }
            }
        });
    }

    $('a.btnLatest').click( function(event) {
        event.preventDefault(); 
        get_latest( $(this) );

        clearInterval(myTimer);
        myTimer = null;
        myTimer = setInterval(function() {$('a.btnLatest').click();}, 60*1000);
    });

    function get_latest( that ) {
        $.ajax({
            url: 'get_latest.aspx?rand=' + Math.random(),
            type: 'GET',
            error: function(xhr, status, error) {
                // error message here
            },
            success: function(results) { 
                if ( typeof that != "undefined" ) {
                    that.closest('.outer_div').find('.inner_div').empty().append( results );
                } else {
                    $('.inner_div.new').empty().append( results ).removeClass('new');
                }
            }
        });
    }
});
Was it helpful?

Solution

Try:

setInterval(function() {$('a.btnPopular').click();}, 60*1000);

Edit: Also you can't call get_popular(); without a parameter ;)

Edit 2: This should solve your problems:

var myTimer = null;

$('a.btnPopular').click(function(event) {
    event.preventDefault(); 
    get_popular($(this));
    clearTimeout(myTimer);
    myTimer = setTimeout(function(){$('a.btnPopular').click();}, 60*1000);
});

$('a.btnLatest').click(function(event) {
    event.preventDefault(); 
    get_latest($(this));
    clearTimeout(myTimer);
    myTimer = setTimeout(function(){$('a.btnLatest').click();}, 60*1000);
});

OTHER TIPS

setInterval(function() {$('a.btnPopular').trigger('click');}, 60*1000);
// Ad do this
$(elem).click(function(){}) => $(elem).on('click', function(){});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top