How to load a jQuery function only after the document finish loading - javascript

Strange situation:
I am building a menu bar using jQuery and CSS.
In my JavaScript file, I have an on-ready function like so:
$(document).ready(function(e) {
mark_active_menu();
}
and...
function mark_active_menu() {
var elementWidth = $("nav li").width();
alert(elementWidth);
}
For some reason, even BEFORE all the document finish loading, I'm getting the alert message with an incorrect width. Only when I release the message, the rest of the document loads and I'm getting the right width as it should be.
Why my function is being called BEFORE all the document finish loading?
Is there a way to load the function only AFTER a certain element done loading (Example: the nav element)?

You can use window.load, it will be triggered after all the resource have completed loading.
$(window).load(function(e) {
mark_active_menu();
});
The load event fires at the end of the document loading process. At
this point, all of the objects in the document are in the DOM, and all
the images and sub-frames have finished loading, Reference

All the current solutions are just treating symptoms of the main problem. If you want your handler to execute after all your ajax loads, then you may use a promise.
var ajax1 = $.ajax();
var ajax2 = $.ajax();
jQuery(function($) {
$.when.apply($, [ajax1, ajax2]).done(function() {
// your code here
});
});

Try on the window load event :
$(window).load(function() {
//Stuff here
});

To be sure, Try window load
$(window).load(function(e) {
mark_active_menu();
}

Before(sometimes, doesn't load absolutely at the beginning, a few milliseconds after(0-200ms about)):
$(document).ready(function(){
$('body').hide(0);
});
After:
$(window).load(function(){
$('body').delay(500).show(0);
});

In my situation of work with AJAX and HTML. I have the same problem with functions $(document).ready() and $(window).load(). I solved this problem by adding handler of my event (that should work at HTML DOC), to the jQuery function that runs right after AJAX reguest was finished. Read this: "
jQuery.post()" (third parameter in the function).
In my code it looks like this:
var RequestRootFolderContent = function(){
$.post(
'PHP/IncludeFiles/FolderContent.inc.php',
function(data){
$('[class~="folder-content"]').html(data);
//Here what you need
$('[class~="file"]').dblclick(function(){
alert("Double click");
});
}
)
}

Related

Rails:-location.Href not working in project

I am a newbie on javascript and was implementing a loader in the project..
I have used the below code for the implementation of loader but it is not working:-
var url = "http://localhost:3500/#!/Movies";
<script>
$(function(){ //Loader implementation
if (location.href==url){
$(window).ready(function(){
$('#loadIndicator1').fadeOut(1000);
return false;
});
}
});
</script>
I am calling the loadindicator in the code as:-
<ul>
<li id="loadIndicator1" style="position:absolute ;top:50%;left:50%;z-index:99999;"></li>
</ul>
I am not very sure why this is giving an issue.I am using jquery-1.8.3.min.js and jqueryui-1.10.2.js
Also when I hover on location..I get unresolved variable location.Please help me with this.
use
if (window.location.href==url)
instead of
if (location.href==url)
var url = "http://localhost:3500/#!/Movies";
$(function(){
if (location.href==url){
$(window).load(function(){
$('#loadIndicator1').fadeIn(1000);
});
}
});
this will show your loader once the webpage is fully downloaded
use $('#loadIndicator1').fadeOut(1000); to hide the loader once the content is loaded.
Ignoring window ready, using only document ready
$(function() {
if (window.location.href === url){
// $(window).ready(function(){
$('#loadIndicator1').fadeOut(1000);
return false;
// });
}
});
You should remove the part I have commented out. The problem is, you attached an event handler to document ready, and if your are on a specific URL, you attach an event handler to window ready, but that event was already fired, and it won't be fired again.
Using window load after document ready
Another possible solution:
$(function() {
if (window.location.href === url){
$(window).load(function(){
$('#loadIndicator1').fadeOut(1000);
return false;
});
}
});
The window load event fires later, than document ready - though this should be tested.
Ignoring document ready, using only window load
Third time is a charm, another solution which may be the best, simply ignore the document ready event, and only use the window load:
$(window).load(function () {
if (window.location.href === url) {
$('#loadIndicator1').fadeOut(1000);
return false;
}
});
This case though the loader only appears if everything is loaded on the page, so maybe this is not what you want -- in this case use the first option.

An element in $(document).ready is undefined in a certain situation

This question comes from
Actually, I was able to find a clue and this is what I found. I have a js file:
$(document).ready(function() {
var myIdElement = $("#some_id");
//............
$.ajax({
url: getFullUrl(myIdElement.val())
})
//..........
So when I come to this page from the another page by a link (html link) then myIdElement is undefined. However, when I reload the page it starts having a proper value. I use turbolinks.
How do I get it to work in all situations?
$(document).ready does not always fire in turbolink. Use page:load event, instead. On the first page, it fires ready event, but on subsequent pages, document has always been ready, hence no document ready event is fired. So, it fires page:load to help us.
function ready () {
// Your code goes here...
}
jQuery(document).ready(ready);
jQuery(document).on('page:load', ready);
Try this:
(function($) {
$(document).ready(function() {
var myIdElement = $("#some_id");
//............
$.ajax({
url: getFullUrl(myIdElement.val())
})
//..........
})(jQuery);

Can someone please tell me why this js function doesn't run on load?

I've:
//Resize tabs - height when window size changes. Don't forget to reset niceScroll
function recalc_tab_height () {
//
var wrapper_h = $(".ui-panel-content-wrap").outerHeight();
var content_h = $(".ui-content").outerHeight();
var current_h = $(".tab1").outerHeight();
var newHeight = (wrapper_h - content_h) + current_h;
//
$(".tab1, .tab2, .tab3").css({"height":newHeight}).getNiceScroll().resize();
}
//Run once onLoad
recalc_tab_height();
That is supposed to resize lyrics section on-load to fit the screen. But it doesn't run at all... any ideas why? it is inside ui.js
http://mac.idev.ge:800/mobile-radio/
try
$(function() {
recalc_tab_height();
});
instead of your last line.
$(...) is a shortcut for $(document).ready(...) and is executed as soon as your page is entirely loaded, so that you can deal with DOM element properties.
Try this : Need to set $(document).ready
$(document).ready(function(){
//Run once onLoad
recalc_tab_height();
});
To load this function either you should use this on body as
<body onload="recalc_tab_height();" >
or by jquery
$(document).ready(function() {
recalc_tab_height();
});
Wrap the function call when the dom is ready.Try like this
$(document).ready(function(){
recalc_tab_height();
});
A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. Code included inside $(document).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute. Code included inside $(window).load(function() { ... }) will run once the entire page (images or iframes), not just the DOM, is ready.
So you have to call your function inside
$(document).ready({...}); or $(window).load(function() { ... });
I changed css() to animate() and it works.

jQuery keyup event not executing immediately

I have following small jQuery script:
$("#content").on("keyup", "#ID1", function() {
$("#ID2").load("loadText", resizeResult());
});
function resizeResult() {
if($("#ID2").height() != $("#ID3").height()){
$("#ID3").animate({
height: $("#ID2").height()
}, 800);
}
}
My problem now is that the resize function will be only executed by the NEXT "keyup" event but I want it immediately when the "load" in ID2 is done.
Call resizeResult() in the end of keyupfunction
$("#content").on("keyup", "#ID1", function() {
..................
resizeResult();
});
call your load function in document.ready too..
$(function(){
$("#ID2").load("loadText", resizeResult()); //<-- call load function in document ready and in keyup function..
$("#content").on("keyup", "#ID1", function() {
$("#ID2").load("loadText", resizeResult());
})
.....
});
and please make sure your url in load is proper path... loadText doesnot seems to be a proper path
Everything looks well in your code. But you need to leave the brackets from the resizeResult function inside the event. Because you don´t want it to call immediately when the browser executes the script. It´s only needed when the event is fired. So you should change your code to this (and my also native common events, which recommend jQuery):
$("#content").keyup(function() {
$("#ID2").load("loadText", resizeResult);
});
function resizeResult() {
if($("#ID2").height() != $("#ID3").height()){
$("#ID3").animate({
height: $("#ID2").height()
}, 800);
}
}
For a safe execution it´s also better to wait until the html is fully loaded or until this html tags are loaded (javascript code after the ID3 container). The first method can be done by using $.document.ready from jQuery.

run jquery code on loaded page via jquery ajax request (load)

I am loading an entire middle div via JQuery Ajax call and I simply want to run $(document).ready on the loaded page
header.php loads part of the page
var $next = $("<div class='nextab center'>").insertAfter('#content .current');
$next.load($this.attr('href')+ ' #content .center section' , function(resp) { ...
}
so for example when header.php loads career.php it does not run all the code that is inside the $(document).ready(function(){ that is on career.php
I was thinking of creating a function init on each page loaded but not sure how to call this function from the load callback
Thanks
function YourActionOnDocumentReady(){
// write whatever you want to do
}
And in document ready call the above function
$(document).ready(function(){
YourActionOnDocumentReady();
});
And use ajaxStop function to run the same code
$(document).ajaxStop(function(){
YourActionOnDocumentReady();
});
Hope it helps...

Categories

Resources