JQuery Ajax: Old content flicks in before showing the loaded content - javascript

have a problem with my ajax code.
I have some links and a content area.
When i click on a link, i hide the content area, load the new data and show the content area again. It works, but when showing the content area, you see the old content for a short time and then it flickers to the new content.
Can i somehow let the loading screen appear for a longer time?
Also the hide function only works the first time i use a link.
jQuery(document).ready(function() {
jQuery('.ajax').click(function(){
var toLoad = jQuery(this).attr('href');
jQuery('#ajax_content').hide('slow',loadContent);
jQuery('#load').remove();
jQuery('#main').append('<span id="load">LOADING...</span>');
jQuery('#load').fadeIn('normal');
function loadContent() {
jQuery('#ajax_content').load(toLoad,'',showNewContent())
}
function showNewContent() {
jQuery('#ajax_content').show('normal',hideLoader());
}
function hideLoader() {
jQuery('#load').fadeOut('normal');
}
return false;
});
});
I have this ajax code from this source
Thanks in advance!

You could try emptying your content element before issuing the AJAX retrieve command:
jQuery(document).ready(function() {
jQuery('.ajax').click(function(){
var toLoad = jQuery(this).attr('href');
jQuery('#ajax_content').hide('slow',loadContent);
jQuery('#load').remove();
jQuery('#main').append('<span id="load">LOADING...</span>');
jQuery('#load').fadeIn('normal');
function loadContent() {
jQuery('#ajax_content').empty().load(toLoad,'',showNewContent())
}
function showNewContent() {
jQuery('#ajax_content').show('normal',hideLoader());
}
function hideLoader() {
jQuery('#load').fadeOut('normal');
}
return false;
});
});
To make the application more robust, you can also use the .queue() methods to build a queue of actions. Then when a user clicks another link while one is already loading, it's easy to cancel.

Related

HTML link with GET parameters: load page html and javascript before executing ajax request

When I paste the HTML link below in my address bar or press the browser "previous page" button my ajax GET request is executed before the html content is fully loaded resulting in my ajax returned content being displayed above my nav bar and therefore breaking my site.
If the same request gets executed from within the site then everything is fine.
How can I make sure the page HTML and javascript loads before the ajax request is fired?
EDIT: SOLVED (answer in post below)
HTML LINK
https://domainName/?action=listy&p=test
JS pushstate
var container = document.querySelector('.lnk');
var url = "";
container.addEventListener('click', function(e) {
if (e.target != e.currentTarget) {
e.preventDefault();
if (e.target.getAttribute('name')) {
var data = e.target.getAttribute('name')
url = "?action=list&p=" + data;
history.pushState(data, null, url);
}
}
e.stopPropagation();
}, false);
window.addEventListener('popstate', function(e) {
window.location.replace(url);
});
JQuery AJAX
$(document).ready(function() {
// .....
success: function(dataBack) {
$('.content-area').html(dataBack);
},
});
PHP
if(isset($_GET['action']) && !empty($_GET['action'])) {
$action = $_GET['action'];
$var = $_GET['p'];
switch($action) {
case 'list' : list($var);break;
}
}
This works for me (Note this uses the jquery library):
$(document).ready(function () {
Your code here...
});
This will wait for the page to load then run the function. I personally use this for animations but then the animations also take more time for me so I have to also include the setTimeout function like this:
setTimeout(function () {
Your code here...
}, 1000);
It waits a specific amount of milliseconds before executing the function.
Turns out the issue was coming from my index.php structure;
I moved the php code in separate files and included it at the end of index.php instead of the top.
Now Im having other issues but the main question is resolved.

jQuery ajaxForm complete works sometimes, other times it only fires a native javascript function then stops

This may be a duplicate of this topic, but I must revive it as my issue seems to be a little deeper than this. I'm currently using ajaxForm() to submit a 4 question quiz to a PHP script, receive the result, and then populate it back into the DIV. The beforeSend function fires, sending the information to the ajax.php script. beforeSend also shows a loading graphic in the quiz container. Then the complete function fires properly as ajax.php returns the HTML to be populated back into the DOM. At that point, everything stops. The next line is a call to slideUp the loading div and then display the returned information in the quizContainer.
At this point if I put in a javascript alert it always fires, meaning that complete is at least firing when it should, but the jQuery reference to the loading div is completely ignored. Here's the code for the javascript file that handles the submission - the section handling this is "Handle the quiz submission":
$(document).ready(function () {
// Get rid of the message box after 15 seconds
setTimeout(function() {
$('#message').slideUp('fast');
}, 10000);
// Handle the Course List LIs
$('#courseList li').on('click', function () {
// Get the background color as it's set initially
var color = $(this).attr('oColor');
jQuery('div', this).toggle('slow', function () {
if ($(this).is(":hidden")) {
$(this).css('background-color', color);
}
});
// Change the background to be the same as the content background when it's expanded
if ($(this).is(":hidden")) {
$(this).css('background-color', '#33CC66');
} else {
$(this).removeAttr('style');
}
});
// Handle the quiz submission
jQuery.fn.exists = function(){return this.length>0;}
if ($('#quizForm').exists()) {
$('#quizForm').ajaxForm({
beforeSend: function() {
$('#quizContainer').slideUp('fast', function () {
$('#loading').show();
});
},
complete: function(xhr, theStatus) {
alert(theStatus);
$('#loading').slideUp('fast', function () {
$('#quizContainer').html(xhr.responseText);
$('#quizContainer').show();
});
}
});
}
});
If necessary I can provide more information and a temporary login to access this if anybody would like to see it in action. I'm currently using jQuery 1.8.1(.)
Thanks for any help!
Jon
I believe the first argument of the complete function is xhr.responseText rather than an xhr object which is actually the third argument. Try removing .responseText from your complete: function.

load gif image while loading the other page using ajax

is there any way that loading GIF image while onclick and simultaneously, navigation should happen.
i tried this way..
$("#Videop").click(function ()
{
//till the time the post function below doesn't return the following image will be displayed
tactile.page.getComponent("loadingnext").show();
$.post("http://cloud.netbiscuits.net/1305494/SyngentaMobileStage/aspx/Video.aspx",
function (data)
{
//get the new HTML content
$("#root").html(data);
});
});
but how about the script files and background function calls associated with that page?
what I understood from your question is, to redirect when #Videop is clicked and show a loading GIF image
$("#Videop").click(function ()
{ //till the time the post function below doesn't return the following image will be displayed
tactile.page.getComponent("loadingnext").show();
window.location.href('http://cloud.netbiscuits.net/1305494/SyngentaMobileStage/aspx/Video.aspx');
});
The above code will show the GIF image, until your page is redirected. Now you will not have the head ache of bringing all the css and script files from that page to here.
EDIT:
in your new page Video.aspx add this, hope this will solve your problem
$(document).ready(function(){
//Display your GIF Image
//tactile.page.getComponent("loadingnext").show();
console.log("I'm loading");
});
jQuery(window).load(function () {
//Hide your GIF image
// tactile.page.getComponent("loadingnext").hide();
console.log('page is loaded');
});
I think what you need is a progress function, and show a waiting image before ajax starts, and hide after ajax ends.
Add a element hidden in the body tag, that could be a image or a loading div.
Define a function.
Call it before and after ajax.
Here is a small demo, hopes to help you out.
#loading{display:none;position:absolute;left:50%;top:50%;width:100px;border:1px solid #ccc;}
<div id="loading">loading...</div>
$.progress = function(stop){
if(stop){
$('#loading').hide();
} else {
$('#loading').show();
}
};
$.ajaxSetup({
beforeSend: function(){
$.progress();
}, complete: function(){
$.progress(true);
}
});
You can change the style by yourself.
jsfiddler was down, I can not write code, sorry about that. :D

User interaction on a page with tipsy

Is there a way I can trace what the user does on the page. Mainly I want to do the following thing: User opens a page, if he does not click anywhere on that page to show a tooltip (i'm using tipsy) guiding him which parts are clickable.
So far I've tried several stuffs:
I have set tipsy to show manually: trigger:manual;
I made a variable that equals false until the user clicks those
clickable items (divs and images)
If the variable is false, show the tooltip (tipsy).
But I'm missing something because this doesn't work. Here is my code.
$(document).ready(function() {
var userClick = false;
function showTooltips() {
$(document).ready(function()) {
if(userClick === false)
$('.nickname .pseudo-white').tipsy('show');
}
setTimeout(showTooltips(), 5000);
});
Try getting rid of the extra call to $(document).ready, and pass the function name to setTimeout rather than calling it with ()
$(document).ready(function() {
var userClick = false;
function showTooltips() {
if(userClick === false)
$('.nickname .pseudo-white').tipsy('show');
}
setTimeout(showTooltips, 5000);
});

javascript and ajax load, then effects

I have a javascript code, whereby I'm trying to load a list from a separate page (using jQuery's load() function), slide the current list out and slide the new list in.
Now, I don't want the old list to slide until after the new list has been completely loaded. Can anyone tell me how to achieve this without looking like the script is having second thoughts while execution..
Thank you.
Edit
$('.cont a').click(function() {
var page = $(this).attr('href');
$('.p-list').prepend('<div class="loader"> </div>');
$('.p-list').load(page +" .proj").hide().fadeIn();
return false;
});
Sorry for not putting the code in. However, I don't really know how much help this is...
This should do it:
$("#someDiv").slideUp("slow").load('blah.html', function() {
$(this).slideDown("slow");
});
If you call the slideDown method in load's callback (or any of the other ajax methods), that will ensure the animation happens after the element has been filled with the response.
EDIT: To apply that to your code:
$('.cont a').click(function() {
var page = $(this).attr('href');
$('.p-list').prepend('<div class="loader"> </div>');
$('.p-list').slideUp("slow").load(page +" .proj", function() {
$(this).fadeIn("slow"); //or show or slideDown
});
return false;
});
You can also try this:
$("#someDiv")
.slideUp("slow", function(){
$(this).load('blah.html', function() {
$(this).slideDown("slow");
}
);
});
It worked better for me, as you load the page once the slideUp effect is done.

Categories

Resources