I wanna just hide jsPanel window instead of remove DOM when click [X] icon.
jsPanel support jspanelbeforeclose event.
My thought
Observe jspanelbeforeclose event and stop further action.
When click [x] icon of jsPanel, it will trigger jspanelbeforeclose event.
I think if step 1 is stopped, step 2 function panel.remove() will not be executed.
My question is how to stop 1 correctly? (Or how to prevent execute panel.remove())
I already test below methods, but both not work.
e.stopPropagation();
e.preventDefault();
return false;
jsPanel code snippet
// closes a jsPanel and removes it from the DOM
close: function (panel) {
...
panel.trigger('jspanelbeforeclose', panelID);
...
// remove the jsPanel itself
panel.remove();
...
});
My code
$('body').on('jspanelbeforeclose', function(event, id) {
// HOW TO DO
});
I would suggest a far easier method. If you want the close button to hide the panel instead of closing it, why don't you just assign another handler to the close button of this panel like
var myPanel = $.jsPanel({
// your panel config ...
callback: function (panel) {
// in the callback get the close button
$('.jsPanel-btn-close', panel)
// remove the standard handler
.off()
// and assign one that hides the panel
.on('click', function(){
panel.hide();
});
}
});
Whenever you need the panel back just call
myPanel.show();
Related
For each <a> that has mfp-ajax class will be executed as a pop-up box, and this pop-up box use the plugin in Magnific-Popup.
HTML:
View List
Javascript:
magnificSetting: {
type: 'ajax',
mainClass: 'mfp-fade',
ajax: {
settings: {
cache: false
}
}
},
modals: function () {
var self = this;
$('a.mfp-ajax').each(function () {
var $this = $(this);
$this.magnificPopup(self.settings.magnificSetting);
});
}
The codes works fine, however <a> is sometimes dynamically generated in the DOM and I have to create a separate script for Magnific-Popup callbacks. So what I did is I followed what is in the documentation, see the codes below:
$(document).on('mfpClose', '.multiselect-modal', function () {
console.log('test');
});
I tried this code but this does not get executed, how do I attach this in an element that is being generated dynamically in the DOM and when the pop-up opens and the user close it, it will go to the above code. Am I missing something here?
Unfortunately Magnific Popup internally uses triggerHandler() rather than trigger() to implement custom events ,so there is no event for the document to "listen to" so this may never work with current versions
$(document).on('mfpClose', '.multiselect-modal', function () {
console.log('test');
});
There is one fix but that requires you to create global events which is a bad practise so i advice you to make use of callbacks which is close in your case goes like this
$.magnificPopup.instance.close = function() {
//do your stuff here
//this calls the original close to close popup
//you may well comment it out which would totally disable the close button or execute conditional in if else
$.magnificPopup.proto.close.call();
};
these are some properties
//property
magnificPopup.currItem // current item
magnificPopup.index // current item index
// Navigation
magnificPopup.next(); // go to next item
magnificPopup.prev(); // go to prev item
magnificPopup.goTo(4); // go to slide #4
I have to draw something in bootstrap modal window if user click on button. My code is:
$('#button').on('click', function (evt) {
doSomeCrazyStuff();
$('#myModal').modal('show');
$('#myModal').on('shown.bs.modal', function (e) {
alert('Debug');
drawStuffInModal();
});
});
For first click everything works fine. But for second click i get two alerts, for third click - three alerts etc.
User can click button only if modal is hidden, so he need to close modal before next drawing.
I found out that a problem is a detecting of modal window state - if I don't use $('#myModal').on('shown.bs.modal', function (e) {}) but just waiting:
$('#button').on('click', function (evt) {
doSomeCrazyStuff();
$('#myModal').modal('show');
setTimeout(function () {
alert('Debug');
drawStuffInModal();
}, 500);
});
... I always get alert once. It works, but it's very ugly solution.
So my question is: why first code not working properly? I don't want wait n miliseconds because in some cases modal can need more time for loading and then user got errors.
Don't bind new event in another click event handler. Click on the #button can happen many times, which means that it will bind many similar duplicated events. Just move shown.bs.modal event subscription outside:
$('#myModal').on('shown.bs.modal', function (e) {
alert('Debug');
drawStuffInModal();
});
$('#button').on('click', function (evt) {
doSomeCrazyStuff();
$('#myModal').modal('show');
});
I want to be able to run the content() method every time a button is clicked with the id of the button as the parameter. This method removes the old buttons and displays new buttons.
This is the code I have so far:
do {
selection = $('button').click(function() {return this.id;});
content(selection);
} while(selection !== "end");
What you need is a click event handler where you call the content method
$('button').click(function () {
content(this.id);
});
If you want to execute the same method again when the replaced button is clicked then you need to use event delegation
$(document).on('click', 'button', function () {
content(this.id);
});
I have a simple textarea where users can input text which is then passed through via AJAX to a URL once they hit the return key. My issue is that on the first press of the return key the text data is sent once, on the second it's sent twice, and so on incrementing my one each time.
After some reading up I realise that if I was using a form submit I'd have to unbind it to prevent this happening. I've tried adding a value flag to prevent the multiple events, but have only got so far as to get it to trigger once only.
My code is as follows. Any guidance on how to prevent the incrementing events would be appreciated - as you can probably tell my confidence/knowledge in Javascript isn't the best. Thank you!
$(function() {
$("#myTextarea").keypress(function(e) {
// If the user hits the return key
if(e.which == 13) {
e.preventDefault();
$.ajax({
success: function(){
var modal = $('#myModal'), modalBody = $('#myModal .modal-body');
modal
// Load the webpage result within the modal Body
.on('show.bs.modal', function () {
modalBody.load('http://www.things.co.uk/things' + document.getElementById('myTextArea').value)
})
.modal();
// Hide the modal after five seconds
myModalTimeout = setTimeout(function() {
$('#myModal').modal('hide');
}, 5000);
}
});
}
});
});
Edit: I solved this by using one() for my modal event via http://www.andismith.com/blog/2011/11/on-and-off/. Thank you everyone.
You must attach the event handler only once. I suppose you're getting the JS in your AJAX response, and executing it again and again on each AJAX load. Removing and re-attaching the handlers is a hacky solution.
To avoid to attach the event handlers more than once, simply put your script in a part of the page which is not reloaded by AJAX, so the event is attached only once.
You can even attach an event handler to an element that is reloaded by ajax using delegated events: Understanding Event Delegation
With this technique, you attach the event handler to a container parent element which is not reloaded by ajax, and handle the events of the reloaded children specified by a filter.
$( "#container" ).on("<event>", "<children filter>", function( event ) {
// code to handle the event
});
Note that in this sample #container is the element which isn't reloaded by ajax. And <children filter> is a jquery selector that chooses the children whose event mus be handled. (<event> is obviously the event name, like click or keyPress).
Explanation: when the event is trigger in the child element, it pops up to the container. The container catches it, and checks that the children passes the filter. If so, the vent is handled.
If there are no more event handlers on myTextarea div code below should suffice.
If there are multiple event handlers attached to keypress event you will have to use named function and remove it using $.unbind() more on how to do this.
$(function() {
$("#myTextarea").off();
$("#myTextarea").keypress(function(e) {
// If the user hits the return key
if(e.which == 13) {
e.preventDefault();
$.ajax({
success: function(){
var modal = $('#myModal'), modalBody = $('#myModal .modal-body');
modal
// Load the webpage result within the modal Body
.on('show.bs.modal', function () {
modalBody.load('http://www.things.co.uk/things' + document.getElementById('myTextArea').value)
})
.modal();
// Hide the modal after five seconds
myModalTimeout = setTimeout(function() {
$('#myModal').modal('hide');
}, 5000);
}
});
}
});
});
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.