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
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 am trying to use a dialogue box modal for displaying terms and condition on my webpage. But at button disagree the webpage doesnot close while calling function window.close. I want to close the recent page after clicking the button disagree
Below pasted is the sample code I am having problem at.
<script>
$(function() {
$( "#dialog-confirm" ).dialog({
resizable: false,
height:600,
width:400,
modal: true,
buttons: {
'Agree': function() {
$( this ).dialog( window.location.assign('../mdv/main.php') );
},
'Disagree': function() {
$( this ).dialog( window.close() );
}
}
});
});
</script>
Thank you in advance.
You do it like this:
<script>
$(function() {
$( "#dialog-confirm" ).dialog({
resizable: false,
height:600,
width:400,
modal: true,
buttons: {
'Agree': function() {
$( this ).dialog( window.location.assign('../mdv/main.php') );
},
'Disagree': function() {
$( this ).dialog("close");
}
}
});
});
</script>
You can either close the dialog itself using the code above or you can close the window if it's a popup window opened previously via JavaScript.
In which case you'll need the reference of that to invoke the close method.
However you can't close an entire webpage/tab with JavaScript which is a javaScript limitation. As I mentioned, you can only close it if it was previously opened with JavaScript.
I want to use translations in my code, they are coming from PHP/MySql and are converted into an javascript array:
var translate = <?= json_encode($Object->translate);?>;
Translations are available in Javascript (tested).
Now, I want to use them in my Javascript code, by example Jquery UI dialog:
$("#logoff").click(function(){
var action = "logoff";
var btnLogoff = translate["dialog/buttonLogoff"]; // this gives the translation from the array
var btnCancel = translate["dialog/buttonCancel"]; // this gives the translation from the array
$("#dialog").dialog(
{
title: translate["dialog/titleLogoff"],
modal: true,
resizable: false,
buttons: {
btnLogoff : function() {
var loadUrl = "includes/_ajax/actions.ajax.php";
$.post(loadUrl,{action:action}, function(data) {
if(data)
location.reload();
});
$( this ).dialog( "close" );
},
btnCancel: function() {
$( this ).dialog( "close" );
}
}
}
);
$("#dialog").html("<span class='ui-icon ui-icon-alert' style='float: left; margin: 0 7px 20px 0;'></span>" + translate["dialog/textLogoff"]);
});
The problem is dat the property btnLogoff is not showing the translated text but instead shows itself ("btnLogoff").
In the last section, translate["dialog/textLogoff"] is translated like it is meant to be. I am clearly doin something wrong. Can I use the var as a property id? How?
I think you aren't using the jQuery.dialog API fully. See http://api.jqueryui.com/dialog/#option-buttons
Have a try using the 'text' property of the buttons configuration:
$("#dialog").dialog(
{
title: translate["dialog/titleLogoff"],
modal: true,
resizable: false,
buttons: [
{
text : btnLogoff,
click : function() {
var loadUrl = "includes/_ajax/actions.ajax.php";
$.post(loadUrl,{action:action}, function(data) {
if(data)
location.reload();
});
$( this ).dialog( "close" );
}
}
,
{
text : btnCancel,
click: function() {
$( this ).dialog( "close" );
}
}
]
}
);
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
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