We Keep Coding

Display loading icon once while waiting for AJAX call

I'm populating a table with data that automatically updates every 4 seconds using AJAX. I want to display a loading message while waiting for the AJAX to load on the initial page load only.
At the moment I have managed to display the loading message but the message appears every time the data is updated via AJAX (Every 4 seconds) - I want the loading message to only display on the initial page load before the AJAX loads initially. All subsequent AJAX updates should not display the loading message as the table has already been populated with data.
<div id="loading" style="display: none;">Loading..</div>
<script type="text/javascript">
$(document).ajaxStart(function(){
$("#loading").show();
}).ajaxStop(function() {
$("#loading").hide();
});
</script>
<script type="text/javascript">
var auto_refresh = setInterval(
function () {
$('#load_onlineusers').load('/online_players.php').fadeIn("slow");
}, 4000);
</script>
<div id="load_onlineusers"> </div>
Above is the code that is causing the loading message to display every 4 seconds.

Use beforeSend method to show loading message and control using a global variable:
var executed = false;
$.ajax({ url: "",
type: "",
data: "",
beforeSend: function() {
if (!executed) {
// Show loading
executed = true;
}
},
complete: function() {
// Hide loading
},
success: function(data) {
}
});

refresh page on success

I'm using the javascript code below to load recrefresh.php when the page initially loads. When the function ajaxvote is executed I want the following div to refresh:
<div class="recrefresh"></div>
I tried adding the following after success:, but the div doesn't refresh after executing ajaxvote:
$.get('recrefresh.php', function(data) {
$('.recrefresh').html(data);
});
Entire Script:
<div class="recrefresh"></div>
<script type="text/javascript">
$.get('recrefresh.php', function(data) {
$('.recrefresh').html(data);
});
</script>
<script>
$('.ajaxvote').click(function(e){
e.preventDefault(); // Prevents default link action
$.ajax({
url: $(this).attr('href'),
success: function(data){
alert("Vote Saved.");
$.get('recrefresh.php', function(data) {
$('.recrefresh').html(data);
});
}
});
});
</script>

use this
<script>
$(document).ready(function(){
//run function here
refreshMyDiv();
//click event for dynamically generated elements
$('.recrefresh').on('click' , '.ajaxvote' , function(){
//run function inside click
refreshMyDiv();
});
});
// function to refresh the .recrefresh div
function refreshMyDiv(){
$.get('recrefresh.php', function(data) {
$('.recrefresh').html(data);
});
}
</script>

To solve this issue take parent div to <div class="recrefresh"></div> because direct div does not load sometimes so wrap this div with other div say for ex.
<div class="recrefresh_parent"><div class="recrefresh"></div></div>
and use recrefresh_parent to refresh table.
There is the way to refresh or load div after ajax call:
$('.recrefresh_parent').load("recrefresh.php .recrefresh_parent");

Set page load Processing time

I add loading image in code that image loading till when the whole process is not completely done but how i know the page loading time because the processing time always change according to the data.
I have mention the time in my below javascript code.
<script>
$('#save').click(function() {
$('#loading').html('<img src="./images/ima.png"> loading...');
$.ajax({
success : function(d) {
setTimeout(function() {
$('#loading').html('<img src="./images/images.png">');
}, 2000);
}
});
});
</script>

Use complete to hide your loading image, instead of setout in ajax success method, this way loading image will be hidden once ajax request completes,irrespective of error or success.
<script>
$('#save').click(function() {
$('#loading').html('<img src="./images/ima.png"> loading...');
$.ajax({
success : function(d) {
//handle success
},
error: function(xhr) {
// hanndle if error occurs
},
complete: function() {
//hide loading here
$('#loading').html('<img src="./images/images.png">');
}
});
});
</script>

reinitialize other javascript functions after loading a page with ajax pagination

Apologies, a total newb here. How can I load other plugins, and let other separate scripts function after loading an ajax generated page? This is my curent code:
jQuery(document).ready(function($) {
var $mainContent = $("load-content"),
siteUrl = "http://" + top.location.host.toString(),
url = '';
$(document).delegate("a[href^='"+siteUrl+"']:not([href*='/wp-admin/']):not([href*='/wp-login.php']):not([href$='/feed/'])", "click", function() {
if($.browser.msie){
var myie="/"+this.pathname;
location.hash = myie;
//alert(location.hash);
}else{
location.hash = this.pathname;
}
return false;
});
$("#searchform").submit(function(e) {
$search = $("#s").val();
$search = $.trim($search);
$search = $search.replace(/\s+/g,'+');
location.hash = '?s='+$search;
e.preventDefault();
});
$(window).bind('hashchange', function(){
url = window.location.hash.substring(1);
if (!url) {
return;
}
url = url + " #content";
$('html, body, document').animate({scrollTop:0}, 'fast');
$mainContent.fadeOut(500, function(){$('#content').fadeOut(500, function(){
$("#loader").show();});}).load(url, function() {
$mainContent.fadeIn(500, function(){
$("#loader").hide(function(){ $('#content').fadeIn(500);});});});
});
$(window).trigger('hashchange');
});
How can embedded objects on pages retain their functionality? Mainly videos, slideshows and other media that use javascript like
video js (html5 video player)
vimeo
and
portfolio slideshow for wordpress

When you load ajax-generated markup it will not retain the functionality it had before. In your example above, you're initialising things when the DOM is ready to be acted upon. In order to make sure any plugins, etc, are running after you perform the ajax request you need to reinitialise them.
Given your code sample above, I'd recommend a little restructuring. For example, you could create a function called init which you could call to initialise certain plugins:
function init () {
$("#plugin-element").pluginName();
}
jQuery(document).ready(function () {
// Initialise the plugin when the DOM is ready to be acted upon
init();
});
And then following this, on the success callback of you ajax request, you can call it again which will reinitialise the plugins:
// inside jQuery(document).ready(...)
$.ajax({
type: 'GET',
url: 'page-to-request.html',
success: function (data, textStatus, jqXHR) {
// Do something with your requested markup (data)
$('#ajax-target').html(data);
// Reinitialise plugins:
init();
},
error: function (jqXHR, textStatus, errorThrown) {
// Callback for when the request fails
}
});

Javascript jQuery How to load default image if

I wanted to load the default image if the user's one didn't exist. I tried this but it didn't work.
$('#avatar').load(function(){
// ... loaded
}).error(function(){
// ... not loaded
$(this).attr('src','/images2/no-avatar2.png');
});
Anyone know how I could do this?
Someone uses this:
function loadDefault(f, ff) {
img = document.getElementById(f);
if(!img.complete) {
img.src = ff;
}
if(typeof(img.naturalWidth) != "undefined" && img.naturalWidth == 0) {
img.src = ff;
}
}
function init() {
setTimeout("loadDefault('side_avatar', '/images/default/avatar_player_profile.gif')", 100);
setTimeout("imageResize(740)", 100);
tooltip = new ToolTip();
tooltip.init('hoverBox', 'loading...');
}
How could I use something like this?

It looks like you are missing your load url as the first parameter of the load() function. Also, without seeing your HTML, I'll assume #avatar is an img tag the way you are using it in the error function. I don't think you can load HTML into an img so you may be better off structuring your html and js like so:
HTML Example:
<div id="avatarDiv">
<img id="avatar" src="" alt="" />
</div>
JS Example:
$('#avatarDiv').load('avatar.php', function() {
// ... loaded
}).error(function() {
// ... not loaded
$('img#avatar').attr('src','/images2/no-avatar2.png');
});
Then just make sure your avatar.php file returns the full html of the image object:
<img id="avatar" src="successful-avatar.jpg" alt="" />
Docs: http://api.jquery.com/load/

I'd try something like this:
$.get("get-avatar.php", function(response) {
$("#avatar").attr('src', response);
}).error(function(response) {
$(this).attr('src', '/images2/no-avatar2.png');
})
as long as avatar.php returns a http error message if the image doesn't exist.

This routine uses ajax to see if the image file exists:
HTML:
<img id='avatar' src='/images2/avatar2find.png' alt='No Image Available'></img>
Script:
$(window).load(function() {
var $img = $('#avatar');
$.ajax({
url: $img.attr('src'),
type: 'get',
statusCode: {
404: function() {
$img.attr('src', '/images2/no-avatar2.png');
}
},
error:
function() {
// do something?
}
});
});