1260TypedTextBoxFor to edit DateTime using datepicker and onSelect event

Jul 13, 2016 at 7:11 AM
Hi Frank,

I have TypedTextBoxFor to edit date using jQueryUI but I am not able to discover, how to catch onSelect event on the MVC Controls Toolkit level to trigger Ajax request.

The nearest solution I've gotten is a traditional jQuery approach:
    var onSelectDateFrom = $("#DateFrom_hidden").datepicker("option", "onSelect");
    $("#DateFrom_hidden").datepicker("option", "onSelect", function(dateText) {
      onSelectDateFrom(dateText);
      // my action here
    });
The onSelect event works as expected, but once the .datepicker("option", ....) is set, the TypedTextBoxFor stops showing Promt text - TextBox is empty, but uses prompt related CSS style.

Is there a regular way how to catch onSelect event or a way to fix prompt showing?

Thanks, pf
Coordinator
Jul 13, 2016 at 8:06 AM
Javascript handling of simple controls is documented here: http://mvccontrolstoolkit.codeplex.com/wikipage?title=Client%20Side%20Handling%20of%20Simple%20Controls.

You should use mvcct.widgets.TypedTextBox.bindChange(id, handler) where id is the virtual id as returned by the PrefixedId helper(see the documentation page).
Jul 13, 2016 at 10:40 AM
Hi Frank,

thank you for prompt reply. I played with it little bit and it seems that onChange event is triggered on multiple states (jQueryUI):
  • prev/next button is pressed
  • month/year selector is dropped down
  • Now button is pressed
  • datepicker is closed by close button
  • a day is selected (it seems there are two consecutive events: one for day selection and the second for datepicker close.
Here is what I put into $(document).ready() function:
    mvcct.widgets.TypedTextBox.bindChange('@Html.PrefixedId(m => m.DateFrom)', function()
    {
      console.log('DateFrom changed.');
      return false;
    });
OTOH, when I reset value by clicking external button handled this way:
    $('#btnClearDateFrom').on('click', function () {
      var textboxId = '#@Html.PrefixedId(m => m.DateFrom)_hidden';
      $(textboxId).datepicker('setDate', null);
      mvcct.basicControls.typedInputLoad(null, textboxId);
    });
the onChange event is triggered just once.

Frank, is there some discriminator allowing to distinguish what change is notified, or is there a chance to trigger event only when TextBox value is changing,
or, how to filter out unwanted onChange events?

Or, If I'd return to my idea from original post (to bind to onSelect directly): is there a chance to reset TextBox into initial state to display Prompt text?

Thanks, pf
Coordinator
Jul 14, 2016 at 7:41 AM
Edited Jul 14, 2016 at 7:42 AM
The event fires each time the content of the textbox is supposed to change. jQuery UI calendar changes the input content, when you move araound, that is why you receive a lot of events. There is no way to connect the change event to calendar events: calendar is just a way to write a date inside the input, it is "hidden" in the JS interface. The javascript interface of the typedtextbox is the same for all data types and for all calendars you use (it supports also bootstrap and jQuery mobile), so it cant depend on a specific calendar, but just on changes happening on the input content.

In any case, using the fact the user clicks a day to understand he "has finished" with date selection is not a good idea. User has finished with selection when focus passes to another control (also to a submit button..). So you might intercept the blur event, and verify there if the focus actually changed, This is also the "convention" used by all native Html5 inpur controls (darte control included)

The change event is conceived, mainly to update in real time UI as user changes the content of the textbox, not to notify the user finished with the date change.
Jul 14, 2016 at 8:02 AM
Hi Frank,

the "convention" you mentioned is suitable for CRUD editors, but not for incremental searching through huge amount of data using complex filtering criteria.
Anyway, it seems I've reached (for jQueryUI) what I need following my original idea and (perhaps) fixing the prompt text:
    var dateFromTextBoxId = '#@Html.PrefixedId(m => m.DateFrom)_hidden';
    var dateFromOnSelect = $(dateFromTextBoxId).datepicker("option", "onSelect");
    $(dateFromTextBoxId).datepicker("option", "onSelect", function(dateText) {
      dateFromOnSelect(dateText);
      postDateChangeAjaxRequest("DateFromChanged");
    });
    mvcct.basicControls.typedInputLoad(null, dateFromTextBoxId);

    $('#btnClearDateFrom').on('click', function () {
      var textBoxId = '#@Html.PrefixedId(m => m.DateFrom)_hidden';
      resetDatePickerValue(textBoxId, "DateFromChanged");
    });

  function resetDatePickerValue(textBoxId,discriminator) {
    $(textBoxId).datepicker('setDate', null);
    mvcct.basicControls.typedInputLoad(null, textBoxId);
    postDateChangeAjaxRequest(discriminator);
  }