Print table via jQuery/ajax array

Question

I am trying to print array in jquery, I want it to run every 4 sec and want to clear data written in previous loop before it print out again after 4 second. but it is adding the data(rows) rather than replacing.

    function sendRequest(){
$.ajax({
    type: 'POST',
    url:'<?php echo site_url('ajax/ajax_buybtc'); ?>',
    success: 
    function(result){
        var jsonResult = JSON.parse(result);
        jsonResult.forEach(function(data) {
    var newTr = "<tr>";
   newTr += '<tr> <td style="text-align:center;"><a><span class="label label- 
   warning">Sell</span></a></td>';
   newTr += "<td>" + data.xbtc + "</td>";
   newTr += "<td>" + data.rate + "</td>";
   newTr += "<td>" + data.xpkr + "</td>";
   newTr += "</tr>";
   $('.table > tbody:last-child').append(newTr);
}); 



        setTimeout(function(){
            sendRequest(); //this will send request again and again;
        }, 4000);
    }
});
}

Here is the HTML part

<table class="table table-striped table-condensed" style=" width:100%; float:left; border:3px solid white; box-shadow: 2px 2px 2px white">  
          <tbody>


                 <tr>
                  <td style="text-align:center;"><b>Action</b></td>
                  <td style="text-align:center;"><b>BTC</b></td>
                  <td style="text-align:center;"><b>BID</b></td>
                  <td style="text-align:center;"><b>PKR</b></td>
            </tr>



                 <tr class="messages">
                 <td style="text-align:center;"><a><span class="label label-warning">Sell</span></a></td>
                 <td  style="text-align:center;"></td>
                 <td  style="text-align:center;"></td>
                <td  style="text-align:center;"></td>
            </tr>

                 </tbody>
        </table>

yes, anything that will help others identify your problem. can i look at your full jquery code? — david
– david, Commented Aug 15, 2018 at 4:12
i uploaded a screenshot above plz check. why it isn't text going to next line when second time loop run — Muhammad Ahsan Ayaz Khan
– Muhammad Ahsan Ayaz Khan, Commented Aug 15, 2018 at 4:14

david · Accepted Answer · 2018-08-16 06:20:51Z

1

There are some mistake in your code. I fix it for you. Also, I add class="messages" to tr tag.

jsonResult.forEach(function(data) {
  var newTr = "";    // I delete the value to avoid double tr declaration
  newTr += '<tr class="messages"> <td style="text-align:center;"><a><span class="label label-warning">Sell</span></a></td>';
  newTr += "<td>" + data.xbtc + "</td>";
  newTr += "<td>" + data.rate + "</td>";
  newTr += "<td>" + data.xpkr + "</td>";
  newTr += "</tr>";
  $('.table tr.messages').remove();        // remove the existing one
  $('.table > tbody:last-child').append(newTr);
});

Before you add the new tr, remove the existing tr with class messages first. I declare the class name as messages to match with your HTML.

edited Aug 16, 2018 at 6:20

answered Aug 15, 2018 at 4:16

david

3,2289 gold badges33 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Muhammad Ahsan Ayaz Khan Over a year ago

when i copy paste this code it gives error in console. jquery.js:1586 Uncaught Error: Syntax error, unrecognized expression: <tr class="messages"> <td style="text-align:center;"><a><span class="label label-warning">Sell</span></a></td><td>1.1261261261261262</td><td>888</td><td>995</td></tr>

Ramesh · Accepted Answer · 2018-08-15 04:32:13Z

1

You missed the tr in your code. Now try this:

jsonResult.push('<tr><td style="text-align:center;"><a><span class="label label-warning">Sell</span></a></td>');
        jsonResult.push("<td>" + data.xbtc + "</td>");
        jsonResult.push("<td>" + data.rate + "</td>");
        jsonResult.push("<td>" + data.xpkr + "</td></tr>");

});
    $(".messages").html(jsonResult.join(""));

edited Aug 15, 2018 at 4:32

answered Aug 15, 2018 at 4:17

Ramesh

2,4033 gold badges25 silver badges44 bronze badges

4 Comments

Muhammad Ahsan Ayaz Khan Over a year ago

plz see above pic

Ramesh Over a year ago

It's some issue with your table structure. Can you update the code of the table, I mean the <thead> , <tbody> and everything. If possible include your css as well

Muhammad Ahsan Ayaz Khan Over a year ago

it works well with static data , or even with php loop, it just gone wrong when add <tr> to the code

Ramesh Over a year ago

Check whether your DOM is arranged properly. This not syncing issue happens when the DOM is not arranged well. If update me with your code

Shiv Kumar Baghel · Accepted Answer · 2018-08-15 04:54:26Z

1

add tr for table row. refer below updated code.

var newTr = "<tr>";
newTr += "<tr> <td style="text-align:center;"><a><span class="label label-warning">Sell</span></a></td>";
newTr += "<td>" + data.xbtc + "</td>";
newTr += "<td>" + data.rate + "</td>";
newTr += "<td>" + data.xpkr + "</td>";
newTr += "</tr>";

$('.table > tbody:last-child').append(newTr);

edited Aug 15, 2018 at 4:54

answered Aug 15, 2018 at 4:17

Shiv Kumar Baghel

2,4906 gold badges20 silver badges36 bronze badges

5 Comments

Shiv Kumar Baghel Over a year ago

please provide a jsfiddle or code snippet for JS+HTML+CSS is possible.

Shiv Kumar Baghel Over a year ago

try to use .append in tbody of table. $('. table > tbody:last-child').append(jsonResult);

Muhammad Ahsan Ayaz Khan Over a year ago

it works fine but ever time it runs, it adds data at the end of table but i want to clear data before it posts again

Shiv Kumar Baghel Over a year ago

please post/edit your code with POST request structure also.

Shiv Kumar Baghel Over a year ago

use $(".table > tbody").html(""); to clear data before POST

Collectives™ on Stack Overflow

Print table via jQuery/ajax array

3 Answers 3

1 Comment

4 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

4 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related