make ajax update value on browser without refresh

StackOverflow https://stackoverflow.com/questions/23656632

Question

i read a value from a XML file using ajax jquery and make it appear on the browser the problem is when i change the value of my xml file i can't figure out how to make it change automatically in the browser the xml (counter.xml) file:

    <?xml version="1.0"?>
    <count><number>5</number></count>

the php (slideshow.php):

 <!doctype html>
    <html lang="en">
    <head>
        <meta charset="utf-8" />
        <style>
            body { font-family: Helvetica, Arial, sans-serif; line-height: 1.3em; -webkit-font-smoothing: antialiased; }
            .container {
                width: 90%;
                margin: 20px auto;
                background-color: #FFF;
                padding: 20px;
            }
            pre, code {
            font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
            font-size: 12px;
            color: #333;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
          }
          pre { border: 1px solid #CCC; background-color: #EEE; color: #333; padding: 10px; overflow: scroll; }
          code { padding: 2px 4px; background-color: #F7F7F9; border: 1px solid #E1E1E8; color: #D14; }
        </style>
    </head>
    <body>
        <div id="result">
    <script type="text/javascript">

    function ajaxRequest(){
     var activexmodes=["Msxml2.XMLHTTP", "Microsoft.XMLHTTP"] //activeX versions to check for in IE
     if (window.ActiveXObject){ //Test for support for ActiveXObject in IE first (as XMLHttpRequest in IE7 is broken)
      for (var i=0; i<activexmodes.length; i++){
       try{
        return new ActiveXObject(activexmodes[i])
       }
       catch(e){
        //suppress error
       }
      }
     }
     else if (window.XMLHttpRequest) // if Mozilla, Safari etc
      return new XMLHttpRequest()
     else
      return false
    }

    var mygetrequest=new ajaxRequest()
    if (mygetrequest.overrideMimeType)
     mygetrequest.overrideMimeType('text/xml')
    mygetrequest.onreadystatechange=function(){
     if (mygetrequest.readyState==4){
      if (mygetrequest.status==200 || window.location.href.indexOf("http")==-1){
       var xmldata=mygetrequest.responseXML //retrieve result as an XML object
       var rssentries=xmldata.getElementsByTagName('Count')
       var output='<ul>'
       for (var i=0; i<rssentries.length; i++){
        output+='<li>'
        output+='<a href="'+rssentries[i].getElementsByTagName('Number')[0].firstChild.nodeValue+'">'
        output+=rssentries[i].getElementsByTagName('Number')[0].firstChild.nodeValue+'</a>'
        output+='</li>'
       }
       output+='</ul>'
       document.getElementById("result").innerHTML=output
      }
      else{
       alert("An error has occured making the request")
      }
     }
    }

    mygetrequest.open("GET", "counter.xml", true);
    mygetrequest.send(null);
    </script>
    <script type="text/javascript">
    refreshdiv();
    </script>
        </div>
    </body>    
        <script src="../libs/jquery/jquery.js"></script>
        <script src="../src/jquery.backstretch.js"></script>
        <script>
            $.backstretch([
              <?php
                    $directory = "images/";
                    //get all image files with a .jpg extension.
                    $images = glob($directory . "*.j*");
                    //print each file name
                    $output="";
                    //$nbrImages= 0;
                    foreach($images as $image)
                        {
                            $output.="'".$image."',";
                            //$nbrImages = $nbrImages + 1;
                        }
                    echo substr_replace($output,"",-1); 
              ?>
            ], {
                fade: 750,
                duration: 4000
            });
        </script>
    </body>
    </html>
Was it helpful?

Solution

try this one

setTimeout(function(){
 //your ajax code
},100);

OTHER TIPS

You would need something like this 

setInterval(
    function(){
        //your ajax call
    }
    ,100 //The time in milliseconds that should repeat the ajax call 
);

the setInterval function sets a logic that will repeat the given task in the timing you set. So you could check and load the .xml file every x seconds.

You can stop the repeat like this

var interval = setInterval(function(){ //your function }, 100);
clearInterval(interval);

Other then from @pratik nagariya mentioned the 

setTimout()

function will only delay your call, but not repeat it.

I just did some quick searches and found that you could use this code:

reloadinterval=window.setInterval(function(){
    old=rssentries;
    // your ajax reqest code
    if(!(rssentries==old)){window.reload();}

}, 3000 //the time interval in milliseconds);
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top