On my site I want to load "pages" dynamicly via jQuery's load() function and I would like to add a loading animation.
function loadPage(){
$("#content").load("example.html");
}
Where would I put code to show <div id="loading"></div> while jQuery loads that content??
Thanks In Advance.
Use the callback function of .load() to hide the loading div when it is finished.
function loadPage(){
$('#loading').show();
$("#content").load("example.html", function () { //calback function
$('#loading').hide();
});
}
You can try something like this:
$(document).ready(function() {
$(this).ajaxSend(function() {
$(this).append('<div id="loading"></div>');
}).ajaxStop(function() {
$('#loading').remove();
});
});
Which will work for all of your ajax calls...
I don't know exactly what you want to do, but probably you want to load content to a div.
You should create a css class:
.loading {
background: url(loading.gif) center center;
}
and add this class to your div (after you clear it) with addClass() when you start loading, and remove it with removeClass in .load callback.
Related
I have 2 external html pages loaded by this code:
<div id="header-div"></div>
<div id="footer-div"></div>
my js file contains this:
$(function () {
$("#header-div").load("/AfekDent/header.html");
$("#footer-div").load("/AfekDent/footer.html");
});
I want to run a function when specific element in the header file is created -
what trigger can i use for it?
It's ok the trigger will occur when all elements will be loaded.
thanks!
Add a callback to your load() call.
$(function () {
$("#header-div").load("/AfekDent/header.html", function() {
console.log('My header was loaded!');
});
});
You can use a callback on the #header-div, which will execute the code after the entire header has loaded.
$("#header-div").load("AfekDent/header.html", function() {
someFunction();
});
However, if you want to execute code after a specific element in the header loads, try something like:
$("#specific-element").on("load", function() {
someOtherFunction();
});
If you want to learn more about the difference between load and on("load"), look at this question or read the jQuery documentation for load and on().
For simplicity, I'd recommend executing code with $(document).ready(function() {yetAnotherFunction();});, but it depends on your specific case.
I try to add css class with js to element.
I'm trying to add a CSS class to an HTML element via Javascript.
(function ($) {
"use strict";
$(document).ready(function () {
$('.delete').addClass('icon-trash');
});
})(jQuery.noConflict());
But when this element is loaded with ajax I need to refresh the page to see it.
How can i fix it ?
You have not used ajax in this, You have just used jquery.Read about Ajax Call and than use it.
If you want to go with this same code of yours than try to call this function onload
like <body onload="myFunction()">
Add this line of code $('.delete').addClass('icon-trash') on ajax success callback as below:
$.ajax({
...
success: function(data){
// if you want to play with response, data is what you want
// Add trash icon to every .delete element in document
$('.delete').addClass('icon-trash');
}
...
});
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...
How can I get one script of jQuery to start after another one has finished (or time it when you want it to start)? I have a content area that fades in on page load:
$(document).ready(function() {
$("#content").hide();
$(window).load(function() {
$("#content").fadeIn(3000);
});
});
Than, once that fades in I want the nav bar above the content area to slide toggle down. I'm trying to make the scripts act in accordance with the timing of one another. OK, thank you.
Use .fadeIn()'s callback:
$("#content").fadeIn(
3000,
function() {
//do stuff here
}
);
$(document).ready(function() {
$("#content").hide();
$(window).load(function() {
$("#content").fadeIn(3000, function() {
$('#navBar').slideDown('slow')
});
});
});
.fadeIn() allows you to specify a function to be called once its complete. is the $(window).load() necessary here with $(document).ready()?
I know this has been asked and answered many times in this forum. But it does not work in what I am looking for.
I want to display a loading indicator while the ajax div is loading. There are cases when it takes a few minutes to load so it would be good to let the user know that the is loading.
From what I gathered it can be done in jquery. I am not too familiar with jquery yet. With this code the loading works but only for the first page.
$(document).ready(function() {
$('body').append('<div id="ajaxBusy"><p><img src="ajax-loader.gif"></p></div>');
});
$(document).ajaxStart(function(){
$('#ajaxBusy').show();
}).ajaxStop(function(){
$('#ajaxBusy').hide();
});
My page is structured like this
Header Page
-Div (display ajax here)
-Another div within the first loaded page(Load another page through ajax here)
I need it to display the loading indicator in the second div while it's loading. I am assuming that jquery "body" appends it to the main page body once and doesn't run again as it's within the same page. I did try to create a div and instead of body, load the div in jquery but it doesn't work.
Any help will be greatly appreciated.
I found that the easiest way to add the loader gif to specific elements is to create a CSS class with the loader as a background instead of appending an actual image:
.ajax-loader {
background: url(ajax-loader.gif) center center no-repeat;
}
Then you just add that class to the element you are loading and remove it when it is done:
// Removes any loaded images on Ajax success
var removeLoader = function(event, XMLHttpRequest, ajaxOptions)
{
$('.ajax-loader').removeClass('ajax-loader');
};
// Add the ajax loader to a specific element and remove it when successful
$('.div1').addClass('ajax-loader').load('mypage.html', removeLoader);
considering that the div you want to load your image has an id="theDiv"
$(document).ready(function() {
$('#theDiv').append('<div id="ajaxBusy"><p><img src="ajax-loader.gif"></p></div>');
});
Is there a reason you're appending your "ajaxBusy" div via Javascript? Why not just include the HTML on the page itself?
<div id="main">
<div id="ajaxBusy">
<p><img src="ajax-loader.gif"></p>
</div>
</div>
Try binding the ajaxStart and ajaxStop to the ajaxBusy div instead of the document.
$('#ajaxBusy').ajaxStart(function(){
$(this).show();
}).ajaxStop(function(){
$(this).hide();
});