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

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);

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

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(); }

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

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); }); }

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

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

Collectives™ on Stack Overflow

Javascript - Wait a function to finish

4 Answers 4

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Linked

Related