How do I get a JQuery statement to wait until it's completed before continuing?>

Question

Firstly, I'm new at Javascript / Jquery so it might be a stupid question...

I'm using the dialog box that is in the JQuery UI collection. I have a button that when clicked, it either shows a confirm box or an alert box. My code is like below...

            function checkfn() {

            if (document.getElementById('<%=HomeInstSelected.ClientID%>').value == 'False') {

                var dialogResult = false;

                $("#dialog-confirm").dialog({
                    resizable: false,
                    height: 140,
                    modal: true,
                    buttons: {
                        Continue: function () {
                            dialogResult = true;
                            $(this).dialog("close");

                        },
                        Cancel: function () {
                            $(this).dialog("close").slideUp();
                        }
                    }
                });

                // alert just debug code!
                alert(dialogResult);
                return dialogResult;

            }
            else {
                $("#dialog-HomeInstitutionPrompt").dialog({
                    height: 140,
                    modal: true
                });

            } 
        }

My problem is in the confirm part, it seems the confirm box is not waiting for me to hit Continue or Cancel - it's just going straight to the alert part and returning dialogResult = false.

Is it possible to halt execution of until after I've run the $('#dialog-confirm') command?

Alternatively, is it possible to return true for the checkfn() function, in the Continue function? That way, I will not need a dialogResult var at all?

score 4 · Accepted Answer · edited Feb 25 '11 at 12:48

4

I haven't used the .dialog in jQuery UI before, but, in general with jQuery, functions are run asynchronously. What this means is that you need to put the code that you want run in the Continue function.

One possibility is to send a success/cancel function to checkfn that you would call from the Continue and Cancel functions.

function checkfn(success, cancel) {

if (document.getElementById('<%=HomeInstSelected.ClientID%>').value == 'False') {

    var dialogResult = false;

    $("#dialog-confirm").dialog({
        resizable: false,
        height: 140,
        modal: true,
        buttons: {
            Continue: function () {
                if(success) success();
                $(this).dialog("close");

            },
            Cancel: function () {
                if(cancel) cancel();
                $(this).dialog("close").slideUp();
            }
        }
    });
}

You can call the function like this:

checkfn(function () {
    alert('success!');
}, function () {
    alert('failure!');
});

edited Feb 25 '11 at 12:48

strager

88,763
26
134
176

answered Feb 25 '11 at 00:53

Brian

37,399
24
94
109

i want to return true for the checkfn function. How do I do that within the Continue function? – Diskdrive Feb 25 '11 at 00:55
hi, sorry excuse my ignorance. I can't really figure out what the success and cancel's do? My knowledge of JavaScript is really bad. I'm trying to learn. – Diskdrive Feb 25 '11 at 01:03
1

@RoboShop, `success` and `cancel` are simply parameters passed to `checkfn` which are treated as callbacks. When calling `checkfn`, you can include a function like so: `checkfn(function () { alert('success!'); }, function () { alert('failure!'); });` The functions don't have to be anonymous, of course; you can do `checkfn(foo, bar);`. Just be sure that if the function passed depends on a `this` binding you bind explicitly: `checkfn(foo.success.bind(foo), foo.cancel.bind(foo));` If you need further help/understanding, you should post your calling code (which references `checkfn`). – strager Feb 25 '11 at 01:30
I updated my answer with an example call to checkfn() (thanks @strager). – Brian Feb 25 '11 at 01:45
@strager @Brian : Firstly, thanks so much for your help. Secondly, I can get the function to return when it is this checkfn(function () { alert('success!'); }, function () { alert('failure!'); }); However, when I try to return true, it doesn't do anything. This is my call to checkfn(). btnPrint.Attributes.Add("onclick", "return checkfn(function () { return true; }, function () { return false; });"); – Diskdrive Feb 25 '11 at 02:46
What I'm trying to do in checkfn isn't to alert me, it's to let the application make a postback back to the server – Diskdrive Feb 25 '11 at 02:48
@RoboShop, You'll have to do that 'postback' manually. Is the button performing a POST or GET request when it is clicked? If so, you can always return false, and in your `success` callback call the form's `submit`. – strager Feb 25 '11 at 12:48

score 1 · Answer 2 · answered Feb 25 '11 at 00:54

Just put everything you want to do inside "Continue" and "Cancel" button definitions. So, you will not need a dialogResult and alert will hit when it is needed.

if (document.getElementById('<%=HomeInstSelected.ClientID%>').value == 'False') {

                var dialogResult = false;

                $("#dialog-confirm").dialog({
                    resizable: false,
                    height: 140,
                    modal: true,
                    buttons: {
                        Continue: function () {
                            alert('Dialog result is true. I can do whatever I want here');
                            $(this).dialog("close");

                        },
                        Cancel: function () {
                            alert('Cancel is clicked. I should go on my life');
                            $(this).dialog("close").slideUp();
                        }
                    }
                });
            }
            else {
                $("#dialog-HomeInstitutionPrompt").dialog({
                    height: 140,
                    modal: true
                });
            }

-- You can't return a value for your function, because after initialization of the function, the code goes on. You need to fill Continue button definition.

Hi, thanks for the response. My problem is in the alert inside the Continue function, instead of putting an alert in, I'd like to return true for the checkfn function. How do I do that? — Diskdrive, Feb 25 '11 at 00:59
You can not. You have to put the stuff that you want to do when you get "true" from checkfn inside "Continue" button definition ;) — SadullahCeran, Feb 25 '11 at 01:10
I assume you are trying to submit a form with respect to dialog box click? Than just return false, and inside "Continue" button definition, put "$('#form_id').submit()" where form_id is the id of your form. — SadullahCeran, Feb 25 '11 at 01:11

score 1 · Answer 3 · answered Feb 25 '11 at 01:23

This is something I struggled with when I started too, The code doesn't run as it reads on the page. When you call the dialog function it executes asynchronously. The continue and cancel functions are bound to the click actions on the buttons, meanwhile the code below the dialog function runs without waiting for the events.

Long story short the result needs to happen in the cancel and continue callbacks.

Problem is you're trying to return a boolean value when you should really pass the resulting functions in instead. Alot of things in jquery and javascript in general work that way. Thankfully the language provides the ability to program in this way.

    function checkfn( resultfn(boolval) ) {

    if (document.getElementById('<%=HomeInstSelected.ClientID%>').value == 'False') {

        var dialogResult = false;

        $("#dialog-confirm").dialog({
            resizable: false,
            height: 140,
            modal: true,
            buttons: {
                Continue: function () {
                    resultfn.call( this, true );
                    $(this).dialog("close");

                },
                Cancel: function () {
                    resultfn.call( this, false );
                    $(this).dialog("close").slideUp();
                }
            }
        });

}

Put the if statement in "resultfn"

score 0 · Answer 4 · answered Jan 14 '16 at 10:04

I had a similar frustrating problem where the jQuery dialog box would submit a form before the user had a chance to choose Yes or No.

Example HTML:

<form id="myForm" method="POST" action="/Where/To/Go">
    <input type="submit" value="Submit" onclick="submitForm()"/>
</form>

And jQuery:

function submitForm() {
    $('<div title="Submit Form>Are you sure you wish to submit the form?</div>').dialog({
        modal: true,
        buttons: [
            {
                text: "Yes",
                click: function () {
                    $('#myForm').submit();
                    $(this).dialog("close");
                }
            }, {
                text: "No",
                click: function () {
                    $(this).dialog("close");
                }
            }
        ]
    });
}

To fix the issue I changed the button from a submit type to a button type which stopped it submitting and triggering the jQuery dialog at the same time:

    <input type="button" value="Submit" onclick="submitForm()"/>

How do I get a JQuery statement to wait until it's completed before continuing?>

4 Answers4