CODEWITHSUNDEEP
phpjqueryhtmlajaxcodeigniter
geeth
geeth

Reputation: 714

ajax result not showing properly in table

I need to refresh contents in table every 5 seconds. I did this with ajax and setInterval functions. But the result is not properly displayed.

enter image description here

This is the result displaying. Here the first row is replaced by last row. I couldn't find the reason.

Here is my code.

My controller 

public function latestReport() {
    $data['incomingCount'] = $this->Home_model->findCount('incoming');
    $data['outgoingCount'] = $this->Home_model->findCount('outgoing');
    $data['droppedCount'] = $this->Home_model->findCount('drop');
    $data['latestReport'] = $this->Home_model->latestReport(10);
    print_r(json_encode($data));
}

Script

function latestReport() {
        $.ajax({
            url : base_url + 'Home/latestReport',
            type : 'POST',
            success:function(data) {
                var res = $.parseJSON(data);
                $('#incomingCount').text(res.incomingCount);
                $('#outgoingCount').text(res.outgoingCount);
                $('#droppedCount').text(res.droppedCount);
                var latestCount = res.latestReport.length;
                for(var i = 0; i < latestCount; i++){
                    var count = parseInt(i) + 1;

                    $('#resNo').text(count);
                    $('#resSource').text(res.latestReport[i]['Source']);
                    $('#resDest').text(res.latestReport[i]['Destination']);
                    $('#resCallerID').text(res.latestReport[i]['CallerID']);
                    $('#CallerTime').text(res.latestReport[i]['CallStartTime']);
                    $('#resStatus').text(res.latestReport[i]['Status']);
                    $('#resAgent').text(res.latestReport[i]['Agent']);
                    $('#resType').text(res.latestReport[i]['Type']);
                }

            }
        });
    }

    var myVar = setInterval(latestReport, 5000);

HTML

<table class="normal-table" id="senderidList">
   <tr>
     <th style="width: 100px">Sl No</th>                                           
     <th style="width: 100px">Source</th>
     <th>Destination</th>
     <th>CallerID</th>
     <th style="width: 150px">Call Start Time</th>
     <th>Status</th>
     <th>Agent</th>
     <th>Type</th>                                    
   </tr>
   <?php if( isset($latestReport) && !empty($latestReport)) {
       $i = 1;
       foreach($latestReport as $report) {
   ?>
   <tr>
     <td id="resNo"><?php echo $i++;?></td>
     <td id="resSource"><?php echo $report['Source']?></td>
     <td id="resDest"><?php echo $report['Destination']; ?></td>
     <td id="resCallerID"><?php echo $report['CallerID']?></td>
     <td id="CallerTime"><?php echo date('d-m-Y h:i:s A', strtotime($report['CallStartTime'])); ?></td>
     <td id="resStatus"><?php echo $report['Status']?> </td>
     <td id="resAgent"><?php echo $report['Agent']?> </td>
     <td id="resType"><?php echo $report['Type']?> </td>
  </tr>
  <?php } }
  else {?>  
  <tr><td colspan="4"> No details available</td></tr>
  <?php } ?>
</table>

I am getting the result from controller properly. But something happened when showing in table.

Upvotes: 1

Views: 217

Answers (2)

Som
Som

Reputation: 598

You can display your data without giving ID's to 'td' tags in HTML

make your html as follow

<table class="normal-table" id="senderidList">
   <thead>
   <tr>
     <th style="width: 100px">Sl No</th>                                           
     <th style="width: 100px">Source</th>
     <th>Destination</th>
     <th>CallerID</th>
     <th style="width: 150px">Call Start Time</th>
     <th>Status</th>
     <th>Agent</th>
     <th>Type</th>                                    
   </tr>
   </thead>
  <tbody> 

  </tbody>   
</table>

Write following code in Success of Your ajax function for appending row 1 by 1

$('#senderidList tbody').empty();//clear your data
                var TableBody = '';
                if (data.d.length > 0) {
//following $.each loop will Concate data one by one 
                    $.each(data.d, function (i, latestReport) {
                        TableBody += '<tr><td>' + i + 1 + '<td><td>' + latestReport['Source'] + '<td><td>' + latestReport['Destination'] + '<td><td>' + latestReport['CallerID'] + '<td><td>' + latestReport['CallStartTime'] + '<td><td>' + latestReport['Status'] + '<td><td>' + latestReport['Agent'] + '<td><td>' + latestReport['Type'] + '<td></tr>';
                    });                    
                }
                else
                {
                    TableBody = '<tr><td colspan="4"> No details available</td></tr>';
                }
//append the created html to the table body using append function
                $('#senderidList tbody').append(TableBody);

if You want to give Id to every 'td' then you can give in $.each <td id="yourID'+i+'"> for every td in body tag

Upvotes: 0

We Are All Monica
We Are All Monica

Reputation: 13336

This is because the cells in each row all have the same ID, so you are updating the first row 10 times.

HTML elements should not have duplicate IDs.

You can do this instead, in PHP:

<tr id="row-<?php echo $i; ?>">
    <td class="resNo"><?php echo $i++;?></td>
    ...

Then in JavaScript:

$('#row-' + count + ' .resNo').text(count);
...

Also, there is no need for parseInt(i) - just use i.

Upvotes: 1

Related Questions