I have tried a couple of ways:
Set value as regular input, doesn't work for me because the value is bound to a variable and it overrides.
Trigger the arrow up event like:
find('#my_spinner').send_keys :arrow_up
Tried to trigger the click event for 'ui-icon-triangle-1-n', no success.
Any hints?
I was able to simulate the click on spin buttons like this:
find('.ui-spinner-up').click
find('.ui-spinner-down').click
Related
I am using jQuery-ui autocomplete, and I am tyring to handle the event that is fired each time the user moves up and down through the list of results by using the up and down keyboard arrow keys (not when using mouse).
Is that possible? if so, how?
I have solved it by handle focus event for this case and then I ignore default behaviour by returing false (sames as event.preventdefault()).
I've created a custom control whose layout is roughly like this
<TextInputLayout>
<TextInputEditText></TextInputEditText>
</TextInputLayout>
For a use case, I would like to attach a command to the click event on the TextInputLayout in order to open up a datepicker fragment from the view model. So I proceeded like this:
<MyCustomView
...
app:MvxBind="Click SaveDateCommand"/>
However, the click event wont trigger the "SaveDateCommand". In my control I have added stylable properties to control the "focusable" and "focusableInTouchMode" of the TextInputEditText widget; I've set those to false to no avail. I also went the custom binding route. Didn't work either. As of know I have written the barebones layout for my control into the main layout to bind a click with a command in TextInputEditText.
<TextInputLayout>
<TextInputEditText
app:MvxBind="Click SaveDateCommand"/>
</TextInputLayout>
However, I have the gut feeling that there has a to be a better way to do it. Thank you for your share of expertise on this one.
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'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 :-)