When I update a Div with jQuery or AJAX I duplicate the page

1

I'm trying to update a div with jQuery here the javascript code;

 <script> $(document).ready(function(){ setInterval(loadClima,5000);
 });

 function loadClima(){ $("#coches").load("dashboard.php"); } </script>

here I put the div;

 <div id="coches">  <?php
     $sql = "SELECT 'id' FROM 'vehicles' WHERE 'active' >= '1' ;";
     $result_of_query = $db_link->query($sql);
    $total_records = mysqli_num_rows($result_of_query);    echo "<h1>" . $total_records . "</h1>";
        ?> Vehiculos Circulando</div>

The only thing that DIV does is consult the database of the active vehicles that are and with a echo then the samples, and what I would like is that I update them to the seconds with the javascript code and it does, but at the same time, it duplicates my page.

PD; with Ajax the same thing happens to me Ajax code that I have used (Obviously I have not used the two codes at the same time);

 var seconds = 4; // intervalo de actualizar div
     var divid = "divevento"; // el div que quieres actualizar!
     var url = "proceso.php"; // el archivo de proceso php

     function objetoajax(){

         // The XMLHttpRequest object

         var xmlHttp;
         try{
             xmlHttp=new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari
         }
         catch (e){
             try{
                 xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
             }
             catch (e){
                 try{
                     xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                 }
                 catch (e){
                     alert("Tu explorador no soporta AJAX.");
                     return false;
                 }
             }
         }

         // Timestamp for preventing IE caching the GET request
         var timestamp = parseInt(new Date().getTime().toString().substring(0, 10));
         var procesourl = url+"?t="+timestamp;

         // The code...

         xmlHttp.onreadystatechange=function(){
             if(xmlHttp.readyState== 4 && xmlHttp.readyState != null){
                 document.getElementById(divid).innerHTML=xmlHttp.responseText;
                 setTimeout('objetoajax()',seconds*1000);
             }
         }
         xmlHttp.open("GET",procesourl,true);
         xmlHttp.send(null);
     }

     window.onload = function(){
         objetoajax(); // Ejecutamos objetoajax
      }

I hope someone can give me some solution that could be, if needed

    
asked by Jesus Moreno 15.10.2016 в 22:59
source

2 answers

1

Something cleaner would be:

$("#coches").empty().load("dashboard.php");

I hope to be helpful, yet look at yourself. $ .ajax ()

    
answered by 15.10.2016 в 23:49
0

Well, you are effectively loading what you want in your $ element ("# cars"). Now, if what you are getting should replace what is currently in that element. You must make sure to clean it before, for example:

$("#coches").html('');
$("#coches").load ....

Since otherwise you will be stacking what you receive again and again.

    
answered by 15.10.2016 в 23:46