Ajax Div refresh without flicker?

woolyg · March 5, 2010

Hi all,

I'm using the following code as my AJAX call framework:

function ajax_call_root(dataSource, divID) {
               var XMLHttpRequestObject = false;

               if (window.XMLHttpRequest) {
                       XMLHttpRequestObject = new XMLHttpRequest();
                       } else if (window.ActiveXObject) {
                       XMLHttpRequestObject = new
                       ActiveXObject("Microsoft.XMLHttp");
                       }


               if(XMLHttpRequestObject) {
               var obj = document.getElementById(divID);
		   document.getElementById(divID).innerHTML ="";

                       XMLHttpRequestObject.open("GET", dataSource, true);
                       XMLHttpRequestObject.onreadystatechange = function()
                       {

                               if (XMLHttpRequestObject.readyState == 4 &&
                                       XMLHttpRequestObject.status == 200) {
                                       obj.innerHTML = XMLHttpRequestObject.responseText;
                                       delete XMLHttpRequestObject;
                                       XMLHttpRequestObject = null;
                                       }
                       }
               XMLHttpRequestObject.send(null);
               }
       }

and the following JS to call a PHP file through AJAX:

function update_online_users(){ // FUNCTION 9

ajax_call_root('c/ajax.online_users.list.inc.php', 'body_online_users');

}

then, I'm calling the setInterval script and updating a DIV:

<font 
onmouseover="javascript:this.style.cursor='pointer';" 
onclick="javascript:setInterval('update_online_users()', '5000');" 
title="Click Here" >Click Here</font>

.. which works fine, however, every time the script is called to update the DIV, the text flickers. Does anybody know of a way to update the text within a div without the horrible flickering?

All input appreciated.

WoolyG

bPHP · March 6, 2010

Hi! I'm having a similar problem, my text does not show visible flickering, but it is impossible to select text (since it is being updated all the time)... Can you select your text? Are you updating when you need to? I'm having the issue of constantly updating since I need the data from a db.

I don't know how I avoided the visible flickering, this is what I have, that might help you (got it from some Ajax forum as well, since I'm a beginner).

function moniter()
{
    xmlHttp_moniter = GetXmlHttpObject_parcel()
    if(xmlHttp_moniter == null)
    {
        alert("browser does not support HTTP Request")
        return
    }
    var url="moniter.php"
    xmlHttp_moniter.onreadystatechange = stateChanged
    xmlHttp_moniter.open("GET",url,true)
    xmlHttp_moniter.send(null)

}

function stateChanged()
{
    if(xmlHttp_moniter.readyState==4 || xmlHttp_moniter.readyState == "complete")
    {
        document.getElementById("moniter").innerHTML = xmlHttp_moniter.responseText
        setTimeout('moniter()',120);
    }
}

function GetXmlHttpObject_parcel()
{
    var xmlHttp_moniter=null;
    try
    {
        xmlHttp_moniter=new XMLHttpRequest();
    }
    catch (e)
         {
             //Internet Explorer
             try
              {
                  xmlHttp_moniter=new ActiveXObject("Msxml2.XMLHTTP");
              }
             catch (e)
              {
              xmlHttp_moniter=new ActiveXObject("Microsoft.XMLHTTP");
              }
         }
    return xmlHttp_moniter;
}

Then in my main html I have, which updates the div with the id = moniter.

<body onload="moniter();">

<div class="wrapper" style="top: 90px;">
	<div class="box" id="Window">
		<div id = "moniter">
		</div>
	</div>
</div>

Then in my moniter.php I just have selects from db and the displays that I need. It does work well and does not do any flickering, but I feel my design is horrible, since it's a constant refresh.

I hope this helped you a bit.

Zane · March 6, 2010

You've obviously got the AJAX part of it down. This is Javascript problem.

The reason it flickers it because that is exactly what you tell it to do... replace the data after 5 seconds.. no transition or nothing. Which is understandable because you're not using any kind of Javascript library. You're using plain ole Javascript.

If you check out some of the newest Javascript libraries out there like jQuery or mooTools I'm sure you'll figure out what your problem is. By using a library, you're equipped with a multitude of effects, animations, transitions, even custom animations and you can even use it alongside regular Javascript.

My favorite library so far is jQuery. For the simple reason that it's only one file.. you just include it and start coding with the jQuery API

woolyg · March 6, 2010

I think I've solved it - for myself, anyway! I Hope the below code makes sense and helps someone else out..

Here's what I *was* using:

function ajax_refresh_root(dataSource, divID) {
               var XMLHttpRequestObject = false;

               if (window.XMLHttpRequest) {
                       XMLHttpRequestObject = new XMLHttpRequest();
                       } else if (window.ActiveXObject) {
                       XMLHttpRequestObject = new
                       ActiveXObject("Microsoft.XMLHttp");
                       }


               if(XMLHttpRequestObject) {
               var obj = document.getElementById(divID);
		   document.getElementById(divID).innerHTML ="";

                       XMLHttpRequestObject.open("GET", dataSource, true);
                       XMLHttpRequestObject.onreadystatechange = function()
                       {

                               if (XMLHttpRequestObject.readyState == 4 &&
                                       XMLHttpRequestObject.status == 200) {
                                       obj.innerHTML = XMLHttpRequestObject.responseText;
                                       delete XMLHttpRequestObject;
                                       XMLHttpRequestObject = null;
                                       }
                       }
               XMLHttpRequestObject.send(null);
               }
       }

The code that's the issue (for me anyway) is this:

document.getElementById(divID).innerHTML ="";

If I add a new line at the top of the function:

original_content = document.getElementById(divID).innerHTML;

..and change the problem line to:

document.getElementById(divID).innerHTML = original_content;

The refresh does not flicker! Full working code below:

function ajax_refresh_root(dataSource, divID) {
               
		   original_content = document.getElementById(divID).innerHTML; // NewLine!
		   
		   var XMLHttpRequestObject = false;

               if (window.XMLHttpRequest) {
                       XMLHttpRequestObject = new XMLHttpRequest();
                       } else if (window.ActiveXObject) {
                       XMLHttpRequestObject = new
                       ActiveXObject("Microsoft.XMLHttp");
                       }


               if(XMLHttpRequestObject) {
               var obj = document.getElementById(divID);
		   document.getElementById(divID).innerHTML = original_content; // Altered line to not show 'nothing'

                       XMLHttpRequestObject.open("GET", dataSource, true);
                       XMLHttpRequestObject.onreadystatechange = function()
                       {

                               if (XMLHttpRequestObject.readyState == 4 &&
                                       XMLHttpRequestObject.status == 200) {
                                       obj.innerHTML = XMLHttpRequestObject.responseText;
                                       delete XMLHttpRequestObject;
                                       XMLHttpRequestObject = null;
                                       }
                       }
               XMLHttpRequestObject.send(null);
               }
       }

My app is now flicker-free!

WoolyG

Sign In

Ajax Div refresh without flicker?

Recommended Posts

woolyg

Link to comment

Share on other sites

bPHP

Link to comment

Share on other sites

Zane

Link to comment

Share on other sites

woolyg

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information