I am loading content, mostly images, through this ajax call, and would like to fade the div in only when all of the images are completely loaded. For this reason, I thought that I should use .ready, so that all of the content was loaded before I use jquery to fade it in, but for some reason the images are not completely loaded when the div gets faded in, which makes it seem like it is not waiting for everything to load.
I am basically wanting to build a preload, for this AJAX content
function getPage() {
var data = 'page=' + encodeURIComponent(document.location.hash);
$.ajax({
url: "loader.php",
type: "GET",
data: data,
cache: true,
success: function (html) {
$('#content').html(html);
$("#slider").easySlider();
$(this).ready(function() {
$('#body').fadeIn('slow');
$('#loader').fadeOut('slow');
});
}
});
Thank you for the help in advance. I am still a beginner.
example:
Edit:
Oh, now I see what's your problem!
When the success() function is fired, you gotta add a .load event to the images inside #content!
You gotta do something like this
function getPage() {
var data = 'page=' + encodeURIComponent(document.location.hash);
$('#loader').fadeIn('slow');
$.ajax({
url: "loader.php",
type: "GET",
data: data,
cache: true,
success: function (html) {
$('#content').html(html);
$("#slider").easySlider();
$('#content img').load(function(){
$('#body').fadeIn('slow');
$('#loader').fadeOut('slow');
});
}
});
}
Related
I got a html page #main that is fully loaded by a javascript function loadNe(). After the page gets fully loaded by the Ajax call, I want some tooltips to be shown when mouseovering some rows. Those tooltips makes Ajax requests to exhibit its content. The problem is:
The "open:" function inside tooltip() is probably never being executed because nothing gets printed in the console by the console.log() inside it. And also no network requests are sent to the tooltip's ajax URL. But still, the tooltip is working when I mouseover the elements, it shows me the title's tag content "Loading...".
What can be going wrong here?
function loadNe(ne){
$.ajax({
type: "GET",
url: "/NOKIA/fx-load.php?label=" + ne,
dataType: "text",
success: function (data){
var content = fillResult(data);
$("#main").html(content).hide();
$("#main").fadeIn("slow");
$(".sfp").tooltip({
track: true,
open: function (event, ui){
var sfp = $(this).text();
console.log("1-executing.."+sfp);
$.ajax({
type: "GET",
url: "/NOKIA/sfp-load.php?sfp="+sfp,
dataType: "json",
success: function(data){
console.log("2-executing.."+data["reach"]);
var html = "<tr><td>Alance: "+data["reach"]+"</td></tr>"+
"<tr><td>Tamanho de onda: "+data["wavelength"]+"</td></tr>"+
"<tr><td>Limiar Rx: "+data["rx_min"]+"</td></tr>";
$(".sfp").tooltip('option','content',html);
}
});
}
});
}
});
}
The problem was I was loading the bootstrap.min.js before the js-ui.min.js. The tooltip() function was executing the bootstrap library instead of the js-ui. So I inverted the order of loading as it is down here:
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="js-ui/jquery-ui.min.js"></script>
Im trying to show a loading div while waiting for an ajax call to complete. I have tried a couple of methods but cant seem to get anything to work consistently.
with my current code it works if i have a break point on the function that shows the div once the ajax is complete.
Fiddle
var https = 'https://www.googleapis.com/calendar/v3/calendars/';
function HideCheckShowLoading(checkId) {
$("#check_" + checkId).hide('slow', function() {
$("#loading_" + checkId).show('slow');
});
};
function HideLoadingShowCheck(checkId) {
$("#loading_" + checkId).finish().hide('slow', function() {
$("#check_" + checkId).finish().show('slow');
});
};
$(document).ready(function() {
$('#get').click(function() {
HideCheckShowLoading(1);
$.ajax({
url: https,
dataType: 'jsonp',
type: "GET",
success: function(response) {
//do something
},
error: function() {
//do something else
}
}).done(function() {
HideLoadingShowCheck(1)
});
});
$('#get2').click(function() {
HideLoadingShowCheck(1);
});
});
#check_1
{
background-color:red;
}
#loading_1
{
background-color:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="check_1">Check</div>
<div hidden id="loading_1">LOADING</div>
<button id="get">Get</button>
<button id="get2">Get2</button>
What i would like to happen is,
on the click of a button we hide the check div
we show the loading div
make the ajax call
if successful do something(Reload the contents of the check div)
hide the loading div
show the check div
As said I have tried a few methods that i have found but i repeatedly get stuck with just the loading div shown
Thanks
I believe you may be slightly over-complicating things here. Something simple like this would suffice:
$('#get').click(function() {
HideCheckShowLoading();
$.ajax({
url: https,
dataType: 'jsonp',
type: "GET",
success: function (response) {
//do something
},
error: function() {
//do something else
},
complete: HideLoadingShowCheck
});
});
If you don't want the HideLoadingShowCheck routine to happen after success or error (standard behavior of complete), you can just move a function call HideLoadingShowCheck(); into your success and error blocks instead of using complete.
When you add () to a function name, it calls it immediately and returns the result. What you want to do is pass the function itself, not the result of the function - and you do that without the ().
There's no need for the $.when (assuming HideCheckShowLoading() doesn't make an ajax call, the jquery animations work differently), and $.ajax returns the promise itself, so you can update your code to:
$(document).ready(function() {
$('#get').click(function() {
HideCheckShowLoading();
$.ajax({
url: https,
dataType: 'jsonp',
type: "GET",
success: function (response) {
//do something
},
error: function() {
//do something else
}
})
//.done(HideLoadingShowCheck);
.done(function() { HideLoadingShowCheck(otherparams); })
});
});
I would change the showcheck function to add .finish() incase it's still animating from the showhide:
function HideLoadingShowCheck() {
$("#loading").finish().hide('slow',function () {
$("#check").finish().show('slow');
});
};
I have a problem with an animation (fadeIn). It doesn't work after ajax. There is just NO ANIMATION but the content appears.
My code is like:
function ajax(varia) {
return $.ajax({
dataType: "html",
async: false,
type: 'POST',
url: 'index.php?fn=' + varia,
data: { token: "mytoken" }
});
}
Function with ajax works fine...
ajax("login").done(function (data) {
$("body").prepend(data);
}).done(function () {
// The #login have atribute style="display: none;"
$("#login").fadeIn(500);
});
This problem can be resolved with using delay before the fade, but i think it should be fine without this. Why it's not?
Thats probably because JavaScript is an asynchroneus language. What you are experiening is a synchronization issue:
Your ajax is done, you are firing DOM manipulation (prepend()), and imidiately after you fire it you do the fadeIn() but the fadeIn is complete before your data is prepended, so probably you'are calling fadeIn() on an element that doesn't exist yet.
Try this:
ajax("login").done(function (data) {
$("body").prepend(data);
setTimeout(function(){
$("#login").fadeIn(500);
},0);
});
And read this to understand why using timeout 0 is sometimes helpful: Why is setTimeout(fn, 0) sometimes useful?
By wrapping your action with setTimeout function you are basically telling: "wait until everything is done before doing this".
Here's the fiddle: jsFiddle
Did you try to put both calls into the same .done()-Block?
I think this should work:
ajax("login", "html").done(function (data) {
$("body").prepend(data);
// The #login have atribute style="display: none;"
$("#login").fadeIn(500);
});
In this case it should be guaranteed that the two lines of code are executed
successively.
I've made an live example here: http://jsfiddle.net/xLo93d29/
For me it works.
You should use "success" instead of "done":
function ajax(varia) {
$.ajax({
dataType: "html",
async: false,
type: 'POST',
url: 'index.php?fn=' + varia,
data: { token: "mytoken" },
success: function(data) {
$("body").prepend(data);
// The #login have atribute style="display: none;"
$("#login").fadeIn(500);
}
});
}
ajax("login", "html");
May be you can do like this
.done(function (data) {
var $data = $(data).hide();
$data.prependTo($("body"));
$data.fadeIn(500);
});
$(document).ready(function () {
var j = jQuery.noConflict();
j('.refresh').click(refreshDiv);
j('.refresh').css({
color: ""
});
function refreshDiv() {
j.ajax({
url: "refresh.php",
cache: true,
success: function (html) {
j(".refresh").html(html);
}
});
}
});
I have this code ,but I am confused how to display that div gets refreshed.Please provide me some code or links to refer.I am making site in which I want to update the score when I refresh the div using ajax.
In your ajax request specify dataType:'html' as shown :-
j.ajax({
url: "refresh.php",
dataType:"html",
cache: true,
success: function (html) {
j(".refresh").html(html);
}
});
You can user the different state of Ajax please refre Ajax Details Desc
Then put beforeSend() function put any loading gif img
Then on complete() hide or remove that image
and on success return the data to div.
Try putting your function in global scope and add the relevant datatype:
function refreshDiv() {
$.ajax({
url: "refresh.php",
datatype:"html",
cache: true,
success: function (html) {
$(".refresh").html(html);
}
});
}
$(document).ready(function () {
$('.refresh').click(refreshDiv);
$('.refresh').css({
color: ""
});
});
Another suggestion is try replacing $ with your j which you have used for jQuery.noConflict() utility.
A small demo could help you.
I am using jquery to fadein div which i animate to get bigger and then i load php file in it using ajax. Problem is that ajax loads php file before div is visible and animated big enough. Therefore php page shows onscreen and after that div loads under it. How can i slow down php page loading or make it visible after div is visible? Toppi and links are variables. Toppi contains position of div and links php page name.
Here is the code i use:
$("#riv1").css("top", + toppi);
$("#riv1").fadeIn();
$("#riv1").animate({height:'600px',opacity:'0.4'},"fast");
$("#riv1").animate({width:'850px',opacity:'0.8'},"fast");
$("#riv1").animate({opacity:'1.0'}, 500);
if (links != '') {
$.ajax({
async:false,
url: links,
cache: false
}).done(function( html ) {
$("#riv1").html(html);
});
}
I have tried
$("#riv1").delay(2000).html(html);
but this does not help.
Try to put the ajax code in a callback function of fadeIn():
$("#riv1").css("top", + toppi);
$("#riv1").fadeIn("slow",function(){
if (links != '') {
$.ajax({
async:false,
url: links,
cache: false
}).done(function( html ) {
$("#riv1").html(html);
});
}
});
$("#riv1").animate({height:'600px',opacity:'0.4'},"fast");
$("#riv1").animate({width:'850px',opacity:'0.8'},"fast");
$("#riv1").animate({opacity:'1.0'}, 500);
the ajax function will be called only when the fadeIn has been finished.
$("#riv1").css("top", + toppi);
$("#riv1").fadeIn();
$("#riv1").animate({height:'600px',opacity:'0.4'},"fast");
$("#riv1").animate({width:'850px',opacity:'0.8'},"fast");
$("#riv1").animate({opacity:'1.0'}, 500,function(){
//calling ajax after animation completed
if (links != '') {
$.ajax({
async:false,
url: links,
cache: false
}).done(function( html ) {
$("#riv1").html(html);
});
}
});
try making a ajax call once the final animation is completed
Happy Coding :)
You can show the loading image before jquery ajax request by using the function
beforeSend and can hide the loading image on success like below
$.ajax({
beforeSend:function(){
//you logic to add the loading image inside the div
}
async:false,
url: links,
cache: false
}).done(function( html ) {
//Hide the images or replace the div with new content
$("#riv1").html(html);
});