Trying to update a dataTable with new JSON

I'm sure this has been done a million times, but searching this forum,
I can't seem to find what I'm looking for. Here is my situation:

I have a dataTable and I have a AJAX request that goes to the server
and returns a JSON object to me that will always have the same format,
possibly just different rows. For all my purposes, it might as well
be a JS function that is doing server side pagination.

My issue is that it's not clear to me what the best way to update my
dataTable is given that I have a new JSON object which I can then
create a new dataSource from or update an existing dataSource.

Right now, I basically create a new dataSource with that object and
then create a new dataTable in the same div to replace the old
dataTable. This doesn't seem optimal, so I'm wondering if there is a
way to update the dataSource that a dataTable uses either by updating
the dataSource the dataTable is initially created with or by creating
a new dataSource object and just replacing the dataSource object the
dataTable references.

Finally, if someone wants to shed some light on how I could streamline
this whole process better, I'd be interested in that. To be clear,
the process I am using right now essentially has the user type into a
textbox, click a button which has a listener that in turn fires a JS
function that makes an AJAX call. When the AJAX call returns, I want
to bind the results of that AJAX request to my dataTable. Maybe there
is a better way to do this all the way around.

One complication is that I am working within an existing AJAX
framework. This doesn't mean I wouldn't be willing to change that,
but that's the reason I started doing things this way. I've noticed
from the documentation it looks like there are better ways to do this.
I'm just not sure whether it's worth working outside my existing
framework or not, but I'm willing to be convinced either way.

Thanks for any help!

Messages in this topic (1) Reply (via web post) | Start a new topic

.

Hi,

On Sat, Mar 29, 2008 at 6:19 AM, biafromwigg < biafromwigg%40yahoo.com">biafromwiggyahoo.com> wrote:
&gt; I have a dataTable and I have a AJAX request that goes to the server
&gt; and returns a JSON object to me that will always have the same format,
> possibly just different rows. For all my purposes, it might as well
>; be a JS function that is doing server side pagination.
>
> My issue is that it's not clear to me what the best way to update my
> dataTable is given that I have a new JSON object which I can then
>; create a new dataSource from or update an existing dataSource.
>
> Right now, I basically create a new dataSource with that object and
> then create a new dataTable in the same div to replace the old
> dataTable. This doesn't seem optimal, so I'm wondering if there is a
> way to update the dataSource that a dataTable uses either by updating
> the dataSource the dataTable is initially created with or by creating
> a new dataSource object and just replacing the dataSource object the
> dataTable references.
>
> Finally, if someone wants to shed some light on how I could streamline
> this whole process better, I'd be interested in that. To be clear,
&gt; the process I am using right now essentially has the user type into a
> textbox, click a button which has a listener that in turn fires a JS
> function that makes an AJAX call. When the AJAX call returns, I want
>; to bind the results of that AJAX request to my dataTable. Maybe there
&gt; is a better way to do this all the way around.
>
> One complication is that I am working within an existing AJAX
>; framework. This doesn't mean I wouldn't be willing to change that,
&gt; but that's the reason I started doing things this way. I've noticed
> from the documentation it looks like there are better ways to do this.
&gt; I'm just not sure whether it's worth working outside my existing
> framework or not, but I'm willing to be convinced either way.

You may try something like that:

var dataSource = yourDataTable.getDataSource();
dataSource.liveData = yourActualAjaxResultArray;
dataSource.flushCache();
dataSource.sendRequest(dataTable.get(&quot;initialRequest&quot;) /* might be
useless as the datasource is somehow static */, {success:
yourDataTable.onDataReturnInitializeTable, failure:
yourDataTable.onDataReturnInitializeTable, scope: yourDataTable});

That will make the datasource return data to the
onDataReturnInitializeTable method of the datatable, whose purpose is
to display new results.

http://developer.yahoo.com/yui/docs/YAHOO.widget.DataTable.html#method_onDataReturnInitializeTable

Regards,
--
Fiouz

Messages in this topic (2) Reply (via web post) | Start a new topic

.

I am sure you will find some benefit to read the great work Satyam has
written as you will find there everything you could ever dream about
datatable and an answer to your question.
http://yuiblog.com/blog/2007/09/12/satyam-datatable/
http://yuiblog.com/blog/2007/09/26/satyam-datatable-2/

&lt;

--- In ydn-javascript%40yahoogroups.com">ydn-javascriptyahoogroups.com, "biafromwigg&quot; <biafromwigg...>
wrote:
&gt;
> I'm sure this has been done a million times, but searching this forum,
&gt; I can't seem to find what I'm looking for. Here is my situation:
>
> I have a dataTable and I have a AJAX request that goes to the server
&gt; and returns a JSON object to me that will always have the same format,
> possibly just different rows. For all my purposes, it might as well
>; be a JS function that is doing server side pagination.
>
> My issue is that it's not clear to me what the best way to update my
> dataTable is given that I have a new JSON object which I can then
>; create a new dataSource from or update an existing dataSource.
>
> Right now, I basically create a new dataSource with that object and
> then create a new dataTable in the same div to replace the old
> dataTable. This doesn't seem optimal, so I'm wondering if there is a
> way to update the dataSource that a dataTable uses either by updating
> the dataSource the dataTable is initially created with or by creating
> a new dataSource object and just replacing the dataSource object the
> dataTable references.
>
> Finally, if someone wants to shed some light on how I could streamline
> this whole process better, I'd be interested in that. To be clear,
&gt; the process I am using right now essentially has the user type into a
> textbox, click a button which has a listener that in turn fires a JS
> function that makes an AJAX call. When the AJAX call returns, I want
>; to bind the results of that AJAX request to my dataTable. Maybe there
&gt; is a better way to do this all the way around.
>
> One complication is that I am working within an existing AJAX
>; framework. This doesn't mean I wouldn't be willing to change that,
&gt; but that's the reason I started doing things this way. I've noticed
> from the documentation it looks like there are better ways to do this.
&gt; I'm just not sure whether it's worth working outside my existing
> framework or not, but I'm willing to be convinced either way.
>;
> Thanks for any help!
&gt;

Messages in this topic (3) Reply (via web post) | Start a new topic

.

Hi:

What you want to do is create ONE datasource and ONE datatable. The
first time through you construct the datatable object with the first
response from the server, then each subsequent request you just have
to update the datatable's data.

Now for the catch, I have run into a problem with 2.5.1 that this
update does not work. Here are sample pages that do table updates
(using custom client-side pagination) that shows the create/update
logic. The 241 version works, the 251 version does not.

251:
http://home.bluelinkdirect.com/sandbox/client_page_table_1.html

241:
http://home.bluelinkdirect.com/sandbox/client_page_table_2.html

My updates are triggered by button clicks and a select box (for
pages). This could trigger a new ajax/json request versus using in
memory data just as easily.

~~bret

--- In ydn-javascript%40yahoogroups.com">ydn-javascriptyahoogroups.com, "biafromwigg&quot;
<biafromwigg...> wrote:
&gt;
> I'm sure this has been done a million times, but searching this
forum,
> I can't seem to find what I'm looking for. Here is my situation:
>
> I have a dataTable and I have a AJAX request that goes to the server
&gt; and returns a JSON object to me that will always have the same
format,
> possibly just different rows. For all my purposes, it might as well
>; be a JS function that is doing server side pagination.
>
> My issue is that it's not clear to me what the best way to update my
> dataTable is given that I have a new JSON object which I can then
>; create a new dataSource from or update an existing dataSource.
>
> Right now, I basically create a new dataSource with that object and
> then create a new dataTable in the same div to replace the old
> dataTable. This doesn't seem optimal, so I'm wondering if there is
a
>; way to update the dataSource that a dataTable uses either by
updating
> the dataSource the dataTable is initially created with or by
creating
> a new dataSource object and just replacing the dataSource object the
> dataTable references.
>
> Finally, if someone wants to shed some light on how I could
streamline
> this whole process better, I'd be interested in that. To be clear,
&gt; the process I am using right now essentially has the user type into
a
>; textbox, click a button which has a listener that in turn fires a JS
> function that makes an AJAX call. When the AJAX call returns, I
want
> to bind the results of that AJAX request to my dataTable. Maybe
there
> is a better way to do this all the way around.
>
> One complication is that I am working within an existing AJAX
>; framework. This doesn't mean I wouldn't be willing to change that,
&gt; but that's the reason I started doing things this way. I've noticed
> from the documentation it looks like there are better ways to do
this.
> I'm just not sure whether it's worth working outside my existing
> framework or not, but I'm willing to be convinced either way.
>;
> Thanks for any help!
&gt;

Messages in this topic (4) Reply (via web post) | Start a new topic

.