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...
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 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();
function Globally() {
$("#dialogid").dialog({ width: 300, modal: true, show: 'drop', hide: 'drop',
buttons: {
"Ok": function () { return true; $(this).dialog('close'); },
"Cancel": function () { return false; $(this).dialog('close'); }
}
});
}
function test()
{
if(Globally())
alert("Ok");
else
alert("Cancel");
}
I am trying to make a confirmation dialog and I want it to placed in a function (in this case Globally()) because I am using confirmation dialog in so many different function, but this is not working , the control returns from the Globally() function without getting true or false value. I want it to stop there until user press Ok or Cancel. How can I do this?
You'll have to use built in confirm function if you want to run code like that:
var question = confirm("Proceed?")
if (question){
// continue
} else {
// stop
}
That is because only confirm when used prevent whole javascript execution and allows you to pick one answer or the other (Ok, Cancel).
Dialogs like jQuery dialog can not stop script execution so even if you use
if(Globally())
alert("Ok");
else
alert("Cancel");
It'll just execute Globally() function and continue right after it - not waiting for a user answer.
If you really want to use jq dialog then add callback functions to your buttons.
"Ok": function () { callbackFunctionTrue(); },
"Cancel": function () { callbackFunctionFalse(); }
And ditch if/else statement() in test function.
That;s not how it works
Just do
"Ok": function () { alert('OK'); $(this).dialog('close'); },
"Cancel": function () { alert('Not ok'); $(this).dialog('close'); }
or
"Ok": function () { $(this).dialog('close'); test(1) },
"Cancel": function () {$(this).dialog('close'); test(0) }
with
function test(ok){
alert(ok?"Ok":"Cancel");
}
I have a page that call from ajax a form with a specific target. this form has a delete entry and for that a warning with a jQuery dialog is used. everything works great.
BUT :
After doing the change or even not doing it, when I open another form (different form by ajax call) and I call the same code below described. When It is submit the dialog the #var_blabla as a value of 1 (the value of the first dialog opened/loaded) and for that moment should be '2'.
I try to figure it out.. So my problem I guess is not for the dialog it self, since I try to load a second page without the constructor and the dialog didn't open (what should be expected).
The problem is on the button 'Submit Delete' that has an event function and it stays active over another that is created.
The site have a lot of forms and many dialogs for each form, is there a wait to unbind, or destroy completely the dialog and the buttons? Ideas please?
Thanks
simplified 1st dialog call code:
$("#dialog-confirm-elimina").dialog({
autoOpen: false,
resizable: false,
height:220,
modal: true,
buttons: {
'Submit Delete': function() { $('#var_blabla').val('1');
$('#form_submit').submit();
$(this).dialog('close');
},
Cancel: function() {
$(this).dialog('close');
}
}
simplified 2nd dialog call code:
$("#dialog-confirm-elimina").dialog({
autoOpen: false,
resizable: false,
height:220,
modal: true,
buttons: {
'Submit Delete': function() { $('#var_blabla').val('2');
$('#form_submit').submit();
$(this).dialog('close');
},
Cancel: function() {
$(this).dialog('close');
}
}
UPDATE:
<script type="text/javascript">
submited=false;
var toggleOpened = true;
$("#admin_retractil_1").click(function () {
if(!toggleOpened){
$('#admin_retractil_1').toggleClass('toggleGESBHeadown');
toggleOpened=true;
}
else{
$('#admin_retractil_1').toggleClass('toggleGESBHeadown');
toggleOpened=false;
}
var objecto = $(this).attr("id");
$('#' + objecto+"_div").slideToggle("slow");
});
var toggleOpened2 = false;
$("#admin_retractil_2").click(function () {
if(!toggleOpened2){
$('#admin_retractil_2').toggleClass('toggleGESAHeadown');
toggleOpened2=true;
}
else{
$('#admin_retractil_2').toggleClass('toggleGESAHeadown');
toggleOpened2=false;
}
var objecto = $(this).attr("id");
$('#' + objecto+"_div").slideToggle("slow");
});
$(document).ready(function() {
//$( "button").button();
var locked = true;
$( "#EditDataForm").button({ icons: { primary: "ui-icon-locked" }});
$( "#EditDataForm" ).click(function() {
if(locked){
locked = false;
$( "#EditDataForm").button({ icons: { primary: "ui-icon-unlocked" }});
$('#edit_data_admin').slideToggle("slow");
$('#view_data_admin').slideToggle("slow");
}else{
locked = true;
$( "#EditDataForm").button({ icons: { primary: "ui-icon-locked" }});
$('#edit_data_admin').slideToggle("slow");
$('#view_data_admin').slideToggle("slow");
}
return false; });
$( "#DelDataForm").button({ icons: { primary: "ui-icon-scissors" }});
$( "#DelDataForm" ).click(function() {
$('#dialog-confirm-del').dialog('open');
return false; });
/*abre popup de alerta de eliminar */
arrayRemove.push("dialog-confirm-del");
$("#dialog-confirm-del").dialog({
autoOpen: false,
resizable: false,
height:220,
modal: true,
buttons: {
'Remove Stuff': function() {
$('#sel_action_form').val('TypoDesClients_DelDef');
$('#name').val('_____');
$('#form_submit').submit();
$(this).dialog('close');
},
Cancelar: function() {
$(this).dialog('close');
}
}
});
$( "#AcceptChanges").button({ icons: { primary: "ui-icon-check" }});
$("#form_submeter").validator({
position: 'center right',
offset: [0, 0],
message: '<div><em /></div>'
}).bind("onSuccess", function(e, els) {
var numSucceeded = els.length,
numExpected = $(this).data('validator').getInputs().length;
if (numSucceeded === numExpected) {
if(!submited){submited=true;
SubmitFormSV('form_submit', 'action/action_a.php');
return false;
}else return false;
}
});
$( "#radio" ).buttonset();
$("#1_radio").click(function () {
$("#tr_1").show();
});
$("#2_radio").click(function () {
$("#tr_1").hide();
});
});
local lib:
function SubmitFormSV(formul, address)
{
DoChecks();
$("#loading").show("slow");
$.post(baseURL + address, $('#' + formul).serialize(), function(html){
$('#content').slideUp("slow", function () {
AjaxChargePage(html, true);
});
});
$("#loading").hide("slow");
return false;
}
next the next chuck of javascript is similar to this one.
and with this work because destroy didn't:
DoChecks() As:
$.each(arrayRemove, function() {
var element = arrayRemove.pop();
$('#'+element).remove();
});
When you're done with dialog 1 try...
$("#dialog-confirm-elimina").dialog("destroy");
or in your Cancel function...
$(this).dialog("destroy");
The .dialog command creates a new dialog on the element selected. You're doing this twice, and thus having problems. Once the dialog is created it can be reused using open and close methods or destroyed as I've shown above and then recreated.
Ok, then finally I got a solution that make everything works. Instead of using the
$("#dialog-confirm-elimina").dialog("destroy");
I use:
$("#dialog-confirm-elimina").remove();
I still don't know the reason but clearly don't have the problem anymore.
Thanks for the answer though.
PS: If anyone know how could this append I appreciate to illuminate me about it.Thanks
So I am opening a
$('#someelement').dialog({ title.......
autoOpen: false,
//......
buttons: { OK: function() {
$(this).dialog('close');}
},
//....
});
During this time a timer is running, if the user clicks "OK" I don't want anything to occur, but if the timer has run down, I would like change the function. I have tried the following unsuccessfully:
jQuery('#SessionTimeoutWarningDialog').dialog('option', 'buttons', {
'OK': function() {
RedirectToLogin;
jQuery(this).dialog('close');
}
});
What am I doing wrong, or how should I be handling this?
I guess I'll answer my own:
//........
$('#someelement').dialog('option', 'buttons', {
'buttonName': function() {
//your new functionality;
}
});
or with the beforeClose event:
$('#someelement').bind('dialogbeforeclose', function() {
//your new functionality;
});