I'm trying to submit a HTML form with submit() method of jQuery.
I'm registering a submitHandler for checking the formdata. IF check fails, the User can choose in a dialogue, whether he want to continue or cancel. On Continuing I deregister my Checkeventhandler and call submit() on the form, but nothing happens.
Here's my coding:
<form action="test.php" id="summary_01" method="post">
</form>
<script type="text/javascript">
$(document).ready(function() {
$('#summary_01').on('submit', function(e){
var result = check();
if (!result) {
e.preventDefault();
}
return result;
});
});
function check() {
var result = false;
// do some Checks, setting result= true, if OK
if(!result) {
$( "#dialog-message" ).dialog({
modal: true,
resize : true,
width : 'auto',
buttons: {
Ok: function() { //Sending, despite check failed
$('#summary_01').unbind('submit'); //remove checkingForm Eventhandler
$('#summary_01').submit();
$( this ).dialog( "close" );
},
Cancel : function() {
$( this ).dialog( "close" );
}
}
});
}
return result;
}
</script>
I think the problem is e.preventDefault() but the dialogue call is asynchronous and therefore I prevent submitting until the user have chosen to continue or cancel.
Maybe you can help me. Thanks for your help in advance.
Call native submit function. In your code you have also other form id. Should be #form01.
$('#form01').off('submit');
$('#form01').get(0).submit();
Related
On my page I have a button for delete and that triggers a Jquery event for posting showing a dialog first and on continue it passes on the controller and action.
That works fine. Here is the jquery code:
$('#deleteMaintor-dialog').dialog({
autoOpen: false, width: 400, resizable: false, modal: true, //Dialog options
buttons: {
"Continue": function () {
$('#aniWait').show();
$.post(deleteLinkObj[0].href, function (data) { //Post to action
$('#Tor').html(data);
$('#aniWait').hide();
});
$(this).dialog("close");
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
$(document).on('click', '#btnDeleteMaintor', function (e) {
deleteLinkObj = $(this); //for future use
$('#deleteMaintor-dialog').dialog('open');
return false; // prevents the default behaviour
});
The problem is that after this, none of the jquery events on the controles are fired anymore.
Why not?
I guess this has to do with the Success part of the $.Post?
I found the solution:
All the controls that were not working anymore were not anchored to the document, so I did that and now it is working fine.
I'm trying to make a web page by using xhr aJax.
I received Jquery Dialog via xhr.responseText .
A.jsp (Actually viewed page's getting data part)
function getOrderData(tableid){
if(xhrGetOr) {
xhrGetOr.open("GET", "http://localhost:8080/Erpos/POS_orderAjaxGet.html?id="+tableid,true);
xhrGetOr.onreadystatechange = function() {
if(xhrGetOr.readyState == 4 && xhrGetOr.status == 200){
var dialog = $(xhrGetOr.responseText).appendTo('body');
viewdialog();
}
}
xhrGetOr.send(null);
}
}
When I click some button, getOrderData() is called and As all data is received, viewdialog() method is also called. So, dialog is displayed in a web page.
POS_orderAjaxGet.jsp
<script>
function viewdialog() {
$( "#dialog" ).dialog({
closeOnEscape: false,
autoOpen: true,
resizable: false,
draggable: true,
move:false,
height:830,
width:1085,
modal: true,
position:[0,0]
});
}
function closeMenu() {
alert("close event"); // this is well displayed
$( "#dialog" ).dialog("close");
}
</script>
<body>
<div id="dialog" title="order">
<input id="ocancel"type="button" class="btn" value="close"
onclick="closeMenu();">
</div>
</body>
Everything is good. but $( "#dialog" ).dialog("close") is not working. So I moved closeMenu() function to A.jsp. also not working...
pure POS_orderAjaGet's closeMenu() is very well wokring.
I think A.jsp can't find id 'dialog'
Let me know What problems is.
function closeMenu() {
document.getElementById("dialog").parentNode.remove();
}
It same work. But I think that is not good solution.
When my form is submitted and validated, I want my dialog to fadeout and close, I do not want the page to automatically refresh. If I use preventdefault the page doesn't refresh, but the dialog doesn't close either. What else do I need to do?
$("#form").validate({
rules: {
number : {
required: true
}
},
messages: {
number : {
required: "enter a phone number"
}
},
submitHandler: function(form,event) {
event.preventDefault();
//this prevents a double click on the form button
$("form :input:submit").click(function() {
this.disabled = 'disabled';
});
//Here I want the dialog to slowly fade, then close, *then* reload the page.
//but it won't fade or close when I'm using preventDefault().
$('#dialog').fadeOut('slow', function(){
$( this ).dialog( "close" );
location.reload();
});
} //closes submit handler
});//close validate
The problem is submitHandler receive only 1 argument form, therefore trying to call event.preventDefault(); will cause exception and stop the below script from executing.
The callback gets passed one argument:
form
Type: Element The form currently being validated, as a
DOMElement.
From documentation
Try return false; at the end of the function.
submitHandler: function(form) {
$("form :input:submit").click(function() {
this.disabled = 'disabled';
});
$('#dialog').fadeOut('slow', function(){
$( this ).dialog( "close" );
location.reload();
});
return false;
}
You could put event.preventDefault(); at the end of your submithandler function.
I've this function in jQuery:
$("#bottone_mail").on("click", function(){
$('#container_body').fadeTo(1000, 0.25);
$( "#form" ).dialog({
width:510,height:500});
return false;
That creates a form window. When the user clicks the "Send" button, this script is executed:
$("#invia").on("click", function(){
$( "#form" ).dialog("close");
$('#container_body').fadeTo(1000, 1);
$("#spc1").html("<div id='mess_invio'> Messaggio inviato con successo, grazie!</div>");
return false;
});
I want $('#container_body').fadeTo(1000, 1); to be executed when the user closes the form window with the "X" button, other than when the "Send" button is pressed.
The only related answer I could find is this:
jQuery UI Dialog Box - does not open after being closed
It doesn't work for me, though, as a function name is required.
I'm at my first steps with jQuery, so I'd be very thankful if someone was to post a tailored solution with an explanation...
you have options when you create the dialog.
Maybe you can use something like:
$( "#form" ).dialog({
width:510,
height:500,
close: function() {
$('#container_body').fadeTo(1000, 1);
}
});
You can do it like this -
$("#form").on('dialogclose', function(event) {
$('#container_body').fadeTo(1000, 1);
});
http://api.jqueryui.com/dialog/#method-close
I read lots of questions about this, but every solution uses the same workaround, submiting the form inside the jquery dialog, something like this:
$("#dialog").dialog({
buttons : {
"Confirm" : function() {
window.location.href = targetUrl;
},
"Cancel" : function() {
$(this).dialog("close");
}
}
Isn't there an easier way, more like javascript confirm?
<input type="submit" onclick="return confirm('are you sure?');" />
Why something like return true, return false doesn't work?
Here's what you can do, you change your input type from 'submit' to 'button', then, you can have your script like this:
$(document).ready(function(){
$("#dialog").dialog({
autoOpen: false,
buttons : {
"Confirm" : function() {
$('#form1').submit();
},
"Cancel" : function() {
$(this).dialog("close");
}
}
});
$('#submitButton').click(function(){
$("#dialog").dialog('open');
});
});
This way your form will only be submitted when the used confirms the dialog.
The reason it doesn't matter if you return false or true in your case is that the dialog is just shown but code from the submit event keeps on executing unless you return false just after showing the dialog.
I wrote the following code to use JQuery's UI Dialog as a modal confirmation. By submitting the form via the event target there is not a recursive call to the submit event handler.
$(function () {
$('form[action*="/Delete"]').submit(function (e) {
e.preventDefault();
$("<div>Are you sure you want to delete this?</div>").dialog({
resizable: false,
height: 140,
modal: true,
buttons: {
Ok: function () {
e.target.submit();
},
Cancel: function () {
$(this).dialog("close");
}
}
});
});
});
This is because jQuery UI dialogs are not technically modal, unlike confirm and alert. They don't pause the javascript you're in the process of executing. But you can get essentially the same thing like this:
function restOfTheCode(returnValue)
{
//do stuff
}
$("#dialog").dialog({
buttons : {
"Confirm" : function() { $(this).dialog("close"); restOfTheCode(true); },
"Cancel" : function() { $(this).dialog("close"); restOfTheCode(false); }
}
});
//anything down here executes immediately after the dialog is shown, so that's no good.
Is equivalent to:
var returnValue = confirm("Are you sure you want to confirm?");
//do stuff
Edit: okay, with the addition of the submit issue the alternate code here doesn't make any sense. But the explanation is the same: it's not modal. If you really wanted to, you could simulate this:
function modalDialogConfirm()
{
var buttonClicked = false;
var valueSelected;
$("#dialog").dialog({
buttons : {
"Confirm" : function() { $(this).dialog("close"); buttonClicked = true; valueSelected = true; },
"Cancel" : function() { $(this).dialog("close"); buttonClicked = true; valueSelected = false; }
}
});
function y { setTimeOut("x()", 100); }
function x { setTimeOut("y()", 100); }
while(!buttonClicked);
return valueSelected;
}
...but this just freezes the browser, so it's not a whole lot of useful...