CODEWITHSUNDEEP
javascriptphpajax
Martin
Martin

Reputation: 2683

AJAX including pages without loading

I'm having a challenge:

How do I reload a <div> on page using AJAX, without loading bars and without disappearing while the content is loaded.

I want to keep previously generated content as long as new content is loaded.

This is my script but when loading the content in a loop it blinks:

<script type="text/javascript">
function showCargo_34(urlparms)
                  {

                  if (window.XMLHttpRequest)
                    {// code for IE7+, Firefox, Chrome, Opera, Safari
                    xmlhttpshowCargo_34=new XMLHttpRequest();
                    }
                  else
                    {// code for IE6, IE5
                    xmlhttpshowCargo_34=new ActiveXObject("Microsoft.XMLHTTP");
                    }
                  xmlhttpshowCargo_34.onreadystatechange=function()
                    {
                    if (xmlhttpshowCargo_34.readyState==4 && xmlhttpshowCargo_34.status==200)
                      {
                      document.getElementById("Cargo_34").innerHTML=xmlhttpshowCargo_34.responseText;
                      }
                    }
                  xmlhttpshowCargo_34.open("GET","modules/desktop/desktop/script_cargo.php?"+urlparms,true);    // modules/catalogitem/script_categorylist.php?"+urlparms
                  xmlhttpshowCargo_34.send();
                  };
</script>
        <div id="Cargo_34"></div>
        <script>
        function repeat_Cargo_34() {
            showCargo_34('baseid=1&moduleid=10&gridmoduleid=133&speed=180&x=3&y=4');
            setTimeout( repeat_Cargo_34, 20000);
        };


        repeat_Cargo_34();                                   
        </script>

Upvotes: 0

Views: 77

Answers (4)

turson
turson

Reputation: 421

Use jQuery's AJAX, it's more easy. Look at load() function and for example setInterval. e.g.:

setInterval(function(){ $('#div').load('file.html'); }, 5000}

in every 5 seconds it will load file.html to <div id="id">

Upvotes: 1

Martin
Martin

Reputation: 2683

That situation doesn't exists.

Explanation:

Standard html request call as it is in my question do not put content by innerHTML while is loaded. That means while content is loaded it will be displayed as it is until content is completed in JSON and ajax call function is done.

Error was in another part of code.

Upvotes: 0

kpp
kpp

Reputation: 826

If you dont want to use jquery I would suggest making a second ajax function and make the current function change an invisible div where you would echo the following line when the loading and changing is finished.

//Echo this once all data has been loaded and changed.
//$newurlPalms is what you would have echoed normally but in a urlpalm.
echo "<style onload='showCargo2($newurlpalms)'></style>";

//so make this only load and save all the data and then echo above line in 
//a hidden div 
function showcargo(urlpalms){ajaxcode}

//make this show the data in the right div.
function showcargo2(urlpalms){ajaxdoce}

like this it wont remove the data, and once the loading is complete the echo will cause the second function to run automatically which than is able to instantly shows the data.

Upvotes: 1

user2812693
user2812693

Reputation: 61

I would use jquery for ajax. It is way faster and simplier.

Simple way

$("#element_id").load("http://url.com");

More advanced way you can find here

Also you were talking about keeping previoius content. Well just use += for innerHTML:

document.getElementById("Cargo_34").innerHTML += xmlhttpshowCargo_34.responseText;

Upvotes: 1

Related Questions