My problem is javascript not wait for file selection dialog closing.
I have just found an solution that we declare a onChange event for element. So onChange event work right, but script still run before onChange event. They a asynchronous.
I think may be there is a way to check if there is any dialog opening ?
Please help me, 2 day of mine :)
If you want to call back method after dialog is completely opened, you can use using jQuery Promise object as mentioned in this answer:
$("#dialog").dialog({
show: {
effect: "drop",
direction: "up",
duration: 1000
},
hide: {
effect: "drop",
direction: "down",
duration: 1000
},
open: function () {
$(this).parent().promise().done(function () {
console.log("[#Dialog] Opened");
});
},
close: function () {
$(this).parent().promise().done(function () {
console.log("[#Dialog] Closed");
});
}
});
Here is the usual JSFiddle Demo: http://jsfiddle.net/losnir/jcmpm/
Related
I have 7 columns (using html Kendo Grid), and the ID column is a PK of each row and its visible(false).
So.. When you click on any "Name" data, it grabs a PK(the ID that is invisible) of the row you selected, and a modal screen will pop up so you can see more detailed information.
Currently, it is working as expected, however, when the page loads for the first time, I have to double click it to make the modal screen display. Once the modal screen displays, after that, onclick event works as intended.
But I just noticed that when I hit the F12 key to see the log, the number of click increments(like... x2 x3 etc.) everytime onclick event calls.
When I Debug, it hits the debug point in my code but disappears right away so its really hard for me to investigate.
Thank you for your help.
------Column that has the onclick event--------
Columns(columns => {columns.Bound(o => o.SiteID).Visible(false);
columns.Bound(o => o.Name).Title("Your Name").HeaderHtmlAttributes(new {title = "Name(s)"}).ClientTemplate("<a class='nameLink' onclick=\"EditSite(#:SiteID#);\" style='cursor:pointer;' SiteID=\'#=SiteID#\'>#=Name#</a>");
----Jquery onclick event ------
function EditSite(SiteID) {
debugger;
$('.nameLink').on('click', function () {
$('#popUpEdit').dialog({
width: 1000,
height: 920,
show: 'fadein',
hide: 'fadeout',
buttons: { "Close": function () { $(this).dialog("close"); } },
close: function () {
$("#popUpEdit input").val("");
$('#popUpEdit input').prop('checked', false);
$('#statusMessage').html("");
}
});
NameDetails(SiteID);
});
};
You are binding an onClick function every time the EditSite function is called. Try using .off() to unbind any existing handlers.
$('.nameLink').off().on('click', function () { }
Also try wrapping your function so you can pass your SiteID parameter.
(not sure the proper syntax for this)
onclick="EditSite(#:SiteID#)"
Wrapping the function
function EditSite(SiteID) {
return function() {
$('#popUpEdit').dialog({
width: 1000,
height: 920,
show: 'fadein',
hide: 'fadeout',
buttons: { "Close": function () { $(this).dialog("close"); } },
close: function () {
$("#popUpEdit input").val("");
$('#popUpEdit input').prop('checked', false);
$('#statusMessage').html("");
}
});
NameDetails(SiteID);
}
}
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.
please help me on this
Q1: When i clicked the Cancel Button, all the functions seems to repeat calling itself, and I only encounter this in IE
my HTML
<button class="btnCaller">diag caller 1</button>
<button type="button" class="btnCaller">diag caller 2</button >
<table id="diagMenu" style="display:none">
<tr><td>
<input id="anyField"></input>
<button id="cmdInsertNewProject">Ok</button >
<button id="cmdCancelNewProject">Cancel</button >
</td></tr>
</table>
my JS
$(document).ready(function() {
$('.btnCaller').click(function() {
fnAddNewProject()
AddNewProject_ShowUI()
})
});
function fnAddNewProject() {
$('#diagMenu').dialog({
autoOpen: false,
width: 650,
maxHeight: 1000,
maxWidth: 600,
modal: true,
resizable: false,
title: "Insert New Project",
position: "center"
})
$('#btnRun').click(function() {
alert("do other stuff")
})
$('#cmdInsertNewProject').live('click', function() {
InsertNewProject();
})
$('#cmdCancelNewProject').live('click', function() {
$('#diagMenu').dialog('close');
})
}
function InsertNewProject() {
if ($('#anyField').val() == '') {
alert("Fill up field to continue") //dont close the dialog
return false
} else {
//reset and exit
$('#anyField').val('')
$('#diagMenu').dialog('close');
}
}
function AddNewProject_ShowUI() {
$('#diagMenu').dialog('open');
}
i have this on jsFiddle
http://jsfiddle.net/aeris/Qn9HE/
There is a problem with how you're registering the event handlers. The click event handlers should be added only once, so this can be done in ready() method.
Also what ever you are doing in fnAddNewProject() should be done only once, not on every click so you can move the function call to ready()
You can see it working here.
Change
.live('click',
to
.click(
and that should fix your problems, I think.
EDIT:
according to http://api.jquery.com/live/, it appears that the .live() command is deprecated. Try using .on() instead.
So, as it has already been pointed out, the way you are registering your handler with the dialog is causing it to be reregistered every time the event happens. As a result, you get the popup repeatedly (because of the new registration every single time).
With that said, you can make use of jQueryUI's dialog's buttons property to attach your buttons (and the corresponding functions) to your dialog and not have to worry about all this event registration. I didn't complete it, but I updated your example here (you'll note - it's a lot more simple). Please note the "buttons" property that is part of the dialog.
$('#diagMenu').dialog({
autoOpen: false,
width: 650,
maxHeight: 1000,
maxWidth: 600,
modal: true,
resizable: false,
title: "Insert New Project",
position: "center",
buttons: {
"OK": function() {
InsertNewProject();
$(this).dialog("close");
},
"Cancel": function() {
$(this).dialog('close');
}
},
Cancel: function() {
$(this).dialog("close");
}
});
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;
});
I have a problem with the jquery-ui dialog box.
The problem is that when I close the dialog box and then I click on the link that triggers it, it does not pop-up again unless I refresh the page.
How can I call the dialog box back without refreshing the actual page.
Below is my code:
$(document).ready(function() {
$('#showTerms').click(function()
{
$('#terms').css('display','inline');
$('#terms').dialog({
resizable: false,
modal: true,
width: 400,
height: 450,
overlay: { backgroundColor: "#000", opacity: 0.5 },
buttons:{ "Close": function() { $(this).dialog("close"); } },
close: function(ev, ui) { $(this).remove(); },
});
});
Thanks
You're actually supposed to use $("#terms").dialog({ autoOpen: false }); to initialize it.
Then you can use $('#terms').dialog('open'); to open the dialog, and $('#terms').dialog('close'); to close it.
I solved it.
I used destroy instead close function (it doesn't make any sense), but it worked.
$(document).ready(function() {
$('#showTerms').click(function()
{
$('#terms').css('display','inline');
$('#terms').dialog({resizable: false,
modal: true,
width: 400,
height: 450,
overlay: { backgroundColor: "#000", opacity: 0.5 },
buttons:{ "Close": function() { $(this).dialog('**destroy**'); } },
close: function(ev, ui) { $(this).close(); },
});
});
$('#form1 input#calendarTEST').datepicker({ dateFormat: 'MM d, yy' });
});
on the last line, don't use $(this).remove() use $(this).hide() instead.
EDIT: To clarify,on the close click event you're removing the #terms div from the DOM which is why its not coming back. You just need to hide it instead.
I believe you can only initialize the dialog one time. The example above is trying to initialize the dialog every time #terms is clicked. This will cause problems. Instead, the initialization should occur outside of the click event. Your example should probably look something like this:
$(document).ready(function() {
// dialog init
$('#terms').dialog({
autoOpen: false,
resizable: false,
modal: true,
width: 400,
height: 450,
overlay: { backgroundColor: "#000", opacity: 0.5 },
buttons: { "Close": function() { $(this).dialog('close'); } },
close: function(ev, ui) { $(this).close(); }
});
// click event
$('#showTerms').click(function(){
$('#terms').dialog('open').css('display','inline');
});
// date picker
$('#form1 input#calendarTEST').datepicker({ dateFormat: 'MM d, yy' });
});
I'm thinking that once you clear that up, it should fix the 'open from link' issue you described.
For me this approach works:
The dialog may be closed by clicking the X on the dialog or by clicking 'Bewaren'. I'm adding an (arbitrary) id because I need to be sure every bit of html added to the dom is removed afterwards.
$('<div id="dossier_edit_form_tmp_id">').html(data.form)
.data('dossier_id',dossier_id)
.dialog({
title: 'Opdracht wijzigen',
show: 'clip',
hide: 'clip',
minWidth: 520,
width: 520,
modal: true,
buttons: { 'Bewaren': dossier_edit_form_opslaan },
close: function(event, ui){
$(this).dialog('destroy');
$('#dossier_edit_form_tmp_id').remove();
}
});
<button onClick="abrirOpen()">Open Dialog</button>
<script type="text/javascript">
var $dialogo = $("<div></div>").html("Aqui tu contenido(here your content)").dialog({
title: "Dialogo de UI",
autoOpen: false,
close: function(ev, ui){
$(this).dialog("destroy");
}
function abrirOpen(){
$dialogo.dialog("open");
}
});
//**Esto funciona para mi... (this works for me)**
</script>
This is a super old thread but since the answer even says "It doesn't make any sense", I thought I'd add the answer...
The original post used $(this).remove(); in the close handler, this would actually remove the dialog div from the DOM. Attempting to initialize a dialog again wouldn't work because the div was removed.
Using $(this).dialog('destroy') is calling the method destroy defined in the dialog object which does not remove it from the DOM.
From the documentation:
destroy()
Removes the dialog functionality completely. This will return the element back to its >>pre-init state.
This method does not accept any arguments.
That said, only destroy or remove on close if you have a good reason to.
$(this).dialog('destroy');
works!
.close() is mor general and can be used in reference to more objects. .dialog('close') can only be used with dialogs
I use the dialog as an dialog file browser and uploader then I rewrite the code like this
var dialog1 = $("#dialog").dialog({
autoOpen: false,
height: 480,
width: 640
});
$('#tikla').click(function() {
dialog1.load('./browser.php').dialog('open');
});
everything seems to work great.
I had the same problem with jquery-ui overlay dialog box - it would work only once and then stop unless i reload the page. I found the answer in one of their examples -
Multiple overlays on a same page
flowplayer_tools_multiple_open_close
- who would have though, right?? :-) -
the important setting appeared to be
oneInstance: false
so, now i have it like this -
$(document).ready(function() {
var overlays = null;
overlays = jQuery("a[rel]");
for (var n = 0; n < overlays.length; n++) {
$(overlays[n]).overlay({
oneInstance: false,
mask: '#669966',
effect: 'apple',
onBeforeLoad: function() {
overlay_before_load(this);
}
});
}
}
and everything works just fine
hope this helps somebody
O.
The jQuery documentation has a link to this article
'Basic usage of the jQuery UI dialog'
that explains this situation and how to resolve it.