jQuery dialog behaving like an alert
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.
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.
Try : http://api.jquery.com/event.preventDefault/
$( ".selector" ).dialog({
//...
//...
open: function(event, ui) {
event.preventDefault();
}
//...
//...
//...
});
>>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.
>> 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.
ASKER
@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).
@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).
>maybe I can arrange something with preventdefault and further submitting from dialog's button onClick event...
yes
yes
open: function(event, ui) {
event.preventDefault();
setTimeout("$('form').submit()", 3000); // wait 3s before submit
}ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Then I hope for you that the ID="submitButton" is type="button" and not a type="submit" since you will submit twice.
ASKER
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.
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.
ASKER
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.
dialog