Not sure if this is a bug or I am not suppose be doing this.
I have a page with sidebars that loads the main body dynamically.
For page1, I have a callback for an element #id1, which works on initial load.
After the user navigates to page2, the main content will get replaced by contents of page2, which also has an element with #id1, they serve the same purpose. events are initialized there as well.
The problem is that everything on page 2 would work except the event associated with #id1.
If navigating back to page 1, #id1 wouldn't work as well.
After looking at the console, I found that when calling $("#id1") sometimes give me the initial load element (not destroyed?), which is probably the reason.
The ajax load simply uses:
$.get(path, function(data) {$('#main').html(data)});
Any idea what's going on here?
If the old elements are not 'properly destroyed in jquery', what is suppose to be done here.
While it's not clear exactly what you're binding, the solution is to use (depending on your jQuery version) live() or on() to ensure that you bind to elements that aren't in the DOM at execution time.
jQuery 1.7+: on()
$(document).on('click', '.selector', function() { ... });
jQuery <1.7: live()
$('.selector').live('click', function() { ... });
Remember that an ID should only occur once
Because you don't know what elements with ID's may still be living in the DOM after the Ajax call you should stick with classname's instead.
With that you can use jQuery's .live() to bind to elements that have been dynamically loaded.
You have to generate dynamic id for that. When you click the right bar option the id will generated and place the id in the body element "id" tag.So you know that which id is generated for which page. Call a javascript function on "onclick" event and pass that id to this function then call the body element as $("#id"+that generated_id).something;
I think this will help.
Related
I know putting JavaScript in partials is a bad idea because the page will have to load up a new script every time a new partial is loaded. I am aware of and have read this question, but its answer did not work for me (putting the script into app/javascripts/application.js). I think it is because I am working with partials that are dynamically generated onto the page. I think the dynamically generated partial does not react to the script loaded up on the initial page.
For example, I have a "Rule" div with a select input that has a script to do something when the select input is changed. This works for every Rule div that is generated on page load. But then there is also a "+" or "ADD" button which will dynamically generate more Rule divs which do not respond to the script, unless that script is in the partial.
Is there a good way to keep the script out of the partial when the partial is dynamically generated?
JQuery sets listeners on page load (i.e. $(selector).on(etc.)), so it doesn't listen for events on dynamically added elements. There is a way around it, though. You need to use what is called a delegate.
$(document).ready( function() {
$('body').on('change', 'input.selector', function(e) {
// do something
});
});
I'm not sure what your event (here I put change) or selector for the select you are using (here I put input.selector), but if you replace those with the appropriate information, it should work even with dynamically added elements.
You can use JQuery to execute the code only after the document has loaded onto the DOM:
$( document ).ready(function() {
//Call your functions here
});
That way, your JS will have access to whatever is on the page, because you are ensuring that it is fully loaded.
If your divs are not in place on document ready, you can use event delegation, as suggested by ptd. Basically what this means is that you install a handler on a parent div (which will be present on document ready) which says, "hey, when you click on this dynamic div inside of me, call this function".
$('div#master').on('click', 'div.dynamic', function(event) {
console.log("action here")
var $dynamicDiv = $(event.currentTarget) //The current Target is the thing you clicked on, not the parent.
});
If you are adding elements to the DOM using AJAX calls, but want to keep your JavaScript in your assets folder only, here's a quick and clean way to accomplish this.
// /app/assets/javascript/foo.js
// On intial page load
$(document).ready(function() {
yourJavaScriptForPartials();
});
// After a subdomain field is loaded via AJAX
$(document).ajaxComplete(function() {
yourJavaScriptForPartials();
});
function yourJavaScriptForPartials() {
// Insert your javascript here.
};
Now, any JavaScript you put in the yourJavaScriptForPartials() function will be available both to the initially loaded DOM, and to any DOM elements added via AJAX. For reference, here is the JQuery page for the ajaxComplete event listener.
First of all, I tried the answers in this, and this similar questions, but that does not seem to work for me at all.
I would like to do stuff on a click event bound to an element that is created via ajax so it is not in the DOM at first.
I notice that the following coffeescript in my_asset.js.coffee works as expected:
$ ->
$('#div').on "click", ".link", (e) ->
#do stuff
According to JQuery Doc:
this function is bound to all "selected_div" click events, even if they are added to the DOM via ajax later
And the do stuff part works ok
However I would like to:
$(this).after("<%= insert some long view here %>")
So, in order to do that, I guess I should move the $(this).after part from the asset.js.coffee to my_view.js.erb
where I could embed render partial
There, in my_view.js.erb, I have tried the following, (equivalent) javascript:
$(function() {
$("#div").on("click", ".link", function() {
$(this).after("<%= render partial here %>");
});
});
But it does not work for the first click, (it does, however, for the subsequent clicks)
I think it is related to the fact that .link is not in the DOM when the page loads for the first time.
Why is this happening? Is that the cause? And how could I get in the view the same behaviour that I get in the asset ?
You'll bind to a container element (typically document or body), and delegate the event to the to-be-created object:
$(document).on("click", "#div .link", function() {
$(this).after("<%= insert some long view here %>");
});
Binding
As you've pointed out, JS binds events to elements of the DOM on page load
If your element is not present at load, JS won't be able to bind, thus causing a problem. To fix this, you'll have to delegate the bind to an element higher in the DOM hierarchy, allowing JS to bind the event to any new elements in relation to your container
I have the following code:
var $reviewButton = $('span.review_button');
$reviewButton
.live('click',
function(){
$('#add_reviews').show();
}
)
Later in the script, I use an AJAX call to load some content and another instance of $('span.review_button') enters the picture. I updated my code above to use '.live' because the click event was not working with the AJAX generated review button.
This code works, as the .live(click //) event works on both the static 'span.review_button' and the AJAX generated 'span.review_button'
I see however that .live is depracated so I have tried to follow the jquery documentations instructions by switching to '.on' but when I switch to the code below, I have the same problem I had before switching to '.live' in which the click function works with the original instance of 'span.review_button' but not on the AJAX generated instance:
var $reviewButton = $('span.review_button');
$reviewButton
.on('click',
function(){
$('#add_reviews').show();
}
)
Suggestions?
The correct syntax for event delegation is:
$("body").on("click", "span.review_button", function() {
$("#add_reviews").show();
});
Here instead of body you may use any static parent element of "span.review_button".
Attention! As discussed in the comments, you should use string value as a second argument of on() method in delegated events approach, but not a jQuery object.
This is because you need to use the delegation version of on().
$("#parentElement").on('click', '.child', function(){});
#parentElement must exist in the DOM at the time you bind the event.
The event will bubble up the DOM tree, and once it reaches #parentElement, it is checked for it's origin, and if it matches .child, executes the function.
So, with this in mind, it's best to bind the event to the closest parent element existing in the DOM at time of binding - for best performance.
Set your first selector (in this case, div.content) as the parent container that contains the clicked buttons as well as any DOM that will come in using AJAX. If you have to change the entire page for some reason, it can even be change to "body", but you want to try and make the selector as efficient as possible, so narrow it down to the closest parent DOM element that won't change.
Secondly, you want to apply the click action to span.review_button, so that is reflected in the code below.
// $('div.content') is the content area to watch for changes
// 'click' is the action applied to any found elements
// 'span.review_button' the element to apply the selected action 'click' to. jQuery is expecting this to be a string.
$('div.content').on('click', 'span.review_button', function(){
$('#add_reviews').show();
});
I have a jquery powered voting system, and the items on other pages are loaded via ajax, but on ajax-loaded contents the jquery voting needs the page to be refreshed for the vote to be processed.
http://ohmygosh.vr.lt/
I think the problem is within the actions in this file (?) But i'm not really sure. I don't have any code to start since I don't even know where to start. How do I fix this Problem?
Seems that you are using a SmartAjax to load the page content. What SmartAjax does is that it changes the page url (using pushState or hash), loads data and REPLACES the content of #posts div with the loaded content.
The problem is that you are listening click events from DOM elements which are later deleted and replaced with new DOM elements. Thus, the click events from the ajax loaded content are not listened. live() doesn't help in this case.
To fix this, you have at least these two options:
1) Use jQuery's delegate() to attach the handler and use #posts div as the root element, since it remains after the new content is loaded.
Something like this should work:
$('#posts').delegate(':input', 'click', function() {
var value = $(this).val();
alert('You have clicked thumbs up/down, value: ' + value);
return false;
});
2) Add click listener to the loaded items after data loading is completed.
Notice: Starting jQuery 1.7 you should use on() instead of delegate()
I have a list of elements that I am loading via ajax (using jQuery's .load()). Each of these elements has an (edit) link next to it that lightboxes (using colorbox) a little edit form. When the lightbox is closed I use the onClosed callback to reload the ajax list to show and changes made during the edit.
The colorbox call looks likes this:
$('.colorbox').colorbox({
'iframe':true,
'onClosed':function(){
$("#featureList").load("/template/featureList","id="+$("#model_id").val());
}
});
My list looks like this:
<div id="featureList">
<ul id="features">
<li id="item_000000000008+0">Element 1 (<a class="colorbox" href="/template/featureLightbox?template_id=000000000008&delta=0">Edit</a>)</li>
<li id="item_000000000008+1">Element 2 (<a class="colorbox" href="/template/featureLightbox?template_id=000000000008&delta=1">Edit</a>)</li>
</ul>
</div>
I looked at the colorbox source code and saw that is uses jquery live() to do the bind. Here it is:
$('.' + boxElement).live('click', function (e) {
if ((e.button !== 0 && typeof e.button !== 'undefined') || e.ctrlKey || e.shiftKey || e.altKey) {
return true;
} else {
launch(this);
return false;
}
});
You can see above the way colorbox works is by binding to "boxElement", which is a class it creates called "cboxElement". Before the live() bind colorbox adds this class (cboxElement) to all of the elements matching the selector (.colorbox in my example), then binds to this new class.
So thought that if I placed the colorbox bind outside of the ajaxed content it would bind to the links after I replaced the #featureList div with ajax, since live() is supposed to bind to elements "now or in the future". But it doesn't because it's binding to .cboxElement instead of .colorbox so when the ajax reloads colorbox doesn't re-add the .cboxElement class to the elements.
I tried calling $.fn.colorbox.init() in the ajax content to get colorbox to re-add the .cboxElement class to the elements, but this had no effect. (I do something like this when dealing with shadowbox, but it doesn't seem to work the same for colorbox.)
So then I tried to place all the colorbox code inside the ajax content. When I do this the colorbox binds are stacking/chaining. So the second time I call it I get two colorboxes (and have to hit the "close" button twice to return to the main screen). The third time I get three. This is because when I call colorbox again it adds the .cboxElement class, making the old live() binds active again, and it also adds ANOTHER live() bind to it. I tried to clear out the .live() binds by calling .die() first, but it didn't work for some reason.
I have found a couple of related posts but none of them solved this problem since colorbox is already using live():
Problem with jQuery Colorbox
jQuery AJAX table to a page but now the colorbox overlays no longer work
Any other ideas out there? I am really stumped. I feel like I should switch to a different lightbox, but in general I like colorbox and it was working great everywhere else on the site until this ajax problem came up.
Thanks!!!
EDIT:
So, in this case my issue was that my framework (Yii) was including a duplicate colorbox script on each AJAX call, which was causing the problem. So watch out for that!
For everyone having issues who is NOT facing the duplicate-script issue I was: #Relic points out below you can sort of "sidestep" some issues by doing your own jQuery delegate() bind which does a "direct call" of colorbox, instead of relying on colorbox's default live() binding. I would tweak it like this for my case:
$(document).delegate("#features a", "click", function (event) { // $.colorbox() call }
First of all, you shouldn't use .live() it's deprecated. Instead learn how to use .delegate() You'll find this is a much more powerful listener and will help solve your problem.
On page load initially the DOM is ready, and colorbox is initilized for the selector
AJAX calls a new piece of the page with some DOM element that is in the colorbox selector list, but isn't noticed because it loaded into the page after the selector was read by the javascript.
Try the following - as it watches body #main for all, existing and new a[rel='lightbox']:
$("body #main").delegate("a[rel='lightbox']", "click", function (event) {
event.preventDefault();
$.colorbox({href: $(this).attr("href"),
transition: "fade",
innerHeight: '515px',
innerWidth: '579px',
overlayClose: true,
iframe: true,
opacity: 0.3});});
EDIT for ".on()"
$("body #main").on("click", "a[rel='lightbox']", function (event) {
event.preventDefault();
$.colorbox({href: $(this).attr("href"),
transition: "fade",
innerHeight: '515px',
innerWidth: '579px',
overlayClose: true,
iframe: true,
opacity: 0.3
});
});
Yes, big change, I know, but the point is the 'on' method can also be used as 'bind', so that's kind of cool.
i solved this in a pretty easy way.
If you are sending back an ajax response (usually a javascript response) - attach the normal colorbox binding code (as you would do in any place) in that response.
$('.colorbox').colorbox({
'iframe':true,
'onClosed':function(){
$("#featureList").load("/template/featureList","id="+$("#model_id").val());
}
});
attach this in your js response from server. this worked for me.
The problem appears to be related to something I didn't notice at first and therefore didn't put in my question. I have edited the question to reflect this new information.
My issue was that AJAX response was multiple-binding and including the colorbox script multiple times. The Yii Framework helper widget I was using to include the script is also including jQuery and Colorbox in the response EACH TIME. Yii doesn't have a way to determine if the required scripts (like jQuery) have already been included in the main page (typical stateless HTTP issue) so it includes it in the AJAX partial render each time.
I solved this issue by not using a Yii Widget to do the Colorbox binding on each Ajax call's renderPartial view. I just include thecolorbox binding on the parent page, so the Ajax content has no JS in it.