Ajax/jscript Help

Welcome. Please Login, Register, Or Activate! 
type your username and password to login
Date: November 22, 2009, 10:21 AM
430725 members and 297851 Topics
Latest Member: ISSAAKA
Nairaland [Nigerian Forum] Home Help Search Who is currently online? Login Register
Nairaland Forum  |  Technology  |  Webmasters (Moderators: OmniPotens, yawa-ti-de)  |  Ajax/jscript Help
Pages: (1) Go Down Send this topic Notify of replies
Author Topic: Ajax/jscript Help  (Read 48 views)
cmon (m)
Ajax/jscript Help
« on: October 26, 2009, 12:24 AM »

I will like the js below to be able to display a loading,  indication to alert the user that the page is loading. As I'm not an expert in this field, can you please modify it to function like that. It will be cool if the loading indicator can include a gif animator with filename loading.gif.

I'll deeply appreciate your help. The code of the .js file follows;

Code:
var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadedobjects=""
var rootdomain="http://"+window.location.hostname
var bustcacheparameter=""

function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
if (bustcachevar) //if bust caching of external page
bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, true)
page_request.send(null)
}

function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}

function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}

yawa-ti-de (f)
Re: Ajax/jscript Help
« #1 on: October 26, 2009, 09:56 AM »

Off the top of my head (these days, I don't write ajax code anymore.  I simply use a jquery plugin so my brain had been dumbed down quite a bit Grin):

I blv the "loading" state in ajax is "3" (readyState == 3).  So when you are checking for the readystate, if it is 3, you set your loading.gif to display: block.  when it is 4, you set it to display: none.

I am pretty sure if you googled for it, you will find perhaps a more elegant solution.

good luck!
kolitos007
Re: Ajax/jscript Help
« #2 on: October 26, 2009, 02:52 PM »

Yep, I think what yawa said is correct,  ready state 3, make note of this;

0: not initialized.
1: connection established.
2: request received.
3: answer in process.
4: finished.

Other option is to have loading in your div, that is the simplest way, but that is for the first time you loading just have <div id=''>Loading Page</div>

Alot of answers to your question on line, just google it you will find it, or just create to functions in yoru js

function ShowLoading()
{
   
   document.getElementById("Loadmsg").style.display = "block";
   
}

function CloseLoadingMsg()
{

   document.getElementById("Loadmsg").style.display = "none";

}

The first function before this line

var page_request = false

then the function before this line
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))

but to be honest I would change it to this
if (request.readyState == 4) {
     CloseLoading();
    if (request.status == 200 || request.status == 304) {
  }

}

And make sure you have the div for theloading page set, hope this helps.
*dhtml
Re: Ajax/jscript Help
« #3 on: October 26, 2009, 04:16 PM »

come to think of it, i seem to have forgotten how to use raw ajax like that. I will rather use jQuery or my dhtmlExt library.
But for newbies, i think jquery is better. However if you are tryin to learn ajax, try www.javascriptkit.com - that was where
i started learning ajax
kolitos007
Re: Ajax/jscript Help
« #4 on: October 26, 2009, 04:21 PM »

Quote from: *dhtml on October 26, 2009, 04:16 PM
come to think of it, i seem to have forgotten how to use raw ajax like that. I will rather use jQuery or my dhtmlExt library.
But for newbies, i think jquery is better. However if you are tryin to learn ajax, try www.javascriptkit.com - that was where
i started learning ajax

Yeah you are right, jquery is the easy way out, but I think the raw data gives you more, I use raw ajax so I can manipulate my data. its good if your result can give different conditions. But to behonest, it works better in .net because visual studio provides script for you to use.
*dhtml
Re: Ajax/jscript Help
« #5 on: October 26, 2009, 11:41 PM »

i used the raw jscript to build my library which is somewhat easier than jquery.

all these for instance will be:
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}

$.post("result.php?user=43",function(response) {$('#containerid').html(response)},function() {alert("An error occured");});

that is one of the functions in my dhtmlextreme javascript library, it is similar to the jquery $.ajax which is somewhat more
complicated but more functional with timeouts and all that which i have conveniently ignored.

You need to use libraries to speed up so you dont spend forever on a project. Even with that, i am still way strugglin to
meet up with deadlines. These days i take the easiest way out o my broda, at least till i clear my desk which is rather full at this time
 Problem Pasting Google Adsense Code  Vacancy For A Graphics Artist/ Web Designer  Windows 7 Is Made To Boost Ie & Cripple Other Browsers  Page 2
Pages: (1) Go Up Send Topic to Friend by E-mail Reply 


Sections: Autos/Cars (2) Jobs/Vacancies (2) (3) Career Talk Education General(2) Politics Romance Computers Phones Travel
Sports Fashion Health Religion Celebrities TV/Movies (2) Music/Radio (2) Books Webmasters Programming

Links: Page1 Page2 Page3 Page4 Page5 Page6 Page7 Page8 Page9 Page10

Nairaland is owned by Oluwaseun Osewa. See also: Nairalist Classified Ads
Nairaland Forum | Powered by SMF 1.0.12.
© 2001-2005, Lewis Media. All Rights Reserved.