CODEWITHSUNDEEP
javascriptjqueryajax
user3081581
user3081581

Reputation: 65

How to combined ajax div

This is my Ajax script... I want to combined the first and the second ...

1st 

  <script>
    function Ajax()
    {
    var xmlhttp;
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        setTimeout('Ajax()',3000);
        }
      }
    xmlhttp.open("GET","Home.php",true);
    xmlhttp.send();
    }

    window.onload=function(){
         setTimeout('Ajax()',3000);
       }
    </script>

2nd

<script>
    function Ajax()
    {
    var xmlhttp;
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.getElementById("myDiv2").innerHTML=xmlhttp.responseText;
        setTimeout('Ajax()',3000);
        }
      }
    xmlhttp.open("GET","Home2.php",true);
    xmlhttp.send();
    }

    window.onload=function(){
         setTimeout('Ajax()',3000);
       }
    </script>

<body>

<div id="myDiv"></div>
<div id="myDiv2"></div>

</body>

Upvotes: 0

Views: 59

Answers (2)

2hamed
2hamed

Reputation: 9047

Assuming you want to use jQuery (since you tagged your question with it), this would be your answer:

function jQueryGet1(){
    $.get('Home.php', function(data){
        $('#myDiv').html(data);
        setTimeout(jQueryGet1, 3000);
    });
}
function jQueryGet2(){
    $.get('Home2.php', function(data){
        $('#myDiv2').html(data);
        setTimeout(jQueryGet2, 3000);
    });
}
$(window).load(function(){
    setTimeout(jQueryGet1, 3000);
    setTimeout(jQueryGet2, 3000);
});

Note: Since your Ajax calls are to 2 different locations, you can not combine these two functions. Each must be implemented separately.

Upvotes: 1

Satpal
Satpal

Reputation: 133403

You need setInterval to refresh them every 3 seconds. function Ajax should be declared only once. 

//Create a function to pass URL to call
//and  a function which will execute on sucess
function Ajax(url, callback) {
    var xmlhttp;
    // code for IE7+, Firefox, Chrome, Opera, Safari
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            callback(xmlhttp.responseText);
        }
    }
    xmlhttp.open("GET", url, true);
    xmlhttp.send();
}
window.onload = function() {
    setInterval(function() {
        //Call first url and set response text of div 1
        Ajax("Home.php", function(responseText) {
            document.getElementById("myDiv").innerHTML = responseText;
        })
        //Call other url and set response text of div 2
        Ajax("Home2.php", function(responseText) {
            document.getElementById("myDiv2").innerHTML = responseText;
        })
    }, 3000);
}

As is tagged, this can be used 

$(function() {
    setInterval(function() {
        $('#myDiv').load('Home.php');
        $('#myDiv2').load('Home2.php');
    }, 3000);
});

Upvotes: 0

Related Questions