How to wait for a function to complete before executing another function

Question

I'm using selecter jquery. I initialize it by typing the code

$("select").selecter();

I need to make sure that the formstone selecter jquery library has completed before i start appending elements. So what i did is to is use the $.when function

initialize: function(){
    $.when($("select").selecter()).then(this.initOptions());
},

initOptions: function(){
    this.$el.find('.selecter').addClass('something');
}

But this does not work. How can i wait while formstone selecter is doing its thing before i execute another function?

Thanks,

UPDATE

Here's the update of what i did but it does not work.

initialize: function(){
   $("select").selecter({callback: this.initOptions });
},

initOptions: function(){
    this.$el.find('.selecter').addClass('something');
}

score 0 · Answer 1 · answered Feb 14 '14 at 07:20

0

There is a callback option.

The function passed as a callback will receive the newly selected value as the first parameter

Should be $("select").selecter(callback: function() { alert('callback fired.') }); or as shown

$("select").selecter({
    callback: selectCallback
});

function selectCallback(value, index) {
    alert("VALUE: " + value + ", INDEX: " + index);
}

answered Feb 14 '14 at 07:20

i100

4,529
1
22
20

Thanks. I'm still new to javascript. How can i use it? can you provide more info? – demic0de Feb 14 '14 at 07:28
the second examples shows just this - how to use it. Just write any function and pass its name as a parameter on init time $("select").selecter({ callback: selectCallback }); – i100 Feb 14 '14 at 07:30

V31 · Answer 2 · 2014-02-14T09:36:24.510

0

The problem which I think regarding the callback edited code is that this can refer to anything. Try the following code

var selectorObj = {
 initialize: function(){
    $("select").selecter({callback: selectorObj.initOptions });
    },
initOptions: function(){
    this.$el.find('.selecter').addClass('something');
     }
};

Created a working fiddler for you http://jsfiddle.net/6Bj6j/

The css is out of shape. Just select what is poping up when you click on the dropdown. You will get an alert which is written in the callback.

edited Feb 14 '14 at 09:36

answered Feb 14 '14 at 07:52

V31

7,626
3
26
44

I'm getting SyntaxError: missing : after property id var selectorObj = { – demic0de Feb 14 '14 at 08:01

score 0 · Answer 3 · answered Mar 25 '14 at 16:21

The problem with the provided snippet is the scope of the callback:

var selectorObj = {
    initialize: function(){
        $("select").selecter({ callback: selectorObj.initOptions });
    },
    initOptions: function(){
        // 'this' refers to the "$('.selecter')" jQuery element
        this.addClass('something');
    }
};

However if you just need to add a class to the rendered element, you should use the 'customClass' option:

$("select").selecter({
    customClass: "something"
});

If you need to do more, you can always access the Selecter element directly:

var $selecter = $("select").selecter().next(".selecter");

$selecter.addClass("something").find(".selecter-selected").trigger("click");

Sidenote: I'm the main developer of Formstone. If you have any suggestions for new features or better implementation, just open a new issue on GitHub.

How to wait for a function to complete before executing another function

3 Answers3

Linked