CODEWITHSUNDEEP
jquery
H. Ferrence
H. Ferrence

Reputation: 8106

jQuery How To Add a Variable

I am a novice in jQuery. I am using some open source code which portions appear below. All I want to do with the code is add a variable ('testVar') that a subsequent function call can handle. Can someone correct my code because the variable definition and handler does not work. Everything works except the testVar variable.

$('#default').countdown({
    until: new Date(2011, 6, 15, 12, 30, 0),
    testVar: 'Testing',
    onTick: displayVariable
});

function displayVariable() {
    $(this).text(testVar);
}

Thank you.

EDIT: @Pixeltweak...per your request. The code is below. I simply want to create a text phase that I display on my web page. I need to create a var to do that with.

$(function () {

    // override regional defaults
    $.countdown.setDefaults({
        labels: ['years', 'months', 'weeks', 'days', 'hours', 'minutes', 'seconds'],
        labels1: ['year', 'month', 'week', 'day', 'hour', 'minute', 'second']
    });

    // Round #1 Start Times -- note each Date() must match the 'lockout' column in _playoff_bracket:matches 
    $('#defaultCountdown_01').countdown({
        until: new Date(2011, 4 - 1, 13, 19, 30, 0),
        serverSync: serverTime,
        significant: 2,
        layout: 'This Pick Closes in: {d<}{dn} {dl} {d>}{h<}{hn} {hl} {h>}{m<}{mn} {ml} {m>}{s<}{sn} {sl} {s>}',
        expiryUrl: '/nhl/playoffs/myAccount.html',
        onTick: additionalFormatting
    });
    $('#defaultCountdown_02').countdown({
        until: new Date(2011, 4 - 1, 14, 19, 30, 0),
        serverSync: serverTime,
        significant: 2,
        layout: 'This Pick Closes in: {d<}{dn} {dl} {d>}{h<}{hn} {hl} {h>}{m<}{mn} {ml} {m>}{s<}{sn} {sl} {s>}',
        expiryUrl: '/nhl/playoffs/myAccount.html',
        onTick: additionalFormatting
    });
    $('#defaultCountdown_03').countdown({
        until: new Date(2011, 4 - 1, 14, 19, 0, 0),
        serverSync: serverTime,
        significant: 2,
        layout: 'This Pick Closes in: {d<}{dn} {dl} {d>}{h<}{hn} {hl} {h>}{m<}{mn} {ml} {m>}{s<}{sn} {sl} {s>}',
        expiryUrl: '/nhl/playoffs/myAccount.html',
        onTick: additionalFormatting
    });
    $('#defaultCountdown_04').countdown({
        until: new Date(2011, 4 - 1, 13, 19, 0, 0),
        serverSync: serverTime,
        significant: 2,
        layout: 'This Pick Closes in: {d<}{dn} {dl} {d>}{h<}{hn} {hl} {h>}{m<}{mn} {ml} {m>}{s<}{sn} {sl} {s>}',
        expiryUrl: '/nhl/playoffs/myAccount.html',
        onTick: additionalFormatting
    });
    $('#defaultCountdown_05').countdown({
        until: new Date(2011, 4 - 1, 13, 22, 0, 0),
        serverSync: serverTime,
        significant: 2,
        layout: 'This Pick Closes in: {d<}{dn} {dl} {d>}{h<}{hn} {hl} {h>}{m<}{mn} {ml} {m>}{s<}{sn} {sl} {s>}',
        expiryUrl: '/nhl/playoffs/myAccount.html',
        onTick: additionalFormatting
    });
    $('#defaultCountdown_06').countdown({
        until: new Date(2011, 4 - 1, 14, 22, 0, 0),
        serverSync: serverTime,
        significant: 2,
        layout: 'This Pick Closes in: {d<}{dn} {dl} {d>}{h<}{hn} {hl} {h>}{m<}{mn} {ml} {m>}{s<}{sn} {sl} {s>}',
        expiryUrl: '/nhl/playoffs/myAccount.html',
        onTick: additionalFormatting
    });
    $('#defaultCountdown_07').countdown({
        until: new Date(2011, 4 - 1, 13, 19, 0, 0),
        serverSync: serverTime,
        significant: 2,
        layout: 'This Pick Closes in: {d<}{dn} {dl} {d>}{h<}{hn} {hl} {h>}{m<}{mn} {ml} {m>}{s<}{sn} {sl} {s>}',
        expiryUrl: '/nhl/playoffs/myAccount.html',
        onTick: additionalFormatting
    });
    $('#defaultCountdown_08').countdown({
        until: new Date(2011, 4 - 1, 13, 22, 30, 0),
        serverSync: serverTime,
        significant: 2,
        layout: 'This Pick Closes in: {d<}{dn} {dl} {d>}{h<}{hn} {hl} {h>}{m<}{mn} {ml} {m>}{s<}{sn} {sl} {s>}',
        expiryUrl: '/nhl/playoffs/myAccount.html',
        onTick: additionalFormatting
    });

    // Round #2 Start Times -- note each Date() must match the 'lockout' column in _playoff_bracket:matches 
    $('#defaultCountdown_09').countdown({
        until: new Date(2011, 4 - 1, 29, 19, 0, 0),
        serverSync: serverTime,
        significant: 2,
        layout: 'This Pick Closes in: {d<}{dn} {dl} {d>}{h<}{hn} {hl} {h>}{m<}{mn} {ml} {m>}{s<}{sn} {sl} {s>}',
        expiryUrl: '/nhl/playoffs/myAccount.html',
        onTick: additionalFormatting
    });
    $('#defaultCountdown_10').countdown({
        until: new Date(2011, 4 - 1, 30, 15, 0, 0),
        serverSync: serverTime,
        significant: 2,
        layout: 'This Pick Closes in: {d<}{dn} {dl} {d>}{h<}{hn} {hl} {h>}{m<}{mn} {ml} {m>}{s<}{sn} {sl} {s>}',
        expiryUrl: '/nhl/playoffs/myAccount.html',
        onTick: additionalFormatting
    });
    $('#defaultCountdown_11').countdown({
        until: new Date(2011, 4 - 1, 28, 21, 0, 0),
        serverSync: serverTime,
        significant: 2,
        layout: 'This Pick Closes in: {d<}{dn} {dl} {d>}{h<}{hn} {hl} {h>}{m<}{mn} {ml} {m>}{s<}{sn} {sl} {s>}',
        expiryUrl: '/nhl/playoffs/myAccount.html',
        onTick: additionalFormatting
    });
    $('#defaultCountdown_12').countdown({
        until: new Date(2011, 4 - 1, 29, 22, 0, 0),
        serverSync: serverTime,
        significant: 2,
        layout: 'This Pick Closes in: {d<}{dn} {dl} {d>}{h<}{hn} {hl} {h>}{m<}{mn} {ml} {m>}{s<}{sn} {sl} {s>}',
        expiryUrl: '/nhl/playoffs/myAccount.html',
        onTick: additionalFormatting
    });

    // Round #3 Start Times -- note each Date() must match the 'lockout' column in _playoff_bracket:matches 
    $('#defaultCountdown_13').countdown({
        until: new Date(2011, 5 - 1, 14, 20, 0, 0),
        serverSync: serverTime,
        significant: 2,
        layout: 'This Pick Closes in: {d<}{dn} {dl} {d>}{h<}{hn} {hl} {h>}{m<}{mn} {ml} {m>}{s<}{sn} {sl} {s>}',
        expiryUrl: '/nhl/playoffs/myAccount.html',
        onTick: additionalFormatting
    });
    $('#defaultCountdown_14').countdown({
        until: new Date(2011, 5 - 1, 15, 20, 0, 0),
        serverSync: serverTime,
        significant: 2,
        layout: 'This Pick Closes in: {d<}{dn} {dl} {d>}{h<}{hn} {hl} {h>}{m<}{mn} {ml} {m>}{s<}{sn} {sl} {s>}',
        expiryUrl: '/nhl/playoffs/myAccount.html',
        onTick: additionalFormatting
    });

    // Round #4 Start Times -- note each Date() must match the 'lockout' column in _playoff_bracket:matches 
    $('#defaultCountdown_15').countdown({
        until: new Date(2011, 6 - 1, 1, 20, 0, 0),
        test: 'Testing',
        serverSync: serverTime,
        significant: 2,
        layout: 'This Pick Closes in: {d<}{dn} {dl} {d>}{h<}{hn} {hl} {h>}{m<}{mn} {ml} {m>}{s<}{sn} {sl} {s>}',
        expiryUrl: '/nhl/playoffs/myAccount.html',
        onTick: additionalFormatting
    });

    // additional hightlighting for more than 1-day and within last-hour of pick
    function additionalFormatting(periods) {
        if ($.countdown.periodsToSeconds(periods) >= 86400) {
            $(this).text('You have until Wednesday at 8:00pm ET to finalize this pick');
            //$(this).text($(this).countdown.test);
            $(this).removeClass('hideIt');
            //$(this).addClass('hideIt'); // greater than or equal to 1-day (2011-05-28 changed this method for one above)
        }
        else $(this).removeClass('hideIt'); // less than 24 hours
        if ($.countdown.periodsToSeconds(periods) < 60) { // less than 1-minute
            $(this).addClass('highlightBold'); // change font-weight to bold
            //$(this).countdown('change', 'significant', 1); // eliminate minutes block -- does not work as I hoped for
            //$(this).countdown('change', 'layout', 'This Pick Closes in: {sn} {sl}'); // eliminate minutes block -- does not work either
        }
        else if ($.countdown.periodsToSeconds(periods) < 3600) $(this).addClass('highlight'); // less than 1-hour
    }

});

Upvotes: 0

Views: 497

Answers (7)

H. Ferrence
H. Ferrence

Reputation: 8106

Code from aquinas (success for me)

// Round #4 Start Times -- note each Date() must match the 'lockout' column in _playoff_bracket:matches 
$('#defaultCountdown_15').countdown({
    //until: new Date(2011, 6 - 1, 1, 20, 0, 0),
    until: new Date(2011, 5 - 1, 29, 7, 29, 0),
    //test: 'Testing',
    serverSync: serverTime,
    significant: 2,
    layout: 'This Pick Closes in: {d<}{dn} {dl} {d>}{h<}{hn} {hl} {h>}{m<}{mn} {ml} {m>}{s<}{sn} {sl} {s>}',
    expiryUrl: '/nhl/playoffs/myAccount.html',
    onTick: additionalFormatting
    //onTick: function(periods) { additionalFormatting(periods, 'This is a test'); } // Samir
//});
}).data("testVar","Test by aquinas"); // aquinas

// additional hightlighting for more than 1-day and within last-hour of pick
function additionalFormatting(periods) {
//function additionalFormatting(periods, textOverride) { // Samir
    if ($.countdown.periodsToSeconds(periods) >= 86400) {
        //$(this).text('You have until Wednesday at 8:00pm ET to finalize this pick');
        //$(this).text(textOverride); // this should come from Round #4 var Samir
        $(this).text($(this).data("testVar"));
        $(this).removeClass('hideIt');
        //$(this).addClass('hideIt'); // greater than or equal to 1-day (2011-05-28 changed this method for one above)
    }
    else $(this).removeClass('hideIt'); // less than 24 hours
    if ($.countdown.periodsToSeconds(periods) < 60) { // less than 1-minute
        $(this).addClass('highlightBold'); // change font-weight to bold
        //$(this).countdown('change', 'significant', 1); // eliminate minutes block -- does not work as I hoped for
        //$(this).countdown('change', 'layout', 'This Pick Closes in: {sn} {sl}'); // eliminate minutes block -- does not work either
    }
    else if ($.countdown.periodsToSeconds(periods) < 3600) $(this).addClass('highlight'); // less than 1-hour
}

Upvotes: 0

S P
S P

Reputation: 4643

The problem is that displayVariable is not known within the context you are trying to call it from. If you really need the displayVariable function, you should do the following:

Note: testVar is defined in global scope

 $('#default').countdown({    
    until: new Date(2011, 6, 15, 12, 30, 0),    
    me: this,         
    onTick: function() { 
        me.testVar = 'blahdieblah';
        me.displayVariable();
 } });

Upvotes: 0

Samir Talwar
Samir Talwar

Reputation: 14330

It looks like you're using the jQuery Countdown plugin, which doesn't appear to support abitrary options like that. You're better off building the argument into the function:

$('#default').countdown({
    until: new Date(2011, 6, 15, 12, 30, 0),
    onTick: displayVariable
});

function displayVariable() {
    $(this).text('Testing');
}

If that's not an option (for example, if you want to re-use that function, you can make it a parameter and use an anonymous callback that delegates to it:

$('#default').countdown({
    until: new Date(2011, 6, 15, 12, 30, 0),
    onTick: function(periods) { displayVariable(periods, 'Testing', 123); }
});

function displayVariable(periods, aVariable, aSecondVariable) {
    // do something with parameters
}

Upvotes: 1

aquinas
aquinas

Reputation: 23786

How about:

$('#default').countdown({
    until: new Date(2011, 6, 15, 12, 30, 0),
    onTick: displayVariable
}).data("testVar","Testing");

function displayVariable() {
    $(this).text($(this).data("testVar"));
}

Upvotes: 1

Shaz
Shaz

Reputation: 15867

That's not how it works, you'll need to create a variable for that, not some object being passed to a different function.

Something like this would work:

var testVar = 'Testing';
function displayVariable() {
    $(this).text(testVar);
}

Or by using a object literal like so:

var literal = {
    testVar: 'Testing'
}

function displayVariable() {
    $(this).text(literal.testVar);
}

Upvotes: 0

Tyler Diaz
Tyler Diaz

Reputation: 132

Is there any reason you're not setting it as a normal variable?

var testVar_value = 'Testing';

$('#default').countdown({
    until: new Date(2011, 6, 15, 12, 30, 0),
    testVar: testVar_value,
    onTick: displayVariable
});

function displayVariable() {
    $(this).text(testVar_value);
}

Upvotes: 0

Seth
Seth

Reputation: 6260

The problem is that you aren't passing testVar into the displayVariable function. I would suggest trying something like this.

$('#default').countdown({
    until: new Date(2011, 6, 15, 12, 30, 0),
    onTick: function() {
        $('#myElement').text('Testing');
    }
});

Upvotes: 1

Related Questions