We help IT Professionals succeed at work.

jQuery dialog behaving like an alert

662 Views
Last Modified: 2012-06-21
Hi Experts.

I have an ASP.NET MVC 2 app where I'm using JQuery for the most of client UI interactions.

On several forms, when the submit button is clicked, some checks are made and depending on it's results, an alert is shown to warn users about the data they are inputting (data is valid, but the app warn the user about specific cases that they would be missing).

I'd like to use JQuery dialogs to substitute these alert boxes, but when I try it the form submits without await for users cliking in dialog's "Ok" button.

In my search I've come to the idea that I probably should submit the form as a callback of the functions that shows the dialog, but I'm a bit confused about this and will appreciate any comment or suggestion on the matter.

Thankyou.
Comment
Watch Question

Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
Did you look at jquery UI modal
 dialog
leakim971Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2019

Commented:
Try : http://api.jquery.com/event.preventDefault/
$( ".selector" ).dialog({
//...
//...
   open: function(event, ui) {
      event.preventDefault();
   }
//...
//...
//...
});

Open in new window

Commented:
>>but when I try it the form submits without await for users cliking in dialog's "Ok" but
>> that I probably should submit the form as a callback of the functions that shows the dialog

After you show dialog, you should not do anything.
You should write onclick handler to OK button on dialog and submit the form in that onclick handler.


Author

Commented:
@mplungjan: Yes, the dialog I use is modal, however the modal dialog of JQuery UI only associates a layer that covers the rest of the page avoiding direct interaction with the rest of the elements. The submit event that's fired when calling the dialog launches right after dialog loading.

@leakim971: I don't want my dialog to stop the submit, I only want to delay it until dialog's button is clicked... maybe I can arrange something with preventdefault and further submitting from dialog's button onClick event...

@cmalakar: I will try it, although I'm not sure this will work, as after loading the dialog the execution will continue directly to submit without awaiting for user interaction (although this is called as a callback from the dialog).
leakim971Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2019

Commented:
>maybe I can arrange something with preventdefault and further submitting from dialog's button onClick event...

yes
open: function(event, ui) {
      event.preventDefault();
      setTimeout("$('form').submit()", 3000); // wait 3s before submit
   }

Open in new window

Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
Then I hope for you that the ID="submitButton" is type="button" and not a type="submit" since you will submit twice.

Author

Commented:
Really it's a div formatted to seems like a button accordingly with app styles. These buttons are created through an HTML helper and it's click events are controlled by a .js depending on the id of the button.

In this scope I've changed button's id to avoid being fired by usual controller and make the callback launch directly on form's client code.

This happens only in two places in the whole app. If I have time I will modify the helper to unify all button firing behaviour on a single .js file, but at this very moment current solution it's fine.

Author

Commented:
The comments provided didn't offer complete valid solutions, also the real problem was with understanding callback mechanism, wich finally I realized myself and throwed a satisfactory solution.
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.