How do I communicate between two javascript object literals?

Question

I want to know how I can call a method from an object within another object literal. Here is my code. I am building a jQuery UI slider. I am trying to call the animatebox function within the animations object literal and the error in my chrome console is:

Uncaught TypeError: Cannot call method 'animateBox' of undefined

My code looks like this:

var sliderOpts = {

    animate: true,
    range: "min",
    value: 50,
    min: 10,
    max: 100,
    step: 10,

    //this gets a live reading of the value and prints it on the page
    slide: function (event, ui) {
        $("#slider-result").html(ui.value + " GB");
    },

    //this updates the hidden form field so we can submit the data using a form
    change: function (event, ui) {
        $('#hidden').attr('value', ui.value);
        var val = ui.value,
            $box = $('#message');
        switch (true) {
        case (val > 50):
            $box.animations.animateBox().html('you have chosen xtremenet');
            break;
        case (val < 50):
            $box.fadeOut().fadeIn().html('you have chosen valuenet');
            break;
        default:
            $box.fadeOut().fadeIn().html('you have chosen powernet');
        }
    }
};

var animations = {
    animateBox: function () {
        $("#message").slideDown(500);
    }
};

$(".slider").bind("slidecreate", animations.animateBox).slider(sliderOpts);

So how do I call this method called animateBox?

Answer 1

$box.animations - is undefined - and it is so

the element with id="message" wrapped with a jQuery object, doesn't have the animations property

in your case you can fix it by simply calling

animations.animateBox();

instead of $box.animations.animateBox()

Answer 2

The jquery object $box has no .animations property. You have defined animations as a global (window-level) variable.

Also chaining won't work because you don't return anything from the animateBox function. I guess you want to change that function to return $('#message'). Once you have that, instead of

$box.animations.animateBox().html('you have chosen xtremenet');

try

animations.animateBox().html('you have chosen xtremenet');

Answer 3

You should just be able to call animations.animateBox() . You haven't set it up as a jQuery method, so $box.animations is likely what is throwing the error.

Answer 4

var animations = {
    animateBox: function (obj) {
        obj.slideDown(500);
    }
};


animations.animateBox($box.html('you have chosen xtremenet'))

Answer 5

You could supply the animateBox function as a callback via the options. Like so:

var sliderOpts = {
    animateBox: function() { // magic here },
    animate: true,
    range: "min",
    ...
};

then set the slider's animateBox value within your plugin. If you use standard plugin conventions the call to animate box in change would look like:

this.animateBox();