The contents of the datepicker input is changed programmatically via "setDate" method and I want to update the preview of the input form depending on the changed date value.
The "onSelect" event is triggered only when the date is changed through the datepicker UI and not when "setDate" is called.
"onChange" event of the input is also not triggered.
Right now it seems the only way is to call my updatePreview function manually every time after the "setDate" and I have to re-format the date object I get from the "getDate" method.
Is there an easier way to do it?
Here's the mockup in jsFiddle. The "change programmatically" button doesn't update the preview.
If I am understanding correctly, you want to update a separate element with the date being entered or set programmatically. If so, updating an alternate field preview is baked into jQuery UI Datepicker already.
The datepicker widget only seems to be able to update an alternate <input> field rather than a <div> preview though, so if you need it to update a <div> then this demo will require a bit more work.
You could trigger the event yourself, but in general setting values in javascript does not trigger events. This goes for jQuery too.
Firing the events yourself:
$(elem).select(); // for select obviously
$(elem).change(); // for change
Related
The datepicker is managed by knockout-jqueryui in a Durandal view presented as a modal dialog. The calendar pops up when the corresponding INPUT is focussed, and hides when it is blurred. Data-binding works fine.
But when the user selects a value, the calendar closes, the INPUT updates and the calendar re-displays. It works, but it's annoying my users because they are mouse obsessed and the calendar obscures the control below, making it hard to click on it. Yes, I know they could press tab. I have pointed this out.
How can I stop the re-display? Ideally, triggers for display would be focus and keydown. I have no problem with configuring it to manual control and switching with data-bind="change: showCalendar, ..." or similar, if that's how one does this.
So, what's the usual way to go about this? If it's manual control as I describe above, what are some keywords to expedite finding the relevant section(s) in the documentation? (How to set it to manual and how to hide/show it manually.)
(I found show() and hide())
The showOn option for jQuery UI Datepicker is passed through by knockout-jqueryui.
It defines only two values, 'focus' and 'button'.
There is no explicitly defined mechanism to disable auto-display, but I found that a value other than the defined values has the desired effect. I am passing 'click'.
Manual control methods are show and hide.
Originally, I had a text input setup with a ng-model attribute, so that when changing its value, it would trigger something else on the page that was utilizing that model attribute. I have replaced that text input with a jQuery UI slider, and am curious what the correct or "angular" way to interact with this element so that the slider's change event / function can delegate directly to angular and accomplish the same sort of thing.
Take a look at the ui-slider component of angular-ui to see a solution for your situation.
I want to remove the CalculateCost event when it meets a certain criteria. There isn't any room for design changes, this is what I have to work with: layout, is an aspx page with a jquery tab (each tab is a .net user control). The tabs are added dynamically. Within this user control the follow input element exist and the method bound to the onchange event is the target.
<input type="text" id="txtCost" disabled="disabled" onkeypress="return isValidMoney(event);" onchange="CalculateCost(true, false); ValidateCostPerUOM(this);" runat="server"/>
What is happening: when this field is being edited and doesn't lose focus the event is not fired. The user doesn't trigger the blur and selects a different tab. the onchange event is fired by (jQuery or .net) but during the function execution the selected tab value changes hosing things up.
What I'd like to do in the jQuery tab's select method is check for this method in the execution queue and remove (or stop it). I have no code samples because I have no clue where to start. I tried looking at the jQuery.queue() api doc but was fruitless.
Thanks!!!
I'm using a datepicker, which is always visible on the page, and tied to a hidden <input>.
Depending on the user interactions on the page, some dates can get dynamically disabled (via beforeShowDay).
The problem is, this allows to disable a date which has been previously selected:
To avoid this, I'd like to unselect the current date prior to refreshing the datepicker.
Is this possible?
EDIT: The datepicker is attached to a div. Clear the selected value like this:
$('selector').datepicker('setDate')
This will unselect whatever day is selected.
I'm using jQueryUI Accordion, and genereate the elements on the fly. I need to prevent accordion expanding if we click Remove action link inside the header.
To stop further handlers from executing after one bound using .live(), the handler must return false. Calling .stopPropagation() will not accomplish this.
No luck with return false. Please see the demo.
I don't think you will have too much luck achieving what you want with live(), as jQuery only supports event bubbling and not event capturing. The design decision was probably due to the fact the IE does not support event capturing, even though W3C's speicification has the flexibility for both.
Your best bet is to attach a click event to the remove button right after it is inserted into the DOM (to stop the event propagation) before you re-initiate the accordion. You may need to take care not to bind click event to the existing remove buttons multiple times.
The pseudocode would look something like this:
call .accordion('destory') on the current accordion
create the new element, i.e. <h2>...<a class="revmoe">...</a></h2><div>...</div>
insert the new element to the existing accordion
bind a click event to the remove button in the new element to stop event propagation
initiate the accordion, i.e. .accordion({..})
SO posts on event capturing in jQuery:
event capturing with jQuery
Event Capturing vs Event Bubbling
Just use the given functions by the plugin:
$('#accordion').accordion({active:8, disabled:true});
jQuery('.remove').click(function(){
$('#accordion').accordion('disable');
})
I chose the option "active:8" because this way no header is opened from the beginning (index -1 does not work for IE). Check the function and options out at: http://docs.jquery.com/UI/Accordion
Hope this is what you were looking for :-)