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

Re: How to access selected rows of a datatable from a button click event?

Expand Messages
  • jliuecmd
    I figured out the solution, is to use array definitions on all datasource, configs, columndefs, datatables, buttons, and div names for datatables and buttons
    Message 1 of 7 , May 1, 2009
    • 0 Attachment
      I figured out the solution, is to use array definitions on all datasource, configs, columndefs, datatables, buttons, and div names for datatables and buttons (one-to-one correspondence on all these arrays).

      The trick is when adding the event listener to the button, need to pass in the index as an extra parameter:

      button[i].on("click", function(ev, index) {
      // access the values of the same index, i.e., pertaining to the same person.
      }, i, true);

      That would do it.

      --- In ydn-javascript@yahoogroups.com, "jliuecmd" <jliuecmd@...> wrote:
      >
      > It must be my understanding of JavaScript variable scoping is so bad.
      >
      > In the button click event function, I added:
      >
      > alert ("divDataTablePerPerson = " + divDataTablePerPerson);
      >
      > No matter which button I clicked, I always get:
      >
      > divdatatableid3
      >
      > Happen to be the last one in the loop.
      >
      > How can I fix this now?
      >
      > Thank you!
      >
      > Jun
      >
      > --- In ydn-javascript@yahoogroups.com, "jliuecmd" <jliuecmd@> wrote:
      > >
      > > Thank you for your help Valentin and Satyam. Here is more details and
      > > some progress I made on this, but I still need help.
      > >
      > > I am building a site that shows personalized tabs.
      > >
      > > An account can have multiple persons, and each person will have a
      > > tab, and the tabs are created dynamically as following:
      > >
      > > // first tab to create tabview and add datatable/button containers
      > > var tabview = new YAHOO.widget.TabView();
      > > for (var i=0; i<persons.length; i++)
      > > {
      > > person = persons[i];
      > > var divDataTablePerPerson = 'divdatatable' + person.id;
      > > var divButtonPerPerson = 'divbutton' + person.id;
      > >
      > > var htmlStr = 'table: <div id="' + divDataTablePerPerson + '"></div>';
      > > htmlStr += 'submit: <div id="' + divButtonPerPerson + '"></div>';
      > >
      > > tabview.addTab(new YAHOO.widget.Tab({
      > > label: person.firstname + '(' + person.personid + ')',
      > > content: htmlStr
      > > }));
      > > }
      > >
      > > tabview.appendTo('mytabviewcontainer');
      > >
      > > this will create tabview like this:
      > >
      > > tab1(firstname1(id1)) tab2(firstname2(id2)) ...
      > >
      > > and each tab has the following containers:
      > >
      > > <div id='divdatatableid1'> </div>
      > > <div id='divbuttonid1'> </div>
      > >
      > > Now I need to fill the datatable and the button within each tab and add events:
      > >
      > > // second tab to populate containers with actual datatable and button,
      > > // and add events:
      > > for (var i=0; i<persons.length; i++)
      > > {
      > > person = persons[i];
      > > var divDataTablePerPerson = 'divdatatable' + person.id;
      > > var divButtonPerPerson = 'divbutton' + person.id;
      > >
      > > var columnDefs = [
      > > {key:"column1", label:"ColumnA", sortable:true},
      > > {key:"column2", label:"ColumnB", sortable:true}
      > > ];
      > >
      > > var datasource = new YAHOO.util.DataSource(person.purchaserecords);
      > > datasource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
      > > datasource.responseSchema = {
      > > fields: [
      > > {key:"column1"},
      > > {key:"column2"}
      > > ]
      > > };
      > >
      > > var configs = {
      > > selectionMode:"single",
      > > sortedBy:{key:"column1", dir:YAHOO.widget.DataTable.CLASS_ASC}
      > > };
      > >
      > > // create the datatable for person i:
      > > var datatable = new YAHOO.widget.DataTable(divDataTablePerPerson, columnDefs, datasource, configs);
      > >
      > > // subscribe to rowClickEvent in order to select row:
      > > datatable.subscribe("rowClickEvent", datatable.onEventSelectRow);
      > >
      > > // create the button:
      > > var button = new YAHOO.widget.Button(divButtonPerPerson);
      > > button.on("click", function() {
      > > alert(datatable.getRecordSet().getRecord(datatable.getSelectedRows()[0]).column1);
      > > });
      > > }
      > >
      > > Now interesting thing happens. If I had, say, three persons in the
      > > account. All three datatables are shown correctly under the correct
      > > tab. When I select a row in the first two tables (for the first two
      > > people), the button click under the respective tab does not show
      > > anything. If I select a row in the third (i.e., the last) table, when
      > > I click on ALL three buttons, it shows the value for the selected row
      > > in the THIRD table.
      > >
      > > So I suspect that ALL three buttons are pointing to the last table.
      > > As you can see that the variables are local within hte second for
      > > loop, so I don't understand how this could happen and how to get
      > > around it. I tried to define all columnDefs/datasource/configs
      > > /datatable/button as array outside of the second for loop, such that
      > > I would have defined the datatable and button like the following:
      > >
      > >
      > > datatable[i] = new YAHOO.widget.DataTable(divDataTablePerPerson, columnDefs[i], datasource[i], configs[i]);
      > > button[i] = new YAHOO.widget.Button(divButtonPerPerson);
      > >
      > > But this time even selecting a row in the last table does not show up
      > > in the button click events.
      > >
      > > So I think this is probably an interesting problem to solve, and hope
      > > can get an answer pretty quickly (my PLEA)!
      > >
      > > Thank you!
      > >
      > > Jun
      > >
      >
    Your message has been successfully submitted and would be delivered to recipients shortly.