2017-01-26 1 views
0

ProblemPolling ein Server mit jQuery und AJAX ohne anfängliche Verzögerung

Hallo, Ich versuche, meine Tabellendaten auf einem festgelegten Intervall von 10 Sekunden zu aktualisieren ... Problem, dass, wenn ich laden zunächst die Seite gibt es eine Verzögerung von 10 Sekunden vor meinem Tisch ...

-Code angezeigt wird

Markup

<h2>Employee List</h2> 
<!-- table --> 
<table class="table table-striped table-hover table-responsive"> 
    <thead> 
     <tr> 
      <td>ID</td> 
      <td>Emplyee Name</td> 
      <td>Address</td> 
      <td>Created at</td> 
      <td>Action</td> 
     </tr> 
    </thead> 

    <!-- table content dynamically generated by the javascript --> 
    <tbody id="showdata"></tbody> 
    <!-- end content --> 

</table> 
<!-- end table --> 

jQuery

$(function(){ 


     pollServer(); 

     function pollServer(){ 

      window.setTimeout(function() { 
       alert('hey'); 
       $.ajax({ // this is a json object inside the function 
        type: 'ajax', 
        url: '<?php echo base_url('employee/showAllEmployee'); ?>', 
        async: false, 
        dataType: 'json', 
        success: function(data){ 
         console.log(data); 
         var html = ''; 
         var i; 
         for(i = 0; i < data.length; i++){ 
          html += '<tr>' + 
             '<td>' + data[i].employee_id + '</td>' + 
             '<td>' + data[i].employee_name + '</td>' + 
             '<td>' + data[i].address + '</td>' + 
             '<td>' + data[i].created_at + '</td>' + 
             '<td>' + 
              '<div class="pull-right">' + 
               '<a class="btn btn-info btn-xs item-edit" href="javascript:;" data="' + data[i].employee_id + '">Edit</a>' + 
               '<a class="btn btn-danger btn-xs item-delete" href="javascript:;" data="' + data[i].employee_id + '"><i class="fa fa-times"></i></a>' + 
              '</div>' + 
             '</td>' + 
            '</tr>' 
         } 
         $('#showdata').html(html); 
        }, 
        error: function(){ 
         alert('Could not get Data from Database'); 

        }, 
        complete: function(){ 
         pollServer(); 
        } 
       }) 
      }, 10000); 
     } 
    }); 

Frage

Wie bekomme ich meine Daten auf Seite laden, und dann den Server danach alle 10 Sekunden ping?

+0

Sie 'statt' setTimeout' verwenden setInterval' – ppasler

+3

lol - er SetTimeout nicht verwendet! –

+0

erhalten Sie Daten richtig auf 'console.log (Daten);'? –

Antwort

4

Änderung pollServer wie

folgt
function pollServer(){ 
    $.ajax({ // this is a json object inside the function 
    // removed for clarity 
     complete: function(){ 
      setTimeout(pollServer, 10000); 
     } 
    }); 
} 
+0

Das funktioniert wie ... perfekt. –

1

Rufen Sie einfach die gleiche Funktion im Inneren mit einem Timeout Erfolg Rückruf ist.

function pollServer() { 
    $.ajax({ 
     ... 
     success: function(data) { 
     setTimeout(function() { 
      pollServer(); 
     },10000); 
     } 
    }); 
} 

// Call the function on load 
pollServer();