Want to keep div contents up while loading

[wee493]

I'm using the Ajax example that is in the sticky here for a site I'm working on. I want to keep the contents of the div displayed while loading instead of just the loading message. I have messed with the code a little bit, but have had no luck.

 

Currently it is displaying the contents of the div, but not the loading message

 

You can check it out in action here http://wiurl.net/music/index.php

 

// start ajaxrequest.js


// Following is a javascript function that makes a httprequest - AJAX. This is the AJAX bit and all that is needed in that manner.
// Only in this one we won't be using XML in our response, we will accept and handle
// pure text and html and display this response directly to the user within the
// desired <div id> tags. It can even be used to include pure html files as a substitute
// solution to the "old" frames method where as no php or other scripting language is nessesary on the server.
// but use it with care - it is not a search engine supported method and indexing will fail. Workaround for this is not included here

function MyAjaxRequest(target_div,file,check_div){

var MyHttpRequest = false;
var MyHttpLoading = '<div id="load_box"><div id="loading" align="center">Loading...</div></div>'; // or use an animated gif instead: var MyHttpLoading = '<img src="loading.gif" border="0" alt="running" />';
var ErrorMSG = 'Sorry - No XMLHTTP support in your browser, buy a newspaper instead';

if(check_div) {
var check_value = document.getElementById(check_div).value;
} else {
var check_value = '';
}


if(window.XMLHttpRequest){ // client use Firefox, Opera etc - Non Microsoft product
try {
	MyHttpRequest = new XMLHttpRequest();
} catch(e) {
		MyHttpRequest = false;
}
} else if(window.ActiveXObject) { // client use Internet Explorer
try {
	MyHttpRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
	try {
		MyHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
	} catch(e) {
		MyHttpRequest = false;
	}
}
} else {
MyHttpRequest = false;
}



if(MyHttpRequest){ // browser supports httprequest
var random = Math.random() * Date.parse(new Date()); // make a random string to prevent caching

var file_array = file.split('.'); // prepare to check if we have a query string or a html/htm file
if(file_array[1] == 'php'){ // no query string, just calling a php file
  var query_string = '?rand=' + random;
  
} else if(file_array[1] == 'htm' || file_array[1] == 'html'){ // calling a htm or html file
  var query_string = '';
  
} else { // we have presumable a php file with a query string attached
  var query_string = check_value + '&rand=' + random;
}


MyHttpRequest.open("get", url_encode(file + query_string), true); // <-- run the httprequest using GET


// handle the httprequest
MyHttpRequest.onreadystatechange = function ()
{
if(MyHttpRequest.readyState == 4) // done and responded
{
document.getElementById(target_div).innerHTML = MyHttpRequest.responseText; // display result
}
else
{
//document.getElementById(target_div).innerHTML = MyHttpLoading; // still working
var div_not_loading = document.getElementById( check_div );
div_not_loading.innerHTML = '<div id="load_box"><div id="loading" align="center">Loading...</div></div>' + div_not_loading;
}
}
MyHttpRequest.send(null);
var div_not_loading = document.getElementById( check_div );
div_not_loading.innerHTML = '<div id="load_box"><div id="loading" align="center">Loading...</div></div>' + div_not_loading;
}
else
{
document.getElementById(target_div).innerHTML = ErrorMSG; // the browser was unable to create a httprequest
}
}
// end of "AJAX" function


// Here follows a function to urlencode the string we run through our httprequest, it has nothing to do with AJAX itself
// If you look carefully in the above httprequest you se that we use this url_encode function around the file and query_string
// This is very handy since we are using GET in our httprequest and for instance
// any occurrance of the char # (from textboxes etc) will brake the string we are sending to our file - we don't want that to brake!
// It will also convert spaces to +

function url_encode(string){
var string;
var safechars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz/-_.&?=";
var hex = "0123456789ABCDEF";
var encoded_string = "";
for(var i = 0; i < string.length; i++){
var character = string.charAt(i);
if(character == " "){
encoded_string += "+";
} else if(safechars.indexOf(character) != -1) {
encoded_string += character;
} else {
var hexchar = character.charCodeAt(0);
if(hexchar > 255) {
encoded_string += "+";
} else {
encoded_string += "%";
encoded_string += hex.charAt((hexchar >> 4) & 0xF);
encoded_string += hex.charAt(hexchar & 0xF);
}
}
}
return encoded_string;
}
// end .js file

 

This is where the changes I have made are

else
{
//document.getElementById(target_div).innerHTML = MyHttpLoading; // still working
var div_not_loading = document.getElementById( check_div );
div_not_loading.innerHTML = '<div id="load_box"><div id="loading" align="center">Loading...</div></div>' + div_not_loading;
}
}
MyHttpRequest.send(null);
var div_not_loading = document.getElementById( check_div );
div_not_loading.innerHTML = '<div id="load_box"><div id="loading" align="center">Loading...</div></div>' + div_not_loading;
}
else

[wildteen88]

You should be able to do

div_not_loading.innerHTML += '<div id="load_box"><div id="loading" align="center">Loading...</div></div>';

 

rather than

div_not_loading.innerHTML = '<div id="load_box"><div id="loading" align="center">Loading...</div></div>' + div_not_loading;

[wee493]

You should be able to do

div_not_loading.innerHTML += '<div id="load_box"><div id="loading" align="center">Loading...</div></div>';

 

rather than

div_not_loading.innerHTML = '<div id="load_box"><div id="loading" align="center">Loading...</div></div>' + div_not_loading;

 

For some reason that does not seem to be working.

 

Here is what I've recently tried

var div_not_loading = document.getElementById("main");
var div_not_loading.innerHTML += '<div id="load_box"><div id="loading" align="center">Loading...</div></div>';
div_not_loading.innerHTML = div_not_loading;

[wildteen88]

Your code is wrong it should be just

var div_not_loading = document.getElementById("main");
div_not_loading.innerHTML += '<div id="load_box"><div id="loading" align="center">Loading...</div></div>';