How to destroy YUI Panel on close? - javascript

I want to be able to destroy a YUI Panel when the user clicks the close button.
I have tried using hideEvent but that does not work. I'm assuming since the object is still active and therefore cannot be destroyed:
panel.hideEvent.subscribe(function(o) {
panel.destroy();
});
Is there a way I can destroy the Panel when a user clicks close? The close button is not assigned an ID although it is assigned a class:
<a class="container-close" href="#">Close</a>

Ending up having to use the setTimeout() function:
panel.hideEvent.subscribe(function(o) {
setTimeout(function() {panel.destroy();}, 0);
});

Where win is a YUI simple dialog, I use this:
w.win.hideEvent.subscribe(function(e) {
this.destroy();
});

using the hideEvent as above leads to javascript errors in firebug. the following solution works without problems:
dlg -> instance of yui2 dialog or similar.
dlg.close -> is the html element of the close icon
Use the following code after having the dialog rendered:
//remove the default click handler (._doClose)
YAHOO.util.Event.removeListener(dlg.close, "click");
//add a new click handler (._doClose)
YAHOO.util.Event.on(dlg.close, "click", function(){
this.destroy();
}, dlg, true);

Related

Detect onClose multiple select in Materialize

I want to create a filter with a multiple select, that when is closed it refresh the page with the new parameters.
So basically I want to capture the onClose event of the select.
I can detect when an option is selected/deselected with
$("#test").on('change', function() {
console.log($(this).val())
});
but I don't want this, since it would reload the page everytime a user change the value. I want to reload the page when the user is done and click "outside" of the select.
Complete code: https://codepen.io/anon/pen/qXQvNB
Catch the close event on the class select-dropdown:
$('.select-dropdown').on('close', function() {
// ...
});
Updated codepen
You can write resize event on ul like this
$('#select-options-d19b3203-929c-cb39-29c4-6170613be5d7').resize( function() {
alert("Closed.");
});

Can't Add Event Handler Into Button With ID

I've got a jQuery plugin installed on a website I'm working on. The plugin in question adds a modal dialogue to the website when a certain image is clicked. I wanted to add a second button to this modal, to close the window in addition to the close button that already does so, and I managed to do this by creating a div for the button in the HTML. Note that the content for the modal is set in the plugin's content variable, so looks like this:
content: '<p>Want to get in touch? Drop us an email at:</p><br/>
<p><input type="text" id="inset" name="inset"
value="shoesfromlastnight#gmail.com"
onClick="javascript:this.focus();this.select();"
readonly="readonly" size="30"/></p> <br/>
<span id="appendto"><p>We look forward to hearing from you!</p></span>
<div type="button" id="crmbutton">Okay</div>'
...where #crmbutton is the div I want to use as a button. For some reason, though, I'm having trouble with setting the event handler to the button created there in order to make it close the modal. It sounds simple enough, but for some reason won't work when I do:
$("#crmbutton").click(function() {
this.close();
});
Although I couldn't find any documentation on it, the close() method I'm using here is the very same that is used by the plugin's own X button to close the modal. For what it's worth, here's that button's code, first to create the close button and then, using the .on method, to close the modal on click:
this.closeButton = jQuery('<div/>', {'class': 'jBox-closeButton jBox-noDrag'}).on('touchend click', function(ev) { this.isOpen && this.close({ignoreDelay: true}); }.bind(this));
I also copied everything after the .on method and applied it to my code, but wasn't successful with that either.
I also tried other approaches, like adapting the code above to create the button on the fly, and then appending or prepending it using the append/prepend methods. This worked, but only when appending to the modal's container, which always added the button outside of the container. I had no luck with appending the button after certain elements, like the #appendto - the button just wouldn't be added.
Does anyone know where I could be going wrong here? This is the first time I've worked with jQuery, and it's frustrating me to no end. Thanks!
The problem is because you're not calling the close method in the correct scope. In your eventlistener, 'this' points to the button. But in the code that you looked at, 'this' has been changed to another scope with the .bind() method.
$("#crmbutton").click(function() {
/* 'this' points to the element #crmbutton, which doesn't have a close method */
this.close();
});
The example code, look at the bottom where the .bind() method is used.
this.closeButton = jQuery(
'<div/>',
{
'class': 'jBox-closeButton jBox-noDrag'
}
).on(
'touchend click',
function(ev) {
this.isOpen && this.close({ignoreDelay: true});
}.bind(this) /* The scope is being set to another 'this' */
);
Documentation about the .bind() method

Open pop-up box automatic with different ID in jquery

Here I use a pop-up jQuery box for pop up window but when I use it on same page for multiple pop-up boxes then it only one not for all because my id is same on all button I use for pop-up.
<script src="js/jquery-1.9.1.js"></script>
;(function($) {
// DOM Ready
$(function() {
// Binding a click event
// From jQuery v.1.7.0 use .on() instead of .bind()
$('#full-pop').bind('click', function(e) {
// Prevents the default action to be triggered.
e.preventDefault();
// Triggering bPopup when click event is fired
$('#full-detail-box').bPopup();
});
});
})(jQuery);
and here is pop-up
<div id="full-detail-box">this is pop up</div>
Try This
JS
for(var i=0;i<3;i++){
$('body').append("<div id='full-detail-box"+i+"' class='full-detail-box'>"+(i+1)+" User this is my pop-up window that is opem multi timewith different value </div><br/><a class='btn-pro' data-id='full-detail-box"+i+"' href='#'>Full Detail</a>")
}
$('.btn-pro').bind('click', function(e) {
e.preventDefault();
var id=$(this).data('id');
// Triggering bPopup when click event is fired
$('#'+id).bPopup();
});
Instead Of this
$('#full-pop').bind('click', function(e) {
// Prevents the default action to be triggered.
e.preventDefault();
// Triggering bPopup when click event is fired
$('#full-detail-box').bPopup();
});
UPDATED DEMO HERE
If I understand correctly you are passing the same id repeatedly, which just opens the same popup over and over again. If you want multiple popups you need multiple DOM nodes to trigger a popup on.
If you are using user detail, why not just append a unique ID!? You can easily add, in PHP, or w/e the ID of the user at the end of the class name id="full-detail-box-xx" where XX is the ID of the user.
Then you simply use the button with the SAME id in the function to call the user, like $('#full-detail-' + id).click(function(){ bPopup('#full-detail-box' + id); });
If you are using PHP you can write the ID to a JS array, or something. I'm not sure how you system is set up.

jQuery UI modal dialog global close on overlay click

I have several modal dialogs in my page and there will be even more. I plan to use modal dialogs for them all and have them close on overlay click. I don't want to bind the overlay click event in every place I instantiate a dialog, so I would like to extend the dialog prototype or something similar to make it bind the click event globally for all modal dialogs.
http://jsfiddle.net/jurchiks/kLBJm/1/
Let's say I have the following dialog constructor:
$('#dialog').dialog({
modal: true,
open: function()
{
$(this).find('input[type=text]').focus();
}
});
I've tried putting this code before dialog instantiation:
$.extend(
$.ui.dialog.prototype.options,
{
open: function()
{
var dialog = this;
$('.ui-widget-overlay').on('click', function()
{
$(dialog).dialog('close');
});
}
}
);
but it does not work, jQuery only calls the open function passed in the dialog parameters. I have suspicion that this simply changes the default open function and whatever is passed to the constructor is overriding this.
$.widget(
"ui.dialog",
$.ui.dialog,
{
open: function()
{
this._super();
var dialog = this;
$('.ui-widget-overlay').on('click', function()
{
$(dialog).dialog('close');
});
}
}
);
This does not work either; jQuery spits out an error - "cannot call methods on dialog prior to initialization; attempted to call method 'close'" - even though the popup is open.
How could I make it so the overlay click & close event is global and not overridable?
P.S. why the hell is this not provided by the jQuery UI library? I would think this is something very popular.
Ok, I made my own slightly hackish solution that works, but it seems that it only works on my version of jQuery (1.10.3). I tried the exact same code with jsfiddle's offered jQuery UI 1.9.2 and it simply didn't call the function. I'm guessing the function name has been renamed in 1.10.
Anyway, here's the code:
$.widget(
'ui.dialog',
$.ui.dialog,
{
_createOverlay: function()
{
this._super();
if (!this.options.modal)
{
return;
}
this._on(this.overlay, { click: 'close' });
}
}
);
And the test fiddle: http://jsfiddle.net/jurchiks/R944y/1/
Had to add external jQuery UI 1.10.3 CDN links to it to make it work, but hey - at least it works and it's a pretty simple solution, just had to dig inside jQuery UI's code to find out the simplest way to do it.
P.S. This would take so little effort to be built into the dialog plugin itself, it is remarkable that nobody has done it. All you'd need to do is add an option to enable/disable close on overlay click and the last line of my function inside an IF that checks if that option is enabled, a total of max. 4 lines.
Edit: created a patch for current jQuery UI: https://gist.github.com/jurchiks/7264596
it's not overriding but you can listen to certain events on the document:
$(function() {
var theDialog;
$( document ).on("click",
".ui-widget-overlay",function(){
$(theDialog).dialog("close");
});
$( document ).on( "dialogopen", function( event, ui ) {
theDialog=$(event.target);
});
});

Bootstrap popover is not working in Chrome

http://www.rightoption.co/
You will find "Our Client" On RHS side of page, Click on thumbnails it opens popover(Firefox),
But it's not working in Google chrome, Please help me out of this
Edit : Website is no longer on hosting
This is because the default trigger for the popover is focus. In Firefox, when you click on something, it seems to gain focus but that does not seem to be true for Chrome in this case.
You can try one of 2 things:
Try to manually set the trigger on the tag to be "manual". So add this attribute data-trigger="manual"
OR
In your document onload, instead of doing:
$('#element, #element1').popover('toggle').popover('hide');
use this line instead:
$('#element, #element1')
.popover()
.click(function(e) {
e.preventDefault();
$(this).focus();
});
The accepted answer is pretty dated now, but it came up for me in a Google search, so I would like to add that as of version 2.3.0 Bootstrap now allows to send 'hover focus' as the trigger so it will work on both. And very importantly, it also allows a 'click' trigger that works as you'd expect (specifically for Chrome).
This worked for me!
var el = $('[data-toggle="popover"]');
el
.on('shown.bs.popover', function(){
$(document).on('click.popover', function() {
el.popover('hide');
$(document).off('click.popover');
});
})
.popover();
Update: The above had an issue whereby clicking another popover element while a popover is displayed closes the open popover but doesn't open the new one. The following will close the open popover AND open the new one with one click.
var el = $('[data-toggle="popover"]');
el
.on('click', function(e){
var el = $(this);
setTimeout(function(){
el.popover('show');
}, 200); // Must occur after document click event below.
})
.on('shown.bs.popover', function(){
$(document).on('click.popover', function() {
el.popover('hide'); // Hides all
});
})
.on('hide.bs.popover', function(){
$(document).off('click.popover');
});

Categories