changing visibility using javascript

Question

hi i have web page which uses ajax to retrieving data from another pages and while doing that i want to show a loading gif in the page so i've create a div with my gif on it.

 <div id="loading"><img src="images/loadinfo.net.gif" width="48" height="48" /></div>

here is my css code :

#content #loading {
    visibility:hidden;
    position: fixed;
    width: 48px;
    top: 0px;
}

now i figured all i need to do is to set the visibility of loading div to 'visible' at the beginning of my loading content ajax function and then at the end make it hidden again but its not working weird thing is if i create loading div visible and then turn it hidden at the beginning of ajax function it works fine !!!

here is my function :

function ajaxpage(url, containerid) {
    document.getElementById('loading').style.visibility = 'visible';

    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 = ""

    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
        }
    }
    document.getElementById('loading').style.visibility = 'hidden';
}

You've made mention in your comments of a "loaded page". Presumably, your ajax is returning some fragment that's loaded into the "current" page, yes? What is being loaded? And how is loadobjs() being used? You've included it, but it's not being called in your code. I used your provided code in a quick test and it worked as expected. Can you point us to a live page? — squidbe
– squidbe, Commented Jun 1, 2011 at 21:51

RobertO · Accepted Answer · 2011-06-01 17:32:58Z

45

function loadpage (page_request, containerid)
{
  var loading = document.getElementById ( "loading" ) ;

  // when connecting to server
  if ( page_request.readyState == 1 )
      loading.style.visibility = "visible" ;

  // when loaded successfully
  if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
  {
      document.getElementById(containerid).innerHTML=page_request.responseText ;
      loading.style.visibility = "hidden" ;
  }
}

answered Jun 1, 2011 at 17:32

RobertO

2,6731 gold badge21 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

xXx · Accepted Answer · 2022-04-28 01:26:59Z

3

If you just want to display it when you get a response add this to your loadpage()

function loadpage(page_request, containerid){
   if (page_request.readyState == 4 && page_request.status==200) {
      var container = document.getElementById(containerid);
      container.innerHTML=page_request.responseText;
      container.style.visibility = 'visible';
      // or 
      container.style.display = 'block';
   }
}

but this depends entirely on how you hid the div in the first place

edited Apr 28, 2022 at 1:26

xXx

1,1611 gold badge11 silver badges25 bronze badges

answered Jun 1, 2011 at 17:27

Ibu

44k14 gold badges82 silver badges109 bronze badges

4 Comments

max Over a year ago

no i want to display it while the data is being retrieved from another page

Ibu Over a year ago

oh then, changed the container style before you do the request

max Over a year ago

display = 'block'; works but just for one page when i click on the link in the loaded page i get:: Message: Object required Line: 22 Char: 1 Code: 0 and this line is : document.getElementById('loading').style.display = 'block'; ...

Ibu Over a year ago

check if you have an element with 'loading' as an id

mikey · Accepted Answer · 2011-06-01 17:25:30Z

1

Use display instead of visibility. display: none for invisible and no setting for visible.

answered Jun 1, 2011 at 17:25

mikey

5,1603 gold badges26 silver badges28 bronze badges

5 Comments

max Over a year ago

this works but just for one page wehen i click on the link in the loaded page i get:: Message: Object required Line: 22 Char: 1 Code: 0 and this line is : document.getElementById('loading').style.display = 'block';

mikey Over a year ago

Reads to me like it can't find any element with an id of "loading" you can test that by breaking the line in two: var loading = document.getElementById("loading"); loading.style.display = ''; I don't use 'block' I just use 'none' or ''. I think default is 'inline' but I just leave it unspecified not sure why everyone loves 'block' so much ;)

mikey Over a year ago

Also, it is not clear to me, max, what you mean by one page and loaded page?

max Over a year ago

forget that only one link works(no matter which one) ! after clicking on the first link none of the others work . so i did like you said and break my code now i get the error from the second part "loading.style.display = '';"

mikey Over a year ago

loading.style.display=''; but that isn't your problem. For some reason document.getElementById("loading") looks like it is returning null, meaning it didn't find any elements with and ID of "loading" the second time around. Have you tried to using Firefox /w Firebug? It may help you keep on eye on things and debug the issue

Collectives™ on Stack Overflow

changing visibility using javascript

3 Answers 3

Comments

4 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related