CODEWITHSUNDEEP
phpjqueryjsonreal-time
Nicolas
Nicolas

Reputation: 137

Populate a JSON into a table in real time with JQUERY

I'm looking for a library which do this :

/Editing after first answer

Ok I guess my first explanation was not good. Retrieving through jQuery a JSON and build a table is good, I could do that, but my request was more on the other part. I'm looking for a library to display the result in a special way. Let me explain.

Json request 1 send :
1;Tomato 2;Apple 3;Salad 4;Carot

Json request 2 send :
1;Tomato 3;Salad 4;Carot 5;Potatoes

I would like the second row disapear with a effect (fadeOut) and the rows below move Up. For the row 5, i just want a new row appears with a fade in.

Is that more clear?

Is there any library existing doing this?

I'm doing it in PHP, but i hope to write all this in JS.

The user could just look the table and see the new rows appearing and the old rows deleting.

Any ideas or am I supposed to write it from scratch?

Upvotes: 5

Views: 7899

Answers (7)

Tom Halladay
Tom Halladay

Reputation: 5761

If real-time updating is truly required, as Neal suggested, Comet or Stream-Hub would be one avenue worth checking into.

As for the interface, I recently have been using JQuery Templates, and when reconciling added / removed / updated records, I use JQuery selectors to clear & update, and use Templates to add in new records. And because I'm using JQuery in all 3 events, I could easily integrate their motion / visual effects.

JQuery Templates

JQuery Selectors

JQuery Effects

Stream-Hub

I myself only needed polling (every 15 seconds) so I'm using Robert Fischer's improved JQuery PeriodicalUpdater

JQuery Periodical Updater

Upvotes: 0

Tadeck
Tadeck

Reputation: 137360

If you want something friendly and full of various useful features, you can use jQuery plugin called DataTables.

It provides API allowing you to provide new data from the server on request: http://www.datatables.net/api

It works for simple implementations also, is pretty customizable, allows to change its outlook etc.

Hope this is useful.

Upvotes: 1

Edgar Villegas Alvarado
Edgar Villegas Alvarado

Reputation: 18344

You could use the awesome jqGrid plugin.

To do the autorefresh, you should do this:

setInterval(function(){
  $("#grid1").trigger("reloadGrid");
}, 10000);

Hope this helps. Cheers.

Upvotes: 0

Vismari
Vismari

Reputation: 745

Try Jquery Grid Plugin. You can retrieve JSON from server and build a grid on the client side. Take a look at the web site, there are some examples including php.

Upvotes: 1

scrappedcola
scrappedcola

Reputation: 10572

Here is a really good article on different polling/comet techniques that you will want to look into. It breifly describes each and points out some pitfalls you might not think of.: http://query7.com/avoiding-long-polling. Also here is a jquery plugin for long polling: http://enfranchisedmind.com/blog/posts/jquery-periodicalupdater-ajax-polling/

Upvotes: 1

slandau
slandau

Reputation: 24052

First I would read this, but the code is actually really simple.

On your front end, you'd have your table

<table id="myTable"></table>

Then you'd make your AJAX post within JQuery

$.ajax({
  url: "yourphpfile",
  data: <data you want your php file to read>
  success: function(data){
    $('#myTable').html(data);
  }
});

Your method in php would take in your posted data, it would create an HTML string of a table element, and then you'd set your table's innerHTML on the front end with .html() built into JQuery -- that way you never have to worry about showing/hiding, everytime you post, your given the table itself, so you just display exactly that, you can handle all the fancy stuff server side.

Upvotes: 0

Naftali
Naftali

Reputation: 146310

You can get the json like this (use get or post, ill show post here):

function do_json_live(){
   $.post('url.php','somedata', function(returnJSON){
     alert(returnJSON); 
     //do something with the `returnJSON`
     setTimeout(do_json_live, 2000); //2000 ms = 2 seconds
   },'json');
}

Upvotes: 2

Related Questions