?
Solved

jQuery dialog behaving like an alert

Posted on 2011-04-25
9
Medium Priority
?
654 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.
0
Comment
Question by:Bardobrave
  • 4
  • 2
  • 2
  • +1
9 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 35459664
Did you look at jquery UI modal
 dialog
0
 
LVL 83

Expert Comment

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

Open in new window

0
 
LVL 23

Expert Comment

by:cmalakar
ID: 35459711
>>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.


0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 19

Author Comment

by:Bardobrave
ID: 35460023
@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).
0
 
LVL 83

Expert Comment

by:leakim971
ID: 35460037
>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

0
 
LVL 19

Accepted Solution

by:
Bardobrave earned 0 total points
ID: 35464784
Finally I've found a solution through callbacks. I think this is better than anyone that presented solutions.

I fire the checking functions cascading one after another as a callback of previous function, and the last one in the series has the submit of the form as a callback.

$("#submitButton").click(function () {
   launchFirstChecking(value, function () {
      launchSecondChecking(value, function () {
          $("form").submit();
      });
   });
});

This way, every callback awaits to execute until previous function has finished it's execution. Dialog method also receive the current callback as a parameter and return it's calling when finished.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 35465084
Then I hope for you that the ID="submitButton" is type="button" and not a type="submit" since you will submit twice.
0
 
LVL 19

Author Comment

by:Bardobrave
ID: 35465494
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.
0
 
LVL 19

Author Closing Comment

by:Bardobrave
ID: 35496551
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.
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
Measuring Server's processing rate with a simple powershell command. The differences in processing rate also was recorded in different use-cases, when a server in free and busy states.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
This video shows how to quickly and easily deploy an email signature for all users in Office 365 and prevent it from being added to replies and forwards. (the resulting signature is applied on the server level in Exchange Online) The email signat…
Suggested Courses
Course of the Month13 days, 18 hours left to enroll

807 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question