In some event of my script, I execute:
$('#myDiv').load('externalelem.php');
But, as we all know, the new elements will not be affected by functions executed on page complete. Like:
$(document).ready(function() {
$('.ttip').tooltip();
}
These new injected elements will not have tooltips. I have tried to:
call tooltip() after load()
call tooltip() inside "externalelem.php'
None have worked. There are plenty of scripts that are affected by this issue. How can I fix it?
Just recall your tootip function after the new elements have been added to the DOM:
$('#myDiv').load('externalelem.php', function() {
$('.ttip').tooltip();
});
You can read more about using the optional callback handler here: http://api.jquery.com/load-event/
Use the jquery delegate method! It's awesome for this!!
Related
I am using .load() to pull static HTML files onto my main HTML page. The scripts and selectors that I have written exist within:
$(document).ready(function(){});
But they don't work on the AJAX loaded content. I have read that this is because the selectors that I am using are not available.
Is there a better way to do this? Adding the script to the window.load function doesn't work either:
$(window).load(function() {});
$(document).ajaxComplete(function(){
// fire when any Ajax requests complete
})
ajaxComplete()
There are more than one option:
you can add initialization scripts [ $(this).click... ] into callback function of $.load()
you can use $.live(), which creates handlers even for dynamically loaded/created objects.
More here:
callback: http://api.jquery.com/load/ (notice the "complete()" function)
bind: http://api.jquery.com/live/
Edit: My mistake, it was live(), not bind(), thank you guys
You can bind events to dynamically loaded content via jQuery's $.live().
From jQuery http://api.jquery.com/live/:
Attach a handler to the event for all elements which match the current selector, now and in the future.
jQuery load takes an optional callback function argument which you could use to do any setup you need AFTER your ajax-ed content is loaded
For <div class="editdiv">Test</div>. Jquery click functionality is added in document.ready function . But editdiv loading in page dynamically with delay.
So when I click on the div. Function is not calling. By using timeout function is working fine.
I need a different approach to solve this functionality.
If your .editdiv is loaded dynamically after your js loading so your click event can't detect it and it will not work, instead you should use event delegation on() to deal with fresh DOM :
$('body').on('click', '.editdiv', function(){
//Your click event code
})
If you want to avoid setTimeout you could use delay with queue callback method :
$('div.scroll-area-blue')
.delay(5000)
.queue(function() {
$(this).enscroll({
showOnHover: false,
verticalScrolling: true,
verticalTrackClass: 'vertical-track-blue',
verticalHandleClass: 'vertical-handle-blue'
});
});
If you will use setTimeout better to use it like :
setTimeout( enscrollDiv, 5000);
function enscrollDiv(){
$('div.scroll-area-blue').enscroll({
showOnHover: false,
verticalScrolling: true,
verticalTrackClass: 'vertical-track-blue',
verticalHandleClass: 'vertical-handle-blue'
});
}
Hope this helps.
It is really difficult to understand whats going wrong from your question. What I guess is you are loading a specific div using Ajax or similar technologies - meaning the div is not available initially.
The way jQuery works is that, it only binds the event to the elements only available at the time the part is executed.
If a <div id='myDiv'></div> is not present when $('#myDiv').click(function(){}) is called, it won't work.
One workaround is to do it like this:
$('body').on('click','#myDiv',function(){});
This registers the click on body and then checks if the clicked element is having a id 'myDiv' or not. We can expect the <body></body> to be present always. So the problem we had with previous code won't happen here.
maybe you're loading the javascript codes before the html elements(tags) are loaded.
try adding the script which includes "document.ready()" before the end tag of the body when all html tags have already finished loading.
I'm hitting targets in the dark. Hope it works for you. It's difficult to generate any solution without analyzing the problematic code......
I want to replace load script into existing script after ajax response.
Due to I will only update some element so the whole page will not be reloaded, and some event on replaced element will be lost.
Re-Run application Javascript on ajax loaded content <--- This is not a solution for me...
I tried take the script tag from loaded html and eval() them. However, this will not replace the existing functions but double them.
I want to replace, or re-execute the script function by not use $(document).html(data);
I read many references such like,
http://www.javascriptkit.com/javatutors/loadjavascriptcss2.shtml
But I dont very understand it.....
Please help and advice a more easy understanding example. Thank you very much!
My script now is
$script.each(function(index){ //data from loaded page, same page
if(!$(this).attr('src')){ //replace where is not from external only
$(document.getElementsByTagName( 'script' )).slice(index).remove();
//remove existing script, no working
eval($(this).text());
// re-execute, wokring
};
});
You may try to combine your logic to functions and call it when you want. Moreover, if you ajax-loaded content will contains JS functions you can call it after place retrieved html to the page.
When I need to bind events to some dynamically loaded components I implement function like following:
function rebindDynamic() {
$('#elem1')
.unbind() //Or unbind('click') if you want to unbind specific handlers
.click(function (e) { ... });
$('#elem2')
.unbind() //Or unbind('keyup') if you want to unbind specific handlers
.keyup(function (e) { ... });
...................
}
I hope it will helps.
JS BIN Attempt
Attempting to follow along with the example, but it doesn't seem to work. A little confused, as it is Mozilla.
Mozilla
As #Xaerxess mentions, you need to call the "setupButtons" function when the DOM is ready for manipulation; typically one does that by adding an event handler to the window "load" event, which happens when the page is entirely loaded (which is what the jQuery idiom $(document).ready(function(){...}); does.
Try adding this snippet to the end of your existing <script> element to accomplish that goal using plain JavaScript, no jQuery needed:
window.onload = function() { setupButtons(); };
Another typical way of doing this is to use the element.addEventListener function; the difference is that you can add multiple event callbacks this way and they won't overwrite each other:
window.addEventListener('load', function() {
setupButtons();
}, false);
You didn't call setupButtons function on page load, only defined it. If you include jQuery, add:
$(document).ready(setupButtons);
in you script tag and it'll work.
This is actually a bigger question because I know there are several ways to solve this problem but I will try to sum it up.
What I try to do: I am using this jQuery plugin to upload files via Flash http://www.uploadify.com/. However, the element #fileInput that I supposed to bind this function to is a live element which is generated after the page loaded: $('#fileInput').uploadify(). The reason #fileInput is a live element is because I use FancyBox to popup a DIV and this FancyBox basically just "cloned" the inner html of the DIV.
What happened: When I clicked "BROWSE" to upload a file, there is no progress bar for upload. The reason is because the Uploadify could not bind to live elements.
Questions:
1. I tried to replace bind() with live() in uploadify code but that did not work because bind() allows to pass [data]. The LiveQuery plugin http://docs.jquery.com/Plugins/livequery does not have the same syntax as bind() either. Is there anything similar to bind but works for live elements?
If I don't try to replace bind() function and keep uploadify code the same. Does anyone know how to change code in FancyBox so that it WILL NOT make a clone to generate live elements? I know this is a hard question too.
Note: FancyBox site seems dead --> http://www.visual-blast.com/javascript/fancybox-jquery-image-zooming-plugin/
Thank you very much!
You might consider changing the FancyBox code to support calling a callback function after it clones the HTML. Then, put the uploadify() call in the callback function.
You could overload the live method, making it support data as the second parameter:
jQuery.fn.live = (function(_live){
return function( type, data, fn ) {
var _fn;
if ( jQuery.isFunction(fn) ) {
_fn = function(e) {
e.data = data;
return fn.call( this, e );
};
}
return _live.call( this, type, _fn || fn || data );
};
})(jQuery.fn.live);
Replacing all instances of bind(...) with live(...) should now work.
Note: you'll have to put the overloaded method above everything else.
From my experience , the only way I have found to do this is by using livequery
It has a similar syntax, and in your case to bind uploadify on a live element, you would use
$('#fileInput').livequery(function(){
$(this).uploadify();
})
Livequery accepts functions without events, and executes them everytime there is a change in the DOM
How is the element generated? If its fetched from the server using jQuery you can use a more hackish way of fixing it, simply put jQuery runs eval() on any script tags it runs into so you could just put:
<script type='text/javascript'>
$(function(){
$('#fileInput').uploadify();
});
</script>
In the fetched html and it'll bind it on load instead of trying to watch over it live. Bonus points, if you fetch the html again it'll be unbound.