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
Related
What are differences between
$(document).ready(function(){
//my code here
});
and
$(window).load(function(){
//my code here
});
And I want to make sure that:
$(document).ready(function(){
})
and
$(function(){
});
and
jQuery(document).ready(function(){
});
are the same.
Can you tell me what differences and similarities between them?
$(document).ready(function() {
// executes when HTML-Document is loaded and DOM is ready
console.log("document is ready");
});
$(window).load(function() {
// executes when complete page is fully loaded, including all frames, objects and images
console.log("window is loaded");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Query 3.0 version
Breaking change: .load(), .unload(), and .error() removed
These methods are shortcuts for event operations, but had several API
limitations. The event .load() method conflicted with the ajax .load()
method. The .error() method could not be used with window.onerror
because of the way the DOM method is defined. If you need to attach
events by these names, use the .on() method, e.g. change
$("img").load(fn) to $(img).on("load", fn).1
$(window).load(function() {});
Should be changed to
$(window).on('load', function (e) {})
These are all equivalent:
$(function(){
});
jQuery(document).ready(function(){
});
$(document).ready(function(){
});
$(document).on('ready', function(){
})
document.ready is a jQuery event, it runs when the DOM is ready, e.g. all elements are there to be found/used, but not necessarily all the content.
window.onload fires later (or at the same time in the worst/failing cases) when images and such are loaded. So, if you're using image dimensions for example, you often want to use this instead.
Also read a related question:
Difference between $(window).load() and $(document).ready() functions
These three functions are the same:
$(document).ready(function(){
})
and
$(function(){
});
and
jQuery(document).ready(function(){
});
here $ is used for define jQuery like $ = jQuery.
Now difference is that
$(document).ready is jQuery event that is fired when DOM is loaded, so it’s fired when the document structure is ready.
$(window).load event is fired after whole content is loaded like page contain images,css etc.
From the jQuery API Document
While JavaScript provides the load event for executing code when a
page is rendered, this event does not get triggered until all assets
such as images have been completely received. In most cases, the
script can be run as soon as the DOM hierarchy has been fully
constructed. The handler passed to .ready() is guaranteed to be
executed after the DOM is ready, so this is usually the best place to
attach all other event handlers and run other jQuery code. When using
scripts that rely on the value of CSS style properties, it's important
to reference external stylesheets or embed style elements before
referencing the scripts.
In cases where code relies on loaded assets (for example, if the
dimensions of an image are required), the code should be placed in a
handler for the load event instead.
Answer to the second question -
No, they are identical as long as you are not using jQuery in no conflict mode.
The Difference between $(document).ready() and $(window).load() functions is that the code included inside $(window).load() will run once the entire page(images, iframes, stylesheets,etc) are loaded whereas the document ready event fires before all images,iframes etc. are loaded, but after the whole DOM itself is ready.
$(document).ready(function(){
})
and
$(function(){
});
and
jQuery(document).ready(function(){
});
There are not difference between the above 3 codes.
They are equivalent,but you may face conflict if any other JavaScript Frameworks uses the same dollar symbol $ as a shortcut name.
jQuery.noConflict();
jQuery.ready(function($){
//Code using $ as alias to jQuery
});
$(document).ready(function(e) {
// executes when HTML-Document is loaded and DOM is ready
console.log("page is loading now");
});
$(document).load(function(e) {
//when html page complete loaded
console.log("completely loaded");
});
The ready event is always execute at the only html page is loaded to the browser and the functions are executed....
But the load event is executed at the time of all the page contents are loaded to the browser for the page.....
we can use $ or jQuery when we use the noconflict() method in jquery scripts...
$(window).load is an event that fires when the DOM and all the content (everything) on the page is fully loaded like CSS, images and frames. One best example is if we want to get the actual image size or to get the details of anything we use it.
$(document).ready() indicates that code in it need to be executed once the DOM got loaded and ready to be manipulated by script. It won't wait for the images to load for executing the jQuery script.
<script type = "text/javascript">
//$(window).load was deprecated in 1.8, and removed in jquery 3.0
// $(window).load(function() {
// alert("$(window).load fired");
// });
$(document).ready(function() {
alert("$(document).ready fired");
});
</script>
$(window).load fired after the $(document).ready().
$(document).ready(function(){
})
//and
$(function(){
});
//and
jQuery(document).ready(function(){
});
Above 3 are same, $ is the alias name of jQuery, you may face conflict if any other JavaScript Frameworks uses the same dollar symbol $. If u face conflict jQuery team provide a solution no-conflict read more.
$(window).load was deprecated in 1.8, and removed in jquery 3.0
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.
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!!
I have a dynamic list loaded into a HTML 5 web app built using jquery mobile + (jquery and javascript).
I want to display a simple "loading..." image by placing a <div> on the page while the list is populated dynamically. Once the list is complete I need a event to fire to remove the "loading..." image. Is it possible to attach the .ready or .load events to a element of the dynamic list so I get a event to fire when the list has loaded?
Thanks for any advice, searching for existing answers on the .ready subject only provides results about document.ready use of the event.
Use the callback function.
$(function() {
$('#content').html('<div>loading...</div>');
$('#content').load('http://mynewcontent.com/', function(data) {
// optional: do more stuff here.. not needed since the content will already be replaced.
});
});
jQuery's .load provides a complete callback function that you could use to remove the loading image.
http://api.jquery.com/load/
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.