I'm launching a jquery dialog, which displays some links. on click of the links, i want to display something on an element via ajax, and close the dialog.
here are the two snippets, which i cannot figure out how to combine.
//this is the handler and the ajax function
$(document).delegate("a[rel=link]", "click", function() {
$("#target").load($(this).attr("href"));
return false;
});
//this function i want to add to the above handler
function() {
$(this).closest('.ui-dialog-content').dialog('close');
return false
};
assuming that 'this' refers to the same thing in both snippets:
//this is the combined function
$(document).delegate("a[rel=link]", "click", function() {
$("#target").load($(this).attr("href"));
$(this).closest('.ui-dialog-content').dialog('close');
return false;
});
Related
I'm calling via ajax additional content where I add a jquery on() function for a click event. Each time I renew the content the event is also set again so at the end it get executed several times. How can I avoid this behavior?
How do I test if the click event is already set on the document?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Click
<script>
// first ajax load
$(document).on('click', '.open-alert', function () {
alert('hello world!');
});
// second ajax load
$(document).on('click', '.open-alert', function () {
alert('hello world!');
});
</script>
I already try to just the jQuery.isFunction(), but I don't anderstand how to apply it in this case.
You can Unbind the click event , if you getting more than one time exectuated.
$(document).unbind('click').on("click", ".open-alert", function () {
//do stuff here
});
Or you can also use it
$(document).off("click", ".open-alert").on("click", ".open-alert", function () {
});
Using
$(document).on('click', '#element_id', function() {
//your code
});
Will check the DOM for matching elements every time you click (usually used for dynamically created elements with ajax)
But using
$('#element_id').on('click', function() {
//your code
});
Will only bind to existing elements.
If you use the 1st example, you only need to call it once, you can even call it before your ajax call since it will recheck for matching elements on each click.
<script>
$(document).on('click', '.open-alert', function () {
alert('hello world!');
});
// first ajax load
// second ajax load
...
</script>
In case you cannot bind the event to the specific DOM element (which might happen if you use Turbolinks for example) you can use a variable to check whether you set the event or not.
Local scope
var clickIsSet = false;
// any ajax load
$(document).on('click', '.open-alert', function () {
if ( clickIsSet ) {
alert('hello world!');
clickIsSet = true;
}
});
Global scope
I don't recommend to make clickIsSet global, but in case you are importing/exporting modules you can do that:
// main.js
window.clickIsSet = false;
// any-other-module.js
$(document).on('click', '.open-alert', function () {
if ( window.clickIsSet ) {
alert('hello world!');
window.clickIsSet = true;
}
});
jQuery check if event exists on element : $._data( $(yourSelector)[0], 'events' )
this return all of element events such : click , blur ,
focus,....
Important Note: $._data when worked that at least an event bind to element.
so now:
1.in your main script or first ajax script bind click event on element
<script>
$(document).on('click', '.open-alert', function () {
alert('hello world!');
});
</script>
2. in secound ajax:
var _data = $._data( $('.open-alert')[0], 'events' );
if(typeof _data != "undefined"){
var eventClick = $._data( $('.open-alert')[0], 'events' ).click
var hasEventClick = eventClick != null && typeof eventClick != "undefined";
if(!hasEventClick){
$(document).on('click', '.open-alert', function () {
alert('hello world!');
});
}
}
I get Confuse about your question but as far as understand your question I have three suggestions:
Use Id element (as #Mokun write the answer)
Use Common Function for call functionality instead use through the click event.(Make Sure of function does not overwrite your content by calling).
Use of flag variable (or global variable for your tracking event) in jquery and identify your function call for particular execution.
I am using MVC Razor - The overall goal is to create a "print view" pop-up page.
The print view button is on the parent page, when clicked, an ajax event is fired which will populate an empty div with the contents that are to be included in the print preview:
//from the view
#Ajax.ActionLink("prntPreview", "Display", new { ID = Model.Detail.ID }, new AjaxOptions { UpdateTargetId = "modal" }, new { #class = "btnPreview" })
then, using JavasScript/jQuery I clone the contents of that newly populated div and create a new window with the contents:
//in the scripts file
$('.btnPreview').on('click', function () {
$(document).ajaxStop(function () {
var pageData = $('#modal').html();
setTimeout( //add a slight delay
function () {
PopupPrint(pageData);
}, 300);
});
});
function PopupPrint(data) {
var mywindow = window.open('', '', 'height=500,width=800,resizable,scrollbars');
mywindow.document.write(data);
mywindow.focus();
//do some other stuff here
}
This is where I run into difficulty. The first time I click, everything is working as expected - however, if you do not navigate away from the parent page and try to use the print preview button a second time, the popup will be created twice, then three times etc. with each additional click.
I think that the problem is because each time the .btnPreview is clicked, a new $(document).ajaxStop event is being created, causing the event to fire multiple times.
I have tried to create the ajaxStop as a named function which is declared outside the scope of the click event and then clear it but this produces the same result:
var evnt = "";
$('.btnPreview').on('click', function () {
evnt =
$(document).ajaxStop(function () {
var pageData = $('#modal').html();
setTimeout( //add a slight delay
function () {
PopupPrint(pageData);
evnt = "";
}, 300);
});
});
I also have other ajaxStop events initialised so don't want to completely unbind the ajaxStop event. Is it possible to get the name or something from each ajax event so that I can clear just that event or similar?
You can prevent adding additional triggers by checking with a variable outside of scope like this:
(function() {
var alreadyAdded = false;
$('.btnPreview').on('click', function() {
if (!alreadyAdded) {
$('.eventTrigger').click(function() {
console.log('printing!');
});
alreadyAdded = true;
}
});
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btnPreview">Add Event</button>
<button class="eventTrigger">Trigger</button>
Please note that the variable and function are encapsulated in a self-executing anonymous function and do not pollute global space.
The output of the sample can be seen in the developer console. If you remove the if-check then every click on the "Add Event" button produces an additional print statement on the "Trigger" button each time it is clicked (which is your problem). With the if, there will ever only be one event on the trigger button.
There were 2 issues which I needed to address.
The answer is to unbind the ajax event after it has checked that the request had completed and to unbind and reattach the button click trigger.
This is how I did it:
//in the scripts file
$('.btnPreview').off('click').on('click', function () {
$(document).ajaxComplete(function (e) {
var pageData = $('#modal').html();
setTimeout( //add a slight delay
function () {
PopupPrint(pageData);
}, 300);
$(this).off(e);
});
});
I unbound the click event by adding .off('click') before the .on. this is what stopped it popping up multiple times.
The other issue was that anytime any ajax event completed (triggered by something else) that would also create the popup - to get around that, I added $(this).unbind(e); to the end of the code block which removed the ajaxComplete binding which was being triggered each time any ajax event completed.
Skip to bottom for question
JQuery plugin:
$.fn.myPlugin = function( options ) {
var options = $.extend({
myOption: true,
edit: function() {},
done: function() {}
}, options);
options.edit.call(this);
options.done.call(this);
//plugin guts removed to prevent over complication
return {
edit: function(obj) {
$(obj).closest('#myParent').find('#myInput').autosizeInput(); //plugin to autosize an input
},
done: function(obj) {
$(this).closest('tr').find('td').not('.not').each(function(i) {
//do some things
});
}
}
});
Bear in mind this is a cut down version of my plugin.
Called from page:
$(document).ready(function() {
var myPlugin = $('.editable').myPlugin({
edit: $(this).on('click', '.edit-td', function(e) {
e.preventDefault();
//do some page specific stuff
myPlugin.edit( $(this) ); //call the edit returned function
}),
done: $(this).on('click', '.done-td', function(e) {
e.preventDefault();
//do some page specific stuff
myPlugin.done( $(this) ); //call the done returned function
});
});
});
This works great for the most part, however, what i really want is have functions called from inside my plugin every time a specific callback is triggered - without the need to call from outside the plugin.
I have tried including delegated events in my plugin:
$(this).on('click', '.edit-td', function(e) {
e.preventDefault();
$(this).closest('#myParent').find('#myInput').autosizeInput();
});
$(this).on('click', '.done-td', function(e) {
e.preventDefault();
$(this).closest('tr').find('td').not('.not').each(function(i) {
//do some things
});
});
But when the .edit-td is triggered it propagates and triggers the .done-td event, if i put e.stopPropagation() in the edit-td function (because it has been delegated) edit-td stops firing completely.
And non-delegated method:
$(this).find('.done-td').click(function(e, this) {});
But I can't parse the returned object (this) to the internal function before the internal function has completed. (just comes up undefined or missing formal parameter).
*Skip to here
To avoid the question becoming to localised -
I need to have functions called from inside my
plugin every time a specific callback is triggered.
Without calling it using closures
Something like:
if( $.fn.myPlugin.callback().is('edit') ) {
//fire function
}
I needed to return a function(s) like so:
return {
enable: function(arg) {
//do something
},
disable: function(arg) {
//do something
}
}
That way I can call it from inside my plugin by referencing itself like this:
this.myPlugin().disable();
I want to stop an event show a modal dialog and if the user presses yes persue this event. event.run() brings an error in firefox.
jQuery(element).click(function(event) {
event.preventDefault();
dialog.dialog({
buttons: {
'Ja': function() {
event.run();
},
'Nein': function() {
jQuery(this).dialog('close');
}
}
}).dialog('open');
});
Thanks to a friend and hashbrown I managed to solve this problem. An event cannot be paused and persued. If it is paused it will block the whole DOM. Try:
jQuery(link).click(function(){while(true)});
When using jQuery its possible to set additional event parameters what I did:
jQuery(element).click(function(event, show_dialog) {
var that = jQuery(this);
if(!show_dialog) {
dialog.dialog({
buttons: {
'Yes': function() {
that.trigger(event.type, [true]);
},
'No': function() {
jQuery(this).dialog('close');
}
}
}).dialog('open');
return false;
} else {
dialog.dialog('close');
return true;
}
});
First click show_dialog is undefined and modal dialog is shown. Clicking on Yes in modal dialog triggers the event.type (click) with the additional parameter true for show_dialog. http://api.jquery.com/trigger/#trigger-eventType-extraParameters
It was not possible to that.trigger(event, [true]);. I think cause events default action was prevented before.
That is because immediately after creating the popup the function returns and the event expires.
What you'll have to do is .trigger() a new event.
Note: set some sort of global variable to ignore this second event firing in your anonymous function (infinite loop problem).
Can I ask why you want to do this; what would click go off and do if you let it?
If it just fires off a different function, why not just call that function instead of attempting event.run()?
I have a page loading content with the waypoints infinite scroller plugin.
On the success of the AJAX call and after DOM elements are added, a callback runs to re-initilize javascript functionality, like carousels, buttons and other animation.
On the first AJAX call, buttons tasked with toggling work properly. On the next AJAX call, the new DOM items work, but the previous buttons now execute toggles twice when clicked. On the third call, original items now run three times, the second items twice and the new ones once, so on and so fourth, continuing to compound as AJAX content is called.
How can I isolate the callback to not affect the previously loaded content, or, is there a way to set a global state for the JS, so that I don't need the callback each time?
Some pseudo code:
$('.infinite-container').waypoint('infinite', {
onAfterPageLoad: function() {
//Carousel options
$('.carousel-container').carousel({
options: here,
....
});
//Button Toggles
$('.button').click(function(){
var self = $(this);
$(this).siblings('.caption').animate({
height: 'toggle'
}, 200, function() {
// Callback after animate() completes.
if(self.text() == 'Hide Details'){
self.text('Show Details');
} else {
self.text('Hide Details');
}
});
});
}
});
Edit: Thanks everybody. All the answers lead me to differing but appropriate solutions. The selected was picked as it's a great collection of all the suggested issues and worth the read.
Check out this answer. I think it is the same situation you are having and has a solution:
Best way to remove an event handler in jQuery?
You are attaching a new click handler each time that block of code gets executed. The result is multiple click handlers being bound to your button. Use jQuery's unbind: http://api.jquery.com/unbind/ to remove any click handler(s) before adding a new one:
$('.infinite-container').waypoint('infinite', {
onAfterPageLoad: function() {
//Carousel options
$('.carousel-container').carousel({
options: here,
....
});
// Un-bind click handler(s)
$('.button').unbind('click');
//Button Toggles
$('.button').click(function(){
var self = $(this);
$(this).siblings('.caption').animate({
height: 'toggle'
}, 200, function() {
// Callback after animate() completes.
if(self.text() == 'Hide Details'){
self.text('Show Details');
} else {
self.text('Hide Details');
}
});
});
}
});
Try bind only once click event to button. Of course you can use on instead of live.
$('.button').live('click', function(){
var self = $(this);
$(this).siblings('.caption').animate({
height: 'toggle'
}, 200, function() {
// Callback after animate() completes.
if(self.text() == 'Hide Details'){
self.text('Show Details');
} else {
self.text('Hide Details');
}
});
});
$('.infinite-container').waypoint('infinite', {
onAfterPageLoad: function() {
//Carousel options
$('.carousel-container').carousel({
options: here,
....
});
//Button Toggles
}
});
$('.button').click(function(){
You add an event handler to every button that has the class button. When the second button is added then you add it to every ... which means button 1 and button 2. And so on.
Try
$('.button').last().click(function(){