Results 1 to 5 of 5

Thread: How to Add Loading Image or Text on Dynamic Content Script

  1. #1
    Join Date
    Mar 2008
    Location
    Kolhapuur
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default How to Add Loading Image or Text on Dynamic Content Script

    1) Script Title: Dynamic Ajax Content

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...jaxcontent.htm

    3) Describe problem:

    Dear All,
    How do I add Loading Image or Text on below script.



    // JavaScript Document


    var loadedobjects=""
    var rootdomain="http://"+window.location.hostname

    function showWaitMessage()
    {
    document.getElementById(containerid).innerHTML = 'Finding article.....<br>Please wait';
    }

    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)
    }
    page_request.open('GET', url, 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
    }
    }
    }

    Thank you
    Last edited by girish_327; 03-25-2008 at 12:57 PM. Reason: Correction in spell mistake

  2. #2
    Join Date
    Sep 2006
    Location
    St. George, UT
    Posts
    2,769
    Thanks
    3
    Thanked 157 Times in 155 Posts

    Default

    Add the following highlighted code to your code:

    Code:
    
    // JavaScript Document
    
    var loadingtxt = '<img src="loading.gif" alt="Loading"> &nbsp; Page is loading...'; /* loading text or HTML goes here */
    var loadedobjects=""
    var rootdomain="http://"+window.location.hostname
    
    function showWaitMessage()
    {
    document.getElementById(containerid).innerHTML = 'Finding article.....<br>Please wait';
    }
    
    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)
    }
    page_request.open('GET', url, 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
     }
     else {
       document.getElementById(containerid).innerHTML = loadingtxt;
     }
    }
    
    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
    }
    }
    }
    Hope this helps.
    "Computer games don't affect kids; I mean if Pac-Man affected us as kids, we'd all be running around in darkened rooms, munching magic pills and listening to repetitive electronic music." - Kristian Wilson, Nintendo, Inc, 1989
    TheUnlimitedHost | The Testing Site | Southern Utah Web Hosting and Design

  3. #3
    Join Date
    Mar 2008
    Location
    Kolhapuur
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Thanks A Lot The Testing Site

    Thanks A Lot The Testing Site

  4. #4
    Join Date
    Aug 2008
    Posts
    27
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    thanks a lot for this thetestingsite!

    I used it, just have problem though, when the loading image and text is shown my background image is revealed.

    How can i place this loader on a blank white div that won't show the background that i'm covering?

  5. #5
    Join Date
    Aug 2008
    Posts
    27
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    Never mind, I solved it.

    Not sure if it's the best solution, but I put a background image in the div holder of the ajaxpage.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •