I need to open (call) a ui-dialog box from a function javascript. Currently I have these two codes:
setTimeout(function() {
var zone = event.getTarget().getName();
var x = window.confirm("Do you want to continue?");
if (x) {
readData();
} else {
e.preventDefault();
}
}, 0);
and,
$( "#dialogZone" ).dialog({
autoOpen: false,
show: "blind",
hide: "blind",
modal: true,
buttons: {
"YES": function() {
$(this).dialog("close");
readData();
},
Cancel: function() {
$(this).dialog("close");
//avoid some info windows in #tab1
}
}
});
$( "#openEvent" ).click(function() {
$( "#dialogZone" ).dialog( "open" );
return false;
});
});
Please, can I have some thing like...
setTimeout(function() {
// show ui-dialogbox
}
Thanks in advance for your answers. Regards.
You already have it in your code:
$( "#dialogZone" ).dialog( "open" );
to open dialog, so put this line in your timeouted function
Related
So I have a confirmation dialog box that opens when button is clicked, but window.open in javascript opens it in new tab. I tried lot of things like _self, _top but it doesn't work. Is there any way I can open this in same tab/page.
Here is the code:
JAVASCRIPT
$('.sample').on("click", function (e)
{
var link = this;
e.preventDefault();
$( "#ConfirmDialog" ).dialog(
{
resizable: false,
width: 300,
buttons:
{
"Yes": function()
{
window.open($(link).attr("href"));
$( this ).dialog( "close" );
},
Cancel: function()
{
$( this ).dialog( "close" );
}
}
});
});
To change the current page's url, simply set window.location to the new url
$('.sample').on("click", function (e) {
....
"Yes": function() {
window.location = $(link).attr("href")
},
....
});
I have answered in the comments, but since this is what you are looking for, I'm adding it as an answer too.
I have seen this similar closing jquery modal dialog is slow question, but in this example, it does not use buttons attribute which is my issue. How can I close the dialog without using $( this ).dialog( "close" ) after a function is called?
see this FIDDLE for demo
var begin = new Date();
$(function() {
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Delete all items": function() {
// $( this ).dialog( "close" ); too slow
foo();
},
Cancel: function() {
$( this ).dialog( "close" ); too slow
foo();
}
}
});
});
u can trigger close just after putting your close code post callling foo(); or better can use callback functions.
see below code , hope it helps.
var begin = new Date();
$(function() {
$("#dialog-confirm").dialog({
resizable: false,
height: 140,
modal: true,
buttons: {
"Delete all items": function() {
// $( this ).dialog( "close" );
foo();
},
Cancel: function() {
foo(clsPopUp);
}
}
});
});
function clsPopUp() {
$("#dialog-confirm").dialog("close");
}
function foo(callback) {
var end = new Date();
alert((end - begin) / 1000);
callback();
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<body>
<div id="dialog-confirm">
<p>Are you sure?</p>
</div>
</body>
Try:
$( "#dialog-confirm" ).parent().hide();
Instead of:
$( this ).dialog( "close" );
I am using jQuery validate: http://bassistance.de/jquery-plugins/jquery-plugin-validation/ and cannot reset the validation messages to a default state. ie; not highlighted. What I trying to achieve, is if I close my dialog window, then the validator resets itself to a state as if the window was first opened. What is happening however, is when I close dialog by clicking the X and reopen, the error messages are still there. I am not sure where resetForm() should go and if I have to prepare a dialog ("close") procedure.
I have only posted the code that I think is relevant to the problem.
I would be grateful if someone could point out my error. Thanks
else if (this.name === 'Administration') {
$("#formShow").show();
// admin clicked
//$("#confirm_department").show().html("You have selected administration");
$("#formImage .col_1 li").hide();
var $dialog = $('#frmreport');
$dialog.dialog({
autoOpen: true,
modal: true,
title: 'Submit a ' + name + ' report',
width: 500,
height: 400,
draggable: false,
resizable: true,
// buttons: {
// Close: function() {
// $( this ).dialog( "close" );
// $("#frmreport").get(0).reset();
// }
// }
});
//$( '#frmreport' ).dialog( 'close' );
//$("#frmreport").get(0).reset();
//console.log(name);
$('input[name=dept]').val(name);
$(".subtitle").text("Submit " + name + " feedback report");
//code
}
EDIT: Updated code as per your comment
else if(this.name === 'Administration') {
$("#formShow").show();
// admin clicked
//$("#confirm_department").show().html("You have selected administration");
$("#formImage .col_1 li").hide();
var $dialog = $('#frmreport');
$dialog.dialog({
autoOpen: true,
modal: true,
title: 'Submit a ' +name+ ' report',
width: 500,
height: 400,
draggable: false,
resizable: true,
Close: function(event, ui) {
$("#frmreport").validate().resetForm();
}
// buttons: {
// Close: function() {
// $( this ).dialog( "close" );
// $("#frmreport").get(0).reset();
// }
// }
});
//$( '#frmreport' ).dialog( 'close' );
//$("#frmreport").get(0).reset();
//console.log(name);
$('input[name=dept]').val(name);
$(".subtitle").text("Submit " + name + " feedback report");
//code
}
Try this in your Close function:
$dialog.dialog({
close: function(event, ui) {
$("#frmreport").validate().resetForm();
}
});
This is the working solution !
var $form = $('#userForm');
$form.find("[data-valmsg-replace]")
.removeClass("field-validation-error")
.addClass("field-validation-valid")
.empty();
I wrote a function named confirmMessage(msg) to work with onclick event of links:
Delete
The code of the function is:
<script>
function confirmMessage(msg){
p = true
elementHtml = '<div id="ConfirmMessage">'+msg+'</div>';
$("body").append(elementHtml);
$("#ConfirmMessage").dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Delete": function() {
p = true;
$( this ).dialog( "close" );
},
Cancel: function() {
p = false;
$( this ).dialog( "close" );
}
}
}
);
return p;
}
</script>
In the function above I set a variable p to be case container i.e. true or false and initially I set it to be true. Also, The message element is created on the fly. However, when I click on the delete link, it dose not wait till I decide to delete or cancel and it go to delete.
When I set p initially to be false, it does not do anything else closing the dialog what ever the decision.
Where is the mistake in this code?!
jQuery dialog asynchronous -- it doesn't block. The function will go on and return without waiting for a response. You will need to use the following code:
function confirmMessage(msg,goto){
elementHtml = '<div id="ConfirmMessage">'+msg+'</div>';
$("body").append(elementHtml);
$("#ConfirmMessage").dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Delete": function() {
$( this ).dialog( "close" );
window.location.href=goto;
},
Cancel: function() {
$( this ).dialog( "close" );
},
},
});
return false;
}
and:
Delete
Changing so the return is not what is actually determining what happens.
See this JSFiddle.
Your mistake is in thinking that the function waits for you to click on one of the buttons before returning. .dialog() displays the dialog and returns immediately. Responding to user interactions must be done in callback functions.
Use the close: handler to run code when the dialog is closed:
$("#ConfirmMessage").dialog({
resizable: false,
height:140,
modal: true,
close: function() {
if (p) {
...
} else {
...
}
},
buttons: {
"Delete": function() {
p = true;
$( this ).dialog( "close" );
},
Cancel: function() {
p = false;
$( this ).dialog( "close" );
}
}
}
);
you "return p" is executed before you are even able to see the modal window. your dialog method is executed asynchronously
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