Click in jQuery UI dialog box triggerd multiple times - javascript

I have a strange problem with a delete button in a jQuery dialog box. What should happen is that once the delete button is clicked, it looks up the value of the hidden input button and sends that value to an ajax call to delete the content. So every click should only show the single id that belongs to the last clicked button.
What actually happens with the first click it that it shows the correct value. But when you then click the next button, it will first show the previous id and then the new id, so the ajax call is made twice. If you would click on a third button, it will show three ids, and make three ajax calls which is not what should happen. It should stick with a single ajax call with each click and only show the latest id.
You can see an example here http://jsfiddle.net/uF5fX/11/, with the ids shown in the console.
Any ideas on what I'm doing wrong, and how to fix this?
$("#item-list").on( "click", ".delete-item", function( e ) {
var dialogBox = $("#delete-confirmation"),
storeId = $(this).next('input[name="store_id"]').val();
console.log( 'main clicked store id = ' + storeId );
dialogBox.dialog({
width: 325,
resizable : false,
modal: true,
minHeight: 0
});
$(".ui-dialog-titlebar").remove();
dialogBox.find(".button-secondary").on( "click", function() {
dialogBox.dialog("close");
});
dialogBox.find(".button-primary").on( "click", function( elem ) {
console.log( 'click delete btn' );
console.log( 'ajax store id = ' + storeId );
dialogBox.dialog("close");
//make a singe ajax call with the last storeId
//elem.stopImmediatePropagation();
elem.stopPropagation();
elem.preventDefault();
return false;
});
e.stopPropagation();
e.preventDefault();
return false;
});
Structure of the html
<ul id="item-list">
<li>
<input type="button" value="Delete" name="text" class="delete-item" />
<input type="hidden" value="60" name="store_id" />
</li>
</ul>
Normally when multiple clicks are triggered it can be fixed with return false, or preventDefault / stopPropagation but it makes no difference here?


Every time you click 'delete-item', dialogBox buttons bind anther new event.
dialogBox.dialog({
width: 325,
resizable : false,
modal: true,
minHeight: 0
});
$(".ui-dialog-titlebar").remove();
var btn1 = dialogBox.find(".button-secondary");
var btn2 = dialogBox.find(".button-primary");
btn1.on( "click", function() {
dialogBox.dialog("close");
btn1.unbind('click');
btn2.unbind('click');
});
btn2.on( "click", function( elem ) {
console.log( 'click delete btn' );
console.log( 'ajax store id = ' + storeId );
dialogBox.dialog("close");
//make a singe ajax call with the last storeId
//elem.stopImmediatePropagation();
elem.stopPropagation();
elem.preventDefault();
btn1.unbind('click');
btn2.unbind('click');
return false;
});


A more structured way to approach this issue would be defining standard actions for your close and Cancel event of the dialog.
dialog = $( "#dialog-form" ).dialog({
autoOpen: false,
hide: { effect: "blind", duration: 1000 },
show: { effect: "blind", duration: 1000 },
height: 600,
width: 350,
modal: true,
buttons: {
Cancel: function() {
console.log('dialog cancelled');
dialog.dialog( "close" ); // trigger the close event
}
},
close: function() {
console.log('dialog closed');
var btn2 = dialog.find("#create-user"); // change the #id to the name of your button
btn2.unbind('click'); //unbind the button.
}
});
The next time you then trigger the dialog and bind the on("click") event listener, it will only be added once instead of incrementing the amount of binds.
It is then unbound every time the dialog is closed (and cancelled since it triggers the close event).

Related

Binding two click events on one button with different attributes not working

Anyway, I got this button that is supposed to open my nav.
HAML:
%button#nav-toggle{ :navigate => 'false' } Menu
HTML:
<button id='nav-toggle' navigate='false'>Menu</button>
And I'm binding two clicks on it like this:
jQuery
$(document).ready(function(){
$("#nav-toggle[navigate='false']").click(function(){
console.log("opening nav");
$("#nav-toggle").attr('navigate','true');
$( "#masthead" ).animate({
height:'100vh',
}, {
duration: 1000,
queue: false,
done: function() {
console.log("first done");
}
}
);
});
$("#nav-toggle[navigate='true']").click(function(){
console.log("closing nav");
$("#nav-toggle").attr('navigate','false');
$( "#masthead" ).animate({
height:'10vh',
}, {
duration: 1000,
queue: false,
done: function() {
console.log("second done");
}
}
);
});
});
For some reason, when I click the button for the second time (When its navigate-attribute is set to true, it still launches the first event of those two.
What am I missing here?
Full code here: Codepen

You need to delegate the event.
Take a look at this
http://codepen.io/anon/pen/jAjkpA?editors=1010
You need to bind the event to a parent in this case the .hamb-container.
Here's a link to understand how delegation and event bubbling works https://learn.jquery.com/events/event-delegation/.
Basically as a summary:
When an event is triggered it bubbles the event all the way up to your root HTML tag.
That is good for when you want to add dynamic content or in your case pick out an attribute that changes dynamically.
So how do we bind to dynamic content? Simple. We surround them with a static container and bind to that instead. Additionally, we let JQuery know what the dynamic content will be. So Jquery will listen for an event on the static element and check if it actually originated from the element you were looking for.
Something like this
$( "#staticAncestor" ).on( "click", "#DynamicContent", function( event ) {
});
Hope this helps. Happy coding!

For some reason, when I click the button for the second time (When its navigate-attribute is set to true, it still launches the first event of those two.
What am I missing here guys and girls?
You missed nothing.
An event is bound to an element not to a property/attribute.
Because .click a shortcut for .on( "click", handler ):
.on( events [, selector ] [, data ], handler ): Attach an event handler function for one or more events to the selected elements
So, you can change your code like:
$(function () {
$("#nav-toggle[navigate='false']").click(function(){
console.log("opening nav");
var attr= ($("#nav-toggle").attr('navigate') == 'false' ? false : true);
$("#nav-toggle").attr('navigate',!attr);
if (!attr) {
$( "#masthead" ).animate({
height:'100vh',
}, {
duration: 1000,
queue: false,
done: function() {
console.log("first done");
}
}
);
} else {
$( "#masthead" ).animate({
height:'10vh',
}, {
duration: 1000,
queue: false,
done: function() {
console.log("second done");
}
}
);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button id='nav-toggle' navigate='false'>Menu</button>

Is there any way to capture only 'X' event from modal dialogue using jquery?

I am having modal dialouge this way,
$("#dialog").dialog({
autoOpen: false,
resizable: false,
width: 400,
height: 140,
modal: true,
buttons: {
"SUBMIT": function() {
$(this).dialog("close");
},
"CANCEL": function() {
$(this).dialog("close");
}
},
close: function() {
alert('close');
}
});
And i am trying to get alert('close') once i click x button of the modal dialouge.
But the issue is this alert('close') is being invoked even after submit bitton and cancel button click of my modal '#dialog'.
Is there any way that i can get alert, only on clicking 'X' box of my dialouge and not on clicking sublit or cancel buttons.
However $(this).dialog("close"); should be there in submit and cancel button events.
If i remove $(this).dialog("close"); its working.
I want to get alert only on clickin 'X' and not on the modal dialouge close.
Can anyone help me in this issue?
Thanks

The close() callback will pass an event object which includes a .currentTarget property representing the button which was pressed. You can use that to find out which button was clicked. For example, try something like
$("#dialog").dialog({
close: function(event,ui) {
if($(event.currentTarget).hasClass('ui-dialog-titlebar-close')
{
alert('close');
}
}
You could also try directly creating an on("click") function directly on the X button yourself, but that can be a bit flaky.

closing a jquery-ui dialog one at a time

I'm having an issue with multiple jQuery UI dialogs. What I want is that I can have multiple dialogs, and a click on a button with the class ".close-modal" will only close the dialog in which that button was located. Now, first for a little background: I have a simple function in the "main" parent of the site, which will open a modal dialog by clicking on a link with the class ".modal";
In the parent
function modal( href, title ) {
var $dialog = $('<div></div>');
$dialog.html('<iframe class="modal" name="' + title + '" style="border: 0px;" src="' + href + '" width="100%" height="100%"></iframe>');
$dialog.dialog({
autoOpen: false,
modal: true,
height: 650,
width: 950,
title: title
});
$dialog.dialog( 'open' );
$(document).bind( 'close-dialog', function( ) {
$dialog.dialog( 'close' );
});
}
$('a.modal').click( function( event ) {
event.preventDefault( );
modal( $(this).attr( 'href' ), $(this).attr( 'title' ) );
}
This code works the way I want it to. To open a dialog from a dialog, I call the parent window's modal function with the correct parameters, so that multiple dialogs can be displayed within the parent:
In the dialog
( function( $ ) {
$(document).ready( function( ) {
$('a.modal').click( function( event ) {
event.preventDefault( );
parent.modal( $(this).attr( 'href' ), $(this).attr( 'title' ) );
}
/** Trigger the close-dialog event on the parent to close the current dialog. */
$('.close-dialog').click( function( ) {
parent.jQuery( parent.document ).trigger( 'close-dialog' );
});
});
})( jQuery );
So, in essence; I've defined an event on the parent window ("close-dialog"), which can be called by the code within the iframe which will call $dialog.dialog( 'close' ); This works brilliantly; I can create multiple dialogs, even from within dialogs, but the issue is that once I click a button.close-dialog, it closes all of my dialogs.
Is there any way to determine from which dialog the event was called? Or bind the event to the current dialog?

You could use jquery modal's buttons option.
<script>
$(function() {
$( ".myModals" ).dialog({
modal: true,
buttons: {
Close: function() {
$( this ).dialog( "close" );
}
}
});
});
</script>
This should do it for all your modals in one go, and the buttons it creates only apply to themselves. Hope that helps!

Script within a jQueryUI modal dialog box only works once

I have a table that, when any row is clicked, launches a jQueryUI modal dialog box to allow users to edit that record. I use the following script which seems to work, successfully loading the relevant record's details in using AJAX:
$("#datatbl tr").bind('click', function() {
var url = 'item_edit.asp?id='+$(this).attr("data-myid");
var dialog = $('<div style="display:hidden" title="Record details:"></div>').appendTo('body');
// load remote content
dialog.load(
url,
{},
function (responseText, textStatus, XMLHttpRequest) {
dialog.dialog({
height: 440,
width: 550,
autoOpen: false,
modal: true,
buttons: {
"Update this record": function() {
$('#editform').submit();
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
dialog.dialog('open');
}
);
//prevent the browser to follow the link
return false;
});
It works ok the first time I click on a record, but if I click cancel and try to edit another record, the dialog box does appear (with the correct record details) however, no scripts within the dialog box work - eg: there's a jqueryUI datepicker input and some validation.
There are no javascript errors and, from my limited understanding of FireBug, I can't spot anything going wrong so I would appreciate some advice how to proceed, thanks!
EDIT: Argh! Sometimes, it takes something like typing it out here to spot the obvious. I just realised that the DIV created for the dialog box doesn't get destroyed when the box closes. I've added a line to do this and it now works. Thanks for listening. :)
For future reference, I added an ID to the DIV created in 'var dialog' and removed it in the Cancel function:
Cancel: function() {
$( this ).dialog( "close" );
$('#dialogbox').remove();
}
I'd still appreciate if anybody suggests a better way to handle this behaviour.

I fixed it: the DIV created for the dialog box doesn't get destroyed when the box closes.
I added an ID to the DIV created in 'var dialog' and removed the DIV in the Cancel function:
Cancel: function() {
$( this ).dialog( "close" );
$('#dialogbox').remove();
}

You can create the dialog at one time only, not on every load of its content, just set the autoOpen to false.
<div id="dialog">
<div id="content" style="display:hidden" title="Record details:"></div>
</div>
$('#dialog').dialog({
height: 440,
width: 550,
autoOpen: false,
modal: true,
buttons: {
"Update this record": function() {
$('#editform').submit();
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
$("#datatbl tr").bind('click', function() {
var url = 'item_edit.asp?id='+$(this).attr("data-myid");
// load remote content
$('#content').load(url);
$('#dialog').dialog('open');
return false;
}};

jQuery UI - Close Dialog When Clicked Outside

I have a jQuery UI Dialog that gets displayed when specific elements are clicked. I would like to close the dialog if a click occurs anywhere other than on those triggering elements or the dialog itself.
Here's the code for opening the dialog:
$(document).ready(function() {
var $field_hint = $('<div></div>')
.dialog({
autoOpen: false,
minHeight: 50,
resizable: false,
width: 375
});
$('.hint').click(function() {
var $hint = $(this);
$field_hint.html($hint.html());
$field_hint.dialog('option', 'position', [162, $hint.offset().top + 25]);
$field_hint.dialog('option', 'title', $hint.siblings('label').html());
$field_hint.dialog('open');
});
/*$(document).click(function() {
$field_hint.dialog('close');
});*/
});
If I uncomment the last part, the dialog never opens. I assume it's because the same click that opens the dialog is closing it again.
Final Working Code
Note: This is using the jQuery outside events plugin
$(document).ready(function() {
// dialog element to .hint
var $field_hint = $('<div></div>')
.dialog({
autoOpen: false,
minHeight: 0,
resizable: false,
width: 376
})
.bind('clickoutside', function(e) {
$target = $(e.target);
if (!$target.filter('.hint').length
&& !$target.filter('.hintclickicon').length) {
$field_hint.dialog('close');
}
});
// attach dialog element to .hint elements
$('.hint').click(function() {
var $hint = $(this);
$field_hint.html('<div style="max-height: 300px;">' + $hint.html() + '</div>');
$field_hint.dialog('option', 'position', [$hint.offset().left - 384, $hint.offset().top + 24 - $(document).scrollTop()]);
$field_hint.dialog('option', 'title', $hint.siblings('label').html());
$field_hint.dialog('open');
});
// trigger .hint dialog with an anchor tag referencing the form element
$('.hintclickicon').click(function(e) {
e.preventDefault();
$($(this).get(0).hash + ' .hint').trigger('click');
});
});

Sorry to drag this up after so long but I used the below. Any disadvantages? See the open function...
$("#popup").dialog(
{
height: 670,
width: 680,
modal: true,
autoOpen: false,
close: function(event, ui) { $('#wrap').show(); },
open: function(event, ui)
{
$('.ui-widget-overlay').bind('click', function()
{
$("#popup").dialog('close');
});
}
});

Forget using another plugin:
Here are 3 methods to close a jquery UI dialog when clicking outside popin:
If the dialog is modal/has background overlay: http://jsfiddle.net/jasonday/6FGqN/
jQuery(document).ready(function() {
jQuery("#dialog").dialog({
bgiframe: true,
autoOpen: false,
height: 100,
modal: true,
open: function(){
jQuery('.ui-widget-overlay').bind('click',function(){
jQuery('#dialog').dialog('close');
})
}
});
});
If dialog is non-modal Method 1: method 1: http://jsfiddle.net/jasonday/xpkFf/
// Close Pop-in If the user clicks anywhere else on the page
jQuery('body')
.bind(
'click',
function(e){
if(
jQuery('#dialog').dialog('isOpen')
&& !jQuery(e.target).is('.ui-dialog, a')
&& !jQuery(e.target).closest('.ui-dialog').length
){
jQuery('#dialog').dialog('close');
}
}
);
Non-Modal dialog Method 2: http://jsfiddle.net/jasonday/eccKr/
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
minHeight: 100,
width: 342,
draggable: true,
resizable: false,
modal: false,
closeText: 'Close',
open: function() {
closedialog = 1;
$(document).bind('click', overlayclickclose);
},
focus: function() {
closedialog = 0;
},
close: function() {
$(document).unbind('click');
}
});
$('#linkID').click(function() {
$('#dialog').dialog('open');
closedialog = 0;
});
var closedialog;
function overlayclickclose() {
if (closedialog) {
$('#dialog').dialog('close');
}
//set to one because click on dialog box sets to zero
closedialog = 1;
}
});

Check out the jQuery Outside Events plugin
Lets you do:
$field_hint.bind('clickoutside',function(){
$field_hint.dialog('close');
});

Just add this global script, which closes all the modal dialogs just clicking outsite them.
$(document).ready(function()
{
$(document.body).on("click", ".ui-widget-overlay", function()
{
$.each($(".ui-dialog"), function()
{
var $dialog;
$dialog = $(this).children(".ui-dialog-content");
if($dialog.dialog("option", "modal"))
{
$dialog.dialog("close");
}
});
});;
});

$(".ui-widget-overlay").click (function () {
$("#dialog-id").dialog( "close" );
});
Fiddle showing the above code in action.

I had to do two parts. First the outside click-handler:
$(document).on('click', function(e){
if ($(".ui-dialog").length) {
if (!$(e.target).parents().filter('.ui-dialog').length) {
$('.ui-dialog-content').dialog('close');
}
}
});
This calls dialog('close') on the generic ui-dialog-content class, and so will close all dialogs if the click didn't originate in one. It will work with modal dialogs too, since the overlay is not part of the .ui-dialog box.
The problem is:
Most dialogs are created because of clicks outside of a dialog
This handler runs after those clicks have created a dialog and bubbled up to the document, so it immediately closes them.
To fix this, I had to add stopPropagation to those click handlers:
moreLink.on('click', function (e) {
listBox.dialog();
e.stopPropagation(); //Don't trigger the outside click handler
});

This question is a bit old, but in case someone wants to close a dialog that is NOT modal when user clicks somewhere, you can use this that I took from the JQuery UI Multiselect plugin. The main advantage is that the click is not "lost" (if user wants to click on a link or a button, the action is done).
$myselector.dialog({
title: "Dialog that closes when user clicks outside",
modal:false,
close: function(){
$(document).off('mousedown.mydialog');
},
open: function(event, ui) {
var $dialog = $(this).dialog('widget');
$(document).on('mousedown.mydialog', function(e) {
// Close when user clicks elsewhere
if($dialog.dialog('isOpen') && !$.contains($myselector.dialog('widget')[0], e.target)){
$myselector.dialog('close');
}
});
}
});

You can do this without using any additional plug-in
var $dialog= $(document.createElement("div")).appendTo(document.body);
var dialogOverlay;
$dialog.dialog({
title: "Your title",
modal: true,
resizable: true,
draggable: false,
autoOpen: false,
width: "auto",
show: "fade",
hide: "fade",
open:function(){
$dialog.dialog('widget').animate({
width: "+=300",
left: "-=150"
});
//get the last overlay in the dom
$dialogOverlay = $(".ui-widget-overlay").last();
//remove any event handler bound to it.
$dialogOverlay.unbind();
$dialogOverlay.click(function(){
//close the dialog whenever the overlay is clicked.
$dialog.dialog("close");
});
}
});
Here $dialog is the dialog.
What we are basically doing is to get the last overlay widget whenever this dialog is opened and binding a click handler to that overlay to close $dialog as anytime the overlay is clicked.

no need for the outside events plugin...
just add an event handler to the .ui-widget-overlay div:
jQuery(document).on('click', 'body > .ui-widget-overlay', function(){
jQuery("#ui-dialog-selector-goes-here").dialog("close");
return false;
});
just make sure that whatever selector you used for the jQuery ui dialog, is also called to close it.. i.e. #ui-dialog-selector-goes-here

This doesn't use jQuery UI, but does use jQuery, and may be useful for those who aren't using jQuery UI for whatever reason. Do it like so:
function showDialog(){
$('#dialog').show();
$('*').on('click',function(e){
$('#zoomer').hide();
});
}
$(document).ready(function(){
showDialog();
});
So, once I've shown a dialog, I add a click handler that only looks for the first click on anything.
Now, it would be nicer if I could get it to ignore clicks on anything on #dialog and its contents, but when I tried switching $('*') with $(':not("#dialog,#dialog *")'), it still detected #dialog clicks.
Anyway, I was using this purely for a photo lightbox, so it worked okay for that purpose.

The given example(s) use one dialog with id '#dialog', i needed a solution that close any dialog:
$.extend($.ui.dialog.prototype.options, {
modal: true,
open: function(object) {
jQuery('.ui-widget-overlay').bind('click', function() {
var id = jQuery(object.target).attr('id');
jQuery('#'+id).dialog('close');
})
}
});
Thanks to my colleague Youri Arkesteijn for the suggestion of using prototype.

This is the only method that worked for me for my NON-MODAL dialog
$(document).mousedown(function(e) {
var clicked = $(e.target); // get the element clicked
if (clicked.is('#dlg') || clicked.parents().is('#dlg') || clicked.is('.ui-dialog-titlebar')) {
return; // click happened within the dialog, do nothing here
} else { // click was outside the dialog, so close it
$('#dlg').dialog("close");
}
});
All credit goes to Axle
Click outside non-modal dialog to close

For those you are interested I've created a generic plugin that enables to close a dialog when clicking outside of it whether it a modal or non-modal dialog. It supports one or multiple dialogs on the same page.
More information here: http://www.coheractio.com/blog/closing-jquery-ui-dialog-widget-when-clicking-outside
Laurent

I use this solution based in one posted here:
var g_divOpenDialog = null;
function _openDlg(l_d) {
// http://stackoverflow.com/questions/2554779/jquery-ui-close-dialog-when-clicked-outside
jQuery('body').bind(
'click',
function(e){
if(
g_divOpenDialog!=null
&& !jQuery(e.target).is('.ui-dialog, a')
&& !jQuery(e.target).closest('.ui-dialog').length
){
_closeDlg();
}
}
);
setTimeout(function() {
g_divOpenDialog = l_d;
g_divOpenDialog.dialog();
}, 500);
}
function _closeDlg() {
jQuery('body').unbind('click');
g_divOpenDialog.dialog('close');
g_divOpenDialog.dialog('destroy');
g_divOpenDialog = null;
}

I had same problem while making preview modal on one page. After a lot of googling I found this very useful solution. With event and target it is checking where click happened and depending on it triggers the action or does nothing.
Code Snippet Library site
$('#modal-background').mousedown(function(e) {
var clicked = $(e.target);
if (clicked.is('#modal-content') || clicked.parents().is('#modal-content'))
return;
} else {
$('#modal-background').hide();
}
});

İt's simple actually you don't need any plugins, just jquery or you can do it with simple javascript.
$('#dialog').on('click', function(e){
e.stopPropagation();
});
$(document.body).on('click', function(e){
master.hide();
});

I don't think finding dialog stuff using $('.any-selector') from the whole DOM is so bright.
Try
$('<div />').dialog({
open: function(event, ui){
var ins = $(this).dialog('instance');
var overlay = ins.overlay;
overlay.off('click').on('click', {$dialog: $(this)}, function(event){
event.data.$dialog.dialog('close');
});
}
});
You're really getting the overlay from the dialog instance it belongs to, things will never go wrong this way.

With the following code, you can simulate a click on the 'close' button of the dialog (change the string 'MY_DIALOG' for the name of your own dialog)
$("div[aria-labelledby='ui-dialog-title-MY_DIALOG'] div.ui-helper-clearfix a.ui-dialog-titlebar-close")[0].click();

Smart Code:
I am using following code so that every thing remains clear and readable.
out side body will close the dialog box.
$(document).ready(function () {
$('body').on('click', '.ui-widget-overlay', closeDialogBox);
});
function closeDialogBox() {
$('#dialog-message').dialog('close');
}

I ended up using this code which should work on any open dialogs on the page, ignores clicks on tooltips, and cleans up the resources of the dialog being closed as well.
$(document).mousedown(function(e) {
var clicked = $(e.target); // get the element clicked
if (clicked.is('.ui-dialog-content, .ui-dialog-titlebar, .ui-tooltip') || clicked.parents().is('.ui-dialog-content, .ui-dialog-titlebar, .ui-tooltip')) {
return; // click happened within the dialog, do nothing here
} else { // click was outside the dialog, so close it
$('.ui-dialog-content').dialog("close");
$('.ui-dialog-content').dialog("destroy");
$('.ui-dialog-content').detach();
}
});

I just ran across the need to close .dialog(s) with an out of element click. I have a page with a lot of info dialogs, so I needed something to handle them all. This is how I handled it:
$(document).ready(function () {
$(window).click(function (e) {
$(".dialogGroup").each(function () {
$(this).dialog('close');
})
});
$("#lostEffClick").click(function () {
event.stopPropagation();
$("#lostEffDialog").dialog("open");
};
});

Categories