Loading ...
Sorry, an error occurred while loading the content.

Re: Refresh datatable when HTML table data changes

Expand Messages
  • Anantharam
    Wow.. Excellent.. It worked just as i wanted.. Thanks a lot satyam.. ... the ... same ... points to ... of the ... with ... old ... pointing to ... would be
    Message 1 of 5 , Aug 31, 2008
    • 0 Attachment
      Wow.. Excellent.. It worked just as i wanted.. Thanks a lot satyam..


      --- In ydn-javascript@yahoogroups.com, Satyam <satyam@...> wrote:
      >
      > I think the problem is that the DataSource stores the reference to
      the
      > <table> element and, though you replace it with a table with the
      same
      > id, the previous reference as stored in the DataSource still
      points to
      > that now detached table. By detached I mean that it is not part
      of the
      > document.body tree, it is like a node you create with
      > document.createElement but you have not yet attached to the tree
      with
      > element.appendChild. So you end up having two source tables, the
      old
      > one, which is held by the reference the DataSource still has
      pointing to
      > it, and the new one which is what you see. The way around it
      would be
      > to change the reference in the datasource to point to the new one,
      which
      > could be done in function foo by:
      >
      > myDataSource.liveData = document.getElementById("accounts");
      >
      > Satyam
      >
      >
      > Anantharam wrote:
      > > Ok, Ive done that. Initially I had the HTML table displayed in a
      div
      > > tag and the datatable displayed in the same div tab. Now i have
      the
      > > HTML table displayed in a different div and the table displayed
      in a
      > > different div. But when i update the value displayed in HTML
      table,
      > > and use the sendrequest, the datatable is not reloaded with the
      new
      > > data. please help me follow it..
      > >
      > >
      > >
      > >
      > > </head>
      > > <body class=" yui-skin-sam">
      > > <button id="test">Change HTML table data</button>
      > > <button id ="reload">Reload table </button>
      > > <div id="markup"></div>
      > >
      > >
      > > <div id = "tablediv">
      > > <table id="accounts">
      > > <thead>
      > > <tr>
      > > <th>Due Date</th>
      > > <th>Account Number</th>
      > > <th>Quantity</th>
      > > <th>Amount Due</th>
      > > </tr>
      > > </thead>
      > > <tbody>
      > > <tr>
      > > <td>1/23/1999</td>
      > > <td>29e8548592d8c82</td>
      > > <td>12</td>
      > > <td>$150.00</td>
      > > </tr>
      > > <tr>
      > > <td>5/19/1999</td>
      > > <td>83849</td>
      > > <td>8</td>
      > > <td>$60.00</td>
      > > </tr>
      > > <tr>
      > > <td>8/9/1999</td>
      > > <td>11348</td>
      > > <td>1</td>
      > > <td>$34.99</td>
      > > </tr>
      > > </tbody>
      > > </table>
      > > </div>
      > >
      > > <script type="text/javascript">
      > >
      > > YAHOO.util.Event.addListener(window, "load", showtable);
      > > YAHOO.util.Event.addListener(document.getElementById("test"),
      > > "click", drawnewtable);
      > > YAHOO.util.Event.addListener(document.getElementById("reload"),
      > > "click",foo);
      > >
      > > var myDataSource;
      > > var myDataTable;
      > >
      > >
      > >
      > > //Function to show the table initially
      > > function showtable()
      > > {
      > > var myColumnDefs = [
      > > {key:"due",label:"Due
      > > Date",formatter:YAHOO.widget.DataTable.formatDate,sortable:true},
      > > {key:"account",label:"Account Number",
      sortable:true},
      > >
      {key:"quantity",label:"Quantity",formatter:YAHOO.widget.DataTable.for
      matNumber,sortable:true},
      > > {key:"amount",label:"Amount Due",sortable:true}
      > > ];
      > >
      > > myDataSource = new YAHOO.util.DataSource(YAHOO.util.Dom.get
      > > ("accounts"));
      > > myDataSource.responseType = YAHOO.util.DataSource.TYPE_HTMLTABLE;
      > > myDataSource.responseSchema = {
      > > fields: [{key:"due", parser:YAHOO.util.DataSource.parseDate},
      > > {key:"account"},
      > > {key:"quantity",
      parser:YAHOO.util.DataSource.parseNumber},
      > > {key:"amount", parser:this.parseNumberFromCurrency}
      > > ]}
      > > myDataTable = new YAHOO.widget.DataTable("markup", myColumnDefs,
      > > this.myDataSource,
      > >
      {caption:"Example:
      > > Progressively Enhanced Table from Markup",
      > >
      sortedBy:
      > > {key:"due",dir:"desc"}})
      > > }
      > >
      > >
      > >
      > > //Function to replace the HTML table source
      > > function drawnewtable()
      > > {
      > >
      > >
      > > var newtable = "<table id='accounts'><thead><tr><th>Due Date</
      > > th><th>Account Number</th><th>Quantity</th><th>Amount
      Due</th><tr></
      > >
      thead><tbody><tr><td>1/23/1999</td><td>29e8548592d8c82</td><td>12</
      > > td><td>$150.00</td></tr>"
      > > document.getElementById("tablediv").innerHTML = newtable
      > >
      > >
      > >
      > >
      > >
      > > }
      > >
      > >
      > > //Function which i want to redraw the datatable based on the new
      HTML
      > > table created.
      > > function foo()
      > > {
      > >
      > > scallback = {
      > > success : myDataTable.onDataReturnInitializeTable,
      > > failure : myDataTable.onDataReturnInitializeTable,
      > > scope : myDataTable
      > > };
      > > myDataSource.sendRequest("", scallback);
      > > myDataTable.render();
      > >
      > > }
      > > </script>
      > > </body>
      > >
      > >
      > >
      > > --- In ydn-javascript@yahoogroups.com, Satyam <satyam@> wrote:
      > >
      > >> The best would be if you can load the new data for the table
      > >>
      > > elsewhere,
      > >
      > >> not in the same div where the original markup was and the
      DataTable
      > >> would be by the time you reload it. The problem is that all
      the
      > >>
      > > event
      > >
      > >> listeners that provide the interactivity on the datatable are
      > >>
      > > hooked to
      > >
      > >> the elements the DataTable has created and if you load new data
      > >>
      > > right
      > >
      > >> there, they would all be cut off, even if replaced by HTML of
      the
      > >>
      > > same
      > >
      > >> type. So, the best would be if you load the new data into some
      > >>
      > > other,
      > >
      > >> possibly invisible div and then read it from there. You can
      change
      > >>
      > > the
      > >
      > >> location from where the DataSource will read the data by
      changing
      > >> property liveData, that is where the first argument to the
      > >>
      > > constructor
      > >
      > >> goes. Then see:
      > >>
      > >> http://developer.yahoo.com/yui/datatable/#datasource
      > >>
      > >> the section titled Getting More Data.
      > >>
      > >> The examples shows how to append extra rows, but you would
      replace
      > >>
      > > what
      > >
      > >> is there so you would use onDataReturnInitializeTable instead:
      > >> <http://developer.yahoo.com/yui/docs/
      > >>
      > > YAHOO.widget.DataTable.html#onDataReturnInitializeTable>
      > >
      > >> see:
      > >>
      > >> http://developer.yahoo.com/yui/datasource/#hooking
      > >>
      > >> Satyam
      > >>
      > >> Anantharam wrote:
      > >>
      > >>> I have a page and I have a HTML table inside it. I also have
      two
      > >>> buttons.
      > >>>
      > >>> When the page loads, my html table is loaded and also i create
      a
      > >>> datasource which takes data from the html table and also i
      draw a
      > >>> datatable based on the datasource.
      > >>>
      > >>> Now when i click the button "Change HTML table data", I have
      > >>>
      > > written
      > >
      > >>> a javascript which will replace the contents of the HTML table
      > >>>
      > > which
      > >
      > >>> i created using markup.
      > >>>
      > >>> I have another button called "Reload". When i click on this
      > >>>
      > > button, i
      > >
      > >>> want a method to be triggered which will draw a datatable
      based
      > >>>
      > > on
      > >
      > >>> the new HTML table values created. It is fine if I draw the
      table
      > >>>
      > > in
      > >
      > >>> the first button click.
      > >>>
      > >>> So basically i want a table created and a button. When i click
      on
      > >>>
      > > the
      > >
      > >>> button, the data in the table should change and display the
      new
      > >>> datatable basedo on the new values.
      > >>>
      > >>> Please help me on this issue.. The source code is below.
      > >>>
      > >>>
      > >>>
      > >>> <body class=" yui-skin-sam">
      > >>> <button id="test">Change HTML table data</button>
      > >>> <button id ="reload">Reload table </button>
      > >>> <div id="markup">
      > >>> <table id="accounts">
      > >>> <thead>
      > >>> <tr>
      > >>> <th>Due Date</th>
      > >>> <th>Account Number</th>
      > >>> <th>Quantity</th>
      > >>> <th>Amount Due</th>
      > >>> </tr>
      > >>> </thead>
      > >>> <tbody>
      > >>> <tr>
      > >>> <td>1/23/1999</td>
      > >>> <td>29e8548592d8c82</td>
      > >>> <td>12</td>
      > >>> <td>$150.00</td>
      > >>> </tr>
      > >>> <tr>
      > >>> <td>5/19/1999</td>
      > >>> <td>83849</td>
      > >>> <td>8</td>
      > >>> <td>$60.00</td>
      > >>> </tr>
      > >>> <tr>
      > >>> <td>8/9/1999</td>
      > >>> <td>11348</td>
      > >>> <td>1</td>
      > >>> <td>$34.99</td>
      > >>> </tr>
      > >>> </tbody>
      > >>> </table>
      > >>> </div>
      > >>>
      > >>> <script type="text/javascript">
      > >>>
      > >>> YAHOO.util.Event.addListener(window, "load", showtable);
      > >>> YAHOO.util.Event.addListener(document.getElementById("test"),
      > >>> "click", drawnewtable);
      > >>> YAHOO.util.Event.addListener(document.getElementById
      ("reload"),
      > >>> "click", foo);
      > >>>
      > >>> var myDataSource;
      > >>> var myDataTable;
      > >>>
      > >>>
      > >>>
      > >>> //Function to show the table initially
      > >>> function showtable()
      > >>> {
      > >>> var myColumnDefs = [
      > >>> {key:"due",label:"Due
      > >>>
      Date",formatter:YAHOO.widget.DataTable.formatDate,sortable:true},
      > >>> {key:"account",label:"Account Number",
      sortable:true},
      > >>>
      > >>>
      > >
      {key:"quantity",label:"Quantity",formatter:YAHOO.widget.DataTable.for
      matNumber,sortable:true},
      > >
      > >>> {key:"amount",label:"Amount Due",sortable:true}
      > >>> ];
      > >>>
      > >>> myDataSource = new YAHOO.util.DataSource(YAHOO.util.Dom.get
      > >>> ("accounts"));
      > >>> myDataSource.responseType =
      YAHOO.util.DataSource.TYPE_HTMLTABLE;
      > >>> myDataSource.responseSchema = {
      > >>> fields: [{key:"due", parser:YAHOO.util.DataSource.parseDate},
      > >>> {key:"account"},
      > >>> {key:"quantity",
      > >>>
      > > parser:YAHOO.util.DataSource.parseNumber},
      > >
      > >>> {key:"amount", parser:this.parseNumberFromCurrency}
      > >>> ]}
      > >>> myDataTable = new YAHOO.widget.DataTable("markup",
      myColumnDefs,
      > >>> this.myDataSource,
      > >>>
      > >>

      > >>
      > > {caption:"Example:
      > >
      > >>> Progressively Enhanced Table from Markup",
      > >>>
      > >>>
      > > sortedBy:
      > >
      > >>> {key:"due",dir:"desc"}})
      > >>> }
      > >>>
      > >>>
      > >>>
      > >>> //Function to replace the HTML table source
      > >>> function drawnewtable()
      > >>> {
      > >>> var newtable = "<table id='accounts'><thead><tr><th>Due Date</
      > >>> th><th>Account Number</th><th>Quantity</th><th>Amount Due</
      > >>>
      > > th><tr></
      > >
      > >>> thead><tbody><tr><td>1/23/1999</td><td>29e8548592d8c82</
      > >>>
      > > td><td>12</
      > >
      > >>> td><td>$150.00</td></tr>"
      > >>> document.getElementById("markup").innerHTML = newtable
      > >>> }
      > >>>
      > >>>
      > >>> //Function which i want to redraw the datatable based on the
      new
      > >>>
      > > HTML
      > >
      > >>> table created.
      > >>> function foo()
      > >>> {
      > >>>
      > >>> //Here is where i requre the code to redraw the datatable
      based
      > >>>
      > > on
      > >
      > >>> the updated HTML table.
      > >>> }
      > >>> </script>
      > >>> </body>
      > >>>
      > >>>
      > >>> ------------------------------------
      > >>>
      > >>> Yahoo! Groups Links
      > >>>
      > >>>
      > >>>
      > >>>
      > >>> No virus found in this incoming message.
      > >>> Checked by AVG - http://www.avg.com
      > >>> Version: 8.0.138 / Virus Database: 270.6.11/1639 - Release
      Date:
      > >>>
      > > 28/08/2008 7:39
      > >
      > >>>
      > >>>
      > >>>
      > >
      > >
      > >
      > > ------------------------------------
      > >
      > > Yahoo! Groups Links
      > >
      > >
      > >
      > >
      > > No virus found in this incoming message.
      > > Checked by AVG - http://www.avg.com
      > > Version: 8.0.138 / Virus Database: 270.6.11/1639 - Release Date:
      28/08/2008 7:39
      > >
      > >
      > >
      > >
      >
    Your message has been successfully submitted and would be delivered to recipients shortly.