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" );
Related
I have a problem using JQuery and JQuery UI. I have moved to the latest stable version in case that was the issue but I have determined that it isn't.
I am using Chrome
When I use the dialog I created by clicking the element it works without a problem. You can open it and close it mutiple times.
When I use the dialog by clicking the input box (I use the focus event). It opens but it will never close. It dissapears from the screen but the screen remains in modal. If I call the dialog isOpen function I still get true.
I can't find any documentation on this. Can anyone explain the difference in behaviour?
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.css">
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<script>
function RepetitionIntervalInput_display(str, title, okfn, cancelfn) {
$( "#RepetitionIntervalInput_dlg" ).dialog( "open" );
};
$(document).ready(function() {
var ret = "<div id=\"RepetitionIntervalInput_dlg\" title=\"Input Repetition Interval\">";
ret += "</div>";
$("body").append(ret);
$( "#RepetitionIntervalInput_dlg" ).dialog({
autoOpen: false,
width: 500,
modal: true
});
$(document).on('click.tab_stateset', "a[href$='#tab_stateset_delete']", function(event) {
RepetitionIntervalInput_display(
"STRING",
"TITLE",
function () {
console.log("OK");
},
function () {
console.log("CANC");
}
);
event.preventDefault();
});
$(document).on('focus.tab_stateedit', ".tab_stateedit_repetitioninterval", function() {
RepetitionIntervalInput_display(
"STRING",
"TITLE",
function () {
console.log("OK");
},
function () {
console.log("CANC");
}
);
});
});
</script>
</head>
<body>
<h1>A</h1>
aaa
<input type="text" value="NULL" class="tab_stateedit_repetitioninterval"></input>
</body>
</html>
You had a problem with the focus event, which is called twice (on the first click, and once the dialog was closed) and therefore your dialog's "open" was triggered twice.
The fix was to use click on the input instead of focus.
Here is a your snippet with the fix:
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.css">
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<script>
function RepetitionIntervalInput_display(str, title, okfn, cancelfn) {
$( "#RepetitionIntervalInput_dlg" ).dialog( "open" );
};
$(document).ready(function() {
var ret = "<div id=\"RepetitionIntervalInput_dlg\" title=\"Input Repetition Interval\">";
ret += "</div>";
$("body").append(ret);
$( "#RepetitionIntervalInput_dlg" ).dialog({
autoOpen: false,
width: 500,
modal: true
});
$(document).on('click', "a[href$='#tab_stateset_delete']", function(event) {
RepetitionIntervalInput_display(
"STRING",
"TITLE",
function () {
console.log("OK");
},
function () {
console.log("CANC");
}
);
event.preventDefault();
});
$(document).on('click', ".tab_stateedit_repetitioninterval", function() {
RepetitionIntervalInput_display(
"STRING",
"TITLE",
function () {
console.log("OK");
},
function () {
console.log("CANC");
}
);
});
});
</script>
</head>
<body>
<h1>A</h1>
aaa
<input type="text" value="NULL" class="tab_stateedit_repetitioninterval"></input>
</body>
</html>
I have an ajax call:
$('#opt').change(function() {
var option = $("#cdc").val();
$.ajax({
type: "POST",
url: "orari_pause/select_spaccato.php",
data: 'option=' + option,
success: function(whatigot) {
$('#spaccato').html(whatigot);
}, //END OF SUCCESS
complete: function() {
$.getScript("orari_pause/script_opener.js", function() {
});
} //END OF COMPLETE
});
});
script_opener.js
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
title: 'Dettaglio sessioni',
height: 600,
width:800,
modal:true,
resizable: false
});
$( ".opener" ).click(function() {
var id = $(this).attr('id');
$( "#dialog" ).load( "orari_pause/dettaglio_sessioni.php?id="+id );
$( "#dialog" ).dialog( "open" );
$('.ui-widget-overlay').css('background', 'silver');
});
$( "#dialog2" ).dialog({
autoOpen: false,
title: 'Inserimento sessione',
height: 380,
width:300,
modal:true,
resizable: false
});
$( ".opener_session" ).click(function() {
var id = $(this).attr('id');
$( "#dialog2" ).load( "orari_pause/form_nuova_sessione.php?id="+id );
$( "#dialog2" ).dialog( "open" );
$('.ui-widget-overlay').css('background', 'silver');
});
});
In select_spaccato.php I have a button with class opener_session. When I click on it, the event doesn't fire (but the script is loaded correctly). I think is a problem with DOM... I also try to search into Stackoverflow forum with no results.
Can you help me?
EDIT
I try to load the JavaScript code inside whatigot variable, same results. The JS code is loaded, but the events not work.
Use event delegation
$('body').on('click',".opener",function() {
$('body').on('click',".opener_session",function() {
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 am somewhat new to javascript and need to integrate couple plugins for one project. Is there a way to get customer_id (that was gotten when the dialog window was opened, and suggested by autocomplete) into "Create new job" button location.
I want to close first dialog after user clicks "Create new job" and then open new dialog window, but I want to pass customer_id from the first dialog window into second dialog window. There might be some dialog and autocomplete interaction that I might not understand, I just can't get customer_id before I call new_job() function.
$(function() {
$( "#dialog-name" ).dialog({
autoOpen: false,
})});
function customer_funct(){
$( "#dialog-name" ).dialog( "open" )
$(function() {
var name = $( "#name" );
$( "#name" ).autocomplete({
source: "suggest_name.php",
minLength: 2,
select: function( event, ui ) {
var customer_id = ui.item.customer_id;
// I am able to get customer_id here,
//now I need to pass it to the function below.
}
});
$( "#dialog-name" ).dialog({
autoOpen: false,
height: 300,
width: 500,
modal: true,
buttons: {
"Create new job": function() {
$( this ).dialog( "close" );
cust_name = (name.val());
// is there any way to get "customer_id" at this location
// before I call new_job() function after the user selects customer
// from the database and clicks "Create new job"?
new_job(customer_id, cust_name);
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
});
By default the select event ui parameter only contains a "label" and "value" property
JQuery UI Autocomplete Success Event
In order to access a custom property you would need to explicitly add it after you retrieve your data via an ajax call. Similar to this post.
I guess I answer the question myself after some thinking. If someone else is working on jQuery autocomplete and dialog interaction, and if you need to open the new dialog window (in new_job(customer_id))with the id value from the previous dialog window and close that previous dialog window on success:
$(function() {
$( "#dialog-name" ).dialog({
autoOpen: false,
})});
function customer_funct(){
$( "#dialog-name" ).dialog( "open" )
$(function() {
var name = $( "#name" );
$( "#name" ).autocomplete({
source: "suggest_name.php",
minLength: 2,
select: function( event, ui ) {
var customer_id = ui.item.customer_id;
new_job(customer_id);
$(this).val(''); return false;
}
});
$( "#dialog-name" ).dialog({
autoOpen: false,
height: 300,
width: 500,
modal: true,
buttons: {
"Create new job": function() {
alert('Please select customer or click "Add New" customer');
},
Cancel: 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