Javascript - Wait a function to finish

Question

I need to implement a confirm box replacement by using jquery dialog. I have a calling function like this

function callingFunc() {

 var a = confirmJquery("text", 300, 300, "ok", "cancel"); 

 if (a == true) {
   .....
 }
 else {
   .... 
 }
}

This is the confirmJquery function

function confirmJquery(msg, width, height, txtOk, txtCancel) {

    var div = document.createElement('div');
    div.className = "confirmJquery";

    var span = document.createElement('span');
    $(span).html(msg);
    div.appendChild(span);

    var buttonOk = document.createElement('button');
    buttonOk.className = 'buttonStyleBigger';
    $(buttonOk).html(txtOk);

    var buttonCancel = document.createElement('button');
    buttonCancel.className = 'buttonStyleBigger';
    $(buttonCancel).html(txtCancel);

    var divBottom = document.createElement('div');
    divBottom.className = 'dialogAction';

    divBottom.appendChild(buttonOk);
    divBottom.appendChild(buttonCancel);

    div.appendChild(divBottom);

    var dialog = window.parent.$(div).appendTo(window.parent.document.body);

     // open the dialog
    dialog.dialog({
        height: height,
        width: width,
        resizable: false,
        // add a close listener to prevent adding multiple divs to the document
        close: function(event, ui) {
            // remove div with all data and events
            dialog.remove();
        },
        modal: true
    });

    $(buttonOk).bind('click', function(){
        return true;

    });

    $(buttonCancel).bind('click', function() {

        return false;
    });

}

The problem is, the confirmJquery function always finish before the button (Ok or Cancel) is pressed; hence, there is no value in the calling function. I need to make the confirmJquery waits until user press the button and then function finish and the rest of the calling function continues. How can i do that ?

I need to update more details: I already tried the call back function way. It works perfectly. But, life is not easy like that. This is a very big, old, messy system. Doing that requires me to re-write lot lot of functions, so i need to create a function that act exactly like the confirm function of javascript

JavaScript is not supposed to wait.

Lucero
– Lucero

2012-04-25 08:22:23 +00:00
Commented Apr 25, 2012 at 8:22 — Lucero
– Lucero, Commented Apr 25, 2012 at 8:22

Alexander Pavlov · Accepted Answer · 2012-04-25 08:03:33Z

3

Since your function is going to be asynchronous, you need to use a callback. Something like this:

function myCallback(result)
{
  if (result) {
    // OK
  } else {
    // Cancel
  }
}

function confirmJquery(msg, width, height, txtOk, txtCancel, callback) {
...
    $(buttonOk).bind('click', function(){
        callback(true);
    });

    $(buttonCancel).bind('click', function() {
        callback(false);
    });
}

and

confirmJquery(msg, width, height, txtOk, txtCancel, myCallback);

answered Apr 25, 2012 at 8:03

Alexander Pavlov

32.4k5 gold badges71 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Christian Romeni · Accepted Answer · 2012-04-25 08:02:35Z

0

Move the rest of the function inside another function, and execute that second function at the end of the confirmJquery function.

function firstfunction(){

  // Do Some Stuff

  secondfunction();

}

answered Apr 25, 2012 at 8:02

Christian Romeni

1921 silver badge10 bronze badges

Comments

Joseph · Accepted Answer · 2012-04-25 08:04:27Z

0

first, to avoid a long list of arguments on the receiving side, you can use an object of arguments instead. then send over a callback to confirmJquery

function callingFunc() {

    var a = confirmJquery({
        msg:"text", 
        width:300, 
        height:300, 
        txtOk:"ok", 
        txtCancel:"cancel"
    },function(ok){
        if(ok){
            ...
        } else {
            ...
        }
    });
}

function confirmJquery(options,callback) {
    //options.msg
    //options.width
    ...

    $(buttonOk).bind('click', function(){
        callback(true);
    });

    $(buttonCancel).bind('click', function() {
        callback(false);
    });

}

answered Apr 25, 2012 at 8:04

Joseph

120k31 gold badges186 silver badges238 bronze badges

Comments

syedi · Accepted Answer · 2012-04-25 08:08:59Z

0

yes, alexander is right, just reorganize code, one for dialog, one for function based on a flag/msg. just like mvc pattern.

answered Apr 25, 2012 at 8:08

syedi

111 silver badge2 bronze badges

Collectives™ on Stack Overflow

Javascript - Wait a function to finish

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related