0

I am facing a little issue in my jQuery script.

So, I have a function set_fav_item to set my item after editing it. After that is done, I want to execute another function. I don't understand why it is not working, since I do it well elsewhere in my script...

My function set_fav_item() :

    function set_fav_item(){

    var postid = $("#window-edit input#postid").val();
    var icon = $("#window-edit span.selected-icon > i").clone();
    var color = $("#window-edit button.jscolor").css("background-color");
    var edited_item  = $("#fav-items #"+postid+"");

    edited_item.css("background-color",color);
    icon.appendTo($("#fav-items #"+postid+" a"));

    $("#window-edit , .overlay").hide(400);

    }

My try :

    $("#window-edit #send").on("click",function(){   
    // item with id #242 is an example
    $.when(set_fav_item()).then(console.log($("#242").css('background-color')));   
    });

When I edit the color of my item in my edit box and click on save button (id = #send), then the console.log gives me back the old color not the new one.

If I use my browser console to check the $('#242') background color, i got the new one as expected.

Many thanks for your help.

Sommy

Improve this question
3
  • please share relevant html code as well. Commented Jan 6, 2016 at 10:34
  • 1
    set_fav_item is not returning a promise Commented Jan 6, 2016 at 10:35
  • also need to pass a function reference to then Commented Jan 6, 2016 at 10:37

2 Answers 2

Reset to default
1

You need to return a promise. A solution is to use $.Deffered():

function set_fav_item(){

    ...
    var def = $.Deferred();
    $("#window-edit , .overlay").hide(400, def.resolve.bind(def));
    return def;
}

Another simpler solution is to call .promise() on the element:

function set_fav_item(){

    ...
    return $("#window-edit , .overlay").hide(400).promise();
}

In both cases you can do

 $.when(set_fav_item()).then(function(){
       console.log($("#242").css('background-color'));
 });

or directly

 set_fav_item().then(function(){
       console.log($("#242").css('background-color'));
 });
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Thanks It Works perfectly. So, If I well understood, this is due to my hide() call ?
@donfal71 I don't understand your comment. When the callback I pass to hide is called, it resolves the promise, which executes the function it received in then.
I just meant that I had to use a promise because of my hide() function call. I told that because I faced this issue only in this case although I have similar sequential function calls in my script and they work without promise.
@donfal71 Yes, the hide function returns the element instead of a promise. But I thought of a better simpler solution, see edit.
0

You need to await for the animation to finish but they use callbacks, not promises. So you need to consider something like:

function set_fav_item(cb){

...;

$("#window-edit , .overlay").hide(400, function() {cb()} );

}

And call it

set_fav_item(function() {
    console.log($("#242").css('background-color')
});
Improve this answer

1 Comment

I think there is an error in the call of set_fav_item , isn't it?

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.