I am referring the following url http://jqueryui.com/autocomplete/#combobox
to render comboBoxes in my HTML page. Using the following line of code I can determine when an item from the comboBox is selected.
$("#myDropDown").combobox({
select: function (event, ui) {
//item from combobox is selected
},
});
I wish to attach an onFocus or an onBlur event to this dropdown. On searching I only come across the select event. Is there a workaround to bind an onFocus or an onBlur event to the comboBox?
Related
http://klaussongs.com/
I have this table on my site that when you hover over the tabs, it changes it. But I want to make it so it works on click I tried defining that on my code by saying:
$("#tabs").tabs();
But it is not overriding the jquery UI CDNed file main event which is mouseover. I can see on console under eventlistener that it has a mouseover listener attached to it, how do I override that to work on click. I also tried this, but it didn't work:
$("#tabs").tabs({
event: "click"
});
I have a need to capture an event (like a click) on a object that is elsewhere on the page and not a child of the select2 object while the select2 object has focus and is showing results. When the select2 results object is focused, I cannot click on a button/anchor elsewhere on the page and have it perform its action. It merely closes the select2 object.
Is there a way to do this? Here is a demo that shows this behavior: http://codepen.io/anon/pen/JoJobW
<!-- Javascript snippet -->
$(document).ready(function() {
$("#e1").select2();
$("#e2").click(function(){
alert("click!");
e.preventDefault();
});
});
<!-- HTML snippet -->
<select id="e1"></select>
Click here when select2 is focused
Using select2 v3.5.2 and jQuery 1.11.0
Select2 places a "mask" element behind the drop-down that captures the mouse click. Others have complained about this.
Here is a jsfiddle that shows the mask element.
You could try to remove the mask element when the drop-down is opened.
$('#e1').select2().on('select2-open', function() {
$('.select2-drop-mask').remove();
});
Of course, this means the drop-down will not close when the user clicks off of it, but you could add an event handler on the document (or body) to do that.
$(document).click(function() {
$("#e1").select2('close');
});
You have to make sure the click event on the other element does not propagate to the document in that case.
$('#e2').click(function() {
alert('click!');
return false; // Prevent default action and stop propagation.
});
jsfiddle
After user hits last tab of a form in jQuery UI's accordion how do you get the next div to open and current one to close with the focus on the next input in-line?
Also I am looking for the reverse. If use types shift tab to go in the opposite direction then I am searching for a way to implement the reverse behavior as well. I.e. close the existing accordion div and open up the next accordion div in line and go to the last input in the div and set focus to it.
You need to bind the Tab key press, on the last input field of a form, to the accordion function to activate the next section:
$('#firstform input:text').last().on('keydown', function(e) {
if (e.which == 9) {
if (!e.shiftKey) {
var active = $( "#accordion" ).accordion( "option", "active" );
$("#accordion").accordion( "option", "active", active + 1 );
}
}
});
You also need to activate the first input box of the next form, using the activate event of the accordion:
$( "#accordion" ).accordion({
activate: function( event, ui ) {
$("#secondform input:text").first().focus();
}
});
The procedure is similar for the reverse case, as you can see in the fiddle.
I am using jQuery UI Autocomplete plugin on a textarea
What I want is the textarea content should not be modified when the user hovers on the autocomplete list
This means, if the user scrolls though the list or hovers on the options, the textarea contents should not change. The change should occur only on selection of the option.
$("#my_textarea").autocomplete({
source: mySource,
focus: function (event, ui) {
event.preventDefault() // <-- prevent the textarea from being updated.
}
});
Example: http://jsfiddle.net/hJ9sA/
I'm trying to put a JqueryUI Datepicker on an AJAX appearing form.
The traditional $(".datepicker").datepicker(datepickerParams); does not work since the ".datepicker" element is not present on DOM ready.
I've tried the live() method but there is no load event on <input>.
Then, I do the following :
$("#datepicker_button").live('click', function() {
$('.multiFieldsDatepicker').datepicker(liveMultiFieldsDatepickerParams).focus();
});
It works when I focus on the input field but I can't put the calendar icon to show the calendar.
Is it possible to catch an event when the form appears and set the datepicker with $(".datepicker").datepicker(datepickerParams); ?