ansaurus

Question

Returning value from confirmation dialog using JQuery UI dialog

Answer 1

+1 A:

Your code is a bit convoluted, I think there is a much easier way to do this. You should instantiate the dialog first, then open it on the click event for your button. Code would look similar to this:

<script>
$(document).ready(function() {
var $myDialog = $('<div></div>')
    .html('You are about to start a war.<br/>Click OK to confirm.  Click Cancel to stop this action.')
    .dialog({
        autoOpen: false,
        title: 'Why so serious?',
        buttons: {"OK": function() { 
                      $(this).dialog("close"); 
                      window.open('http://google.com/');
                      return true;
                 }, "Cancel": function() {
                      $(this).dialog("close");
                      return false;
                 }
        }
});  

$('#myOpener').click(function(){
    return $myDialog.dialog('open');  //replace the div id with the id of the button/form
});
});
</script>

<div id="myOpener"></div>

Here are some more resources relative to this, and jQ API so you can see all your options:

http://docs.jquery.com/UI/Dialog

bryan.taylor 2010-08-24 21:22:22

PS I didn't test this code, just pretty much wrote it so you could have an idea of how to approach this issue, so there might be some minor tweaks needed.

bryan.taylor 2010-08-24 21:26:08

Yeah, this code is alright. The only thing is I want to submit a form.. so what I will do is put $('#formId').submit() inplace of window.open('http://google.com/'); in your answer. But the issue is I want to simulate submission by button click. I realized perhaps the question was not clear, I am adding clarification in the question. Thanks for suggestion.

Nishant 2010-08-24 23:09:37

@Nishant: Not really sure what you mean by 'simulate submission by button click'. Do you mean that you want to stop the submit event from taking place when someone clicks OK? I guess I'm just asking for you to elaborate on what 'simulate submission' means, can you provide a relevant use case?

bryan.taylor 2010-08-24 23:15:17

I mean functionality same as <button onclick="return confirm('Please confirm your answer');">Submit</button>. where onClick event gets either true or false based on what user clicked in confirmation dialog.

Nishant 2010-08-24 23:20:41

Ah ok now I understand, that's very easy. All you need to do is change the inside two lines of this function: $('#myOpener').click(function(){ $myDialog.dialog('open'); //prevents default link follow action return false });to:return $myDialog.dialog('open');and the click event should return the result of the button press.I'll edit the code above to be correct so you can see.

bryan.taylor 2010-08-24 23:23:22

No, actually. $myDialog.dialog('open'); just displays the confirmation div and returns true. While JavaScript confirm function waits for user's response and returns boolean based on what user clicked. Your solution would show a dialog box and immediately submit. And that's the reason, I went through the harder route of capturing click event propagation and then restarting the event using triggerHandler.

Nishant 2010-08-25 07:00:54

ansaurus

tags:

views:

answers:

Returning value from confirmation dialog using JQuery UI dialog

related questions