datepicker to reload datatable

[Ryan Stapleton, modificado hace 9 años.]

Hello All,
I have recently started using Alloy UI 2.5 and YUI and am a little confused.

I am trying to get a datepicker on the page to reload a datatable when the user clicks on a new date.

I have gotten my datatable to load my data on page load from my servlet. I have also gotten my datepicker to fire and get data from my servlet.
The problem is when I click on my date input box it fires the request twice and when I click on the new date I get 3 more requests going off. Some with the old date and 1 or 2 with the new date.

The table looks like it flash updates the new date then goes back to the old date. When I click on the box again it refreshes to the current date (which is the date I want)

I am also a little confused on what options I can use instead of selectionChange: if any? I have a feeling I am just missing something? I feel something hasn't quite clicked yet and am looking for any help on assisting that as well.

Thank you

my html:

<input id="calDate" class="input-large" type="text" placeholder="Year-Mon-Day" >

<div id="myDataTable"></div>

JS:

YUI.use('aui-datepicker', 'datasource-io', 'datasource-jsonschema', 'datatable-datasource', 'node', 'transition','auo-datepicker',

   function (Y) {
      var url = "url for my servlet";
      var columns = [ { key: "name", label: 'Name', sortable: true }
                             , { key: "Hire date", label: 'hire', sortable: true }];

     var dataSource = new Y.DataSource.IO({ source: url });

     dataSource.plug(Y.Plugin.dataSourceJSONSchema, {
             schema: {
                resultListLocator: "UserDTOList",
                resultFields: columns
            }
    });

    var table = new Y.DataTable({
         columns: columns
    });
  
    table.plug(Y.Plugin.DataTableDataSource, {
       datasource: dataSource,
       initialRequest: url
    });

    dataSource.after("response", function () {
       table.render("#myDataTable");
    });

    var datePickerAUI = new Y.DatePicker({
       trigger: '#calDate',
       mask: '%Y-%m-%d',
       popover: {
           zIndex: 1
       },

       on: {
           selectionChange: function(event) {
               var date = new Date(event.newSelection);
               var urlMod = 'date=' + date.getFullYear() + '-' + (date.getMonth() +1) + '-' + date.getDate();

               table.get('data').reset();

               table.datasource.load({
                  request: urlMod,
                  
                  callback: {
                     success: function(e) {
                         table.datasource.onDataReturnInitializeTable(e);
                     }
                  }
               });
            }
          });
      }
);

[Kyle Joseph Stiemann, modificado hace 9 años.]

Hi Ryan,
The selectionChange bug is a known issue. See AUI-1205. As a workaround, I would recommend using the dateClick event of the internal YUI calendar:

var datePickerAUI = new Y.DatePicker({
    ...
    calendar: {
        on: {
            dateClick: function(event) {
                // your selectionChange code here ...
            }
        }
    }
    ...
}

Note: there are some small gotchas when using this workaround because the value of the this object changes meaning depending on whether you are within the calendar scope or the datePicker scope.

- Kyle

[Ryan Stapleton, modificado hace 9 años.]

Thank you very much. That solved my problem.

[Kyle Joseph Stiemann, modificado hace 9 años.]

You're welcome Ryan. Also I forgot to mention that the dateClick event is fired whether the date has changed or not, which may or may not be the behavior you want.

[Ryan Stapleton, modificado hace 9 años.]

I appreciate the heads up and will take that into account.

Thanks
-Ryan