I am using the JQueryUI Autocomplete Combobox at the following link http://jqueryui.com/autocomplete/#combobox. How can I prevent a change? I only allow a change on a condition and it is still calling a menuselect event w/ ui-autocomplete-item and allowing the change. That is line 6881 "this._value( item.value ); of the jquery-ui-1.10.3.js.
Everything worked prior to the change of a select to a jquery ui autocomplete combobox and everything would be fine now if I could prevent the menuselect function.
Thanks
You need to do the condition and event.preventDefault in the select event...
Related
select2 clear is not working when I am select option manually and clear t by js
Here is my function to clear select2 selected option
$('#select2_id option').removeAttr('selected');
Try this
$('#select2_id').val('').trigger('change);
Instead of
$('#select2_id option').removeAttr('selected');
I have a select2 box in bootstrap modal, I want to change the value of the select2 box but it didn't work.
I tried every single solution in previous posts and results but none of them got it work.
I use select2 4.0.2, I tested:
$('#select_id').val('val').trigger('change.select2');
$('#select_id').val('val').trigger('change');
$('#select_id').val('val').change()
It works one or two times then it stops working (randomly)
It works fine only when I change the select2 back to 3.x.x
$('#select_id').val('val').trigger('change');
is the right way, see here
$('#select_id').select2('val', selectedValue);
For Select2 with Ajax call, I struggled with lot of options, but none worked. Then i came to following solution, which works like charm
$("#select_id").html($("").val('val').text('text')).trigger("change");
To programmatically select an option/item for a Select2 control, use the jQuery
$('#mySelect2').val('1'); // Select the option with a value of '1'
$('#mySelect2').trigger('change'); // Notify any JS components that the value changed
You can also pass an array to val make multiple selections:
$('#mySelect2').val(['1', '2']);
$('#mySelect2').trigger('change'); // Notify any JS components that the value changed
I have used the following code in 4.x.xx version and it is working
$('#select_id').val('val').select2();
If you, like me, have added a custom handler for the select2:selecting event the correct complete answer to changing a value and triggering the custom select2 event would be:
$('#select_id').val('val').trigger('change').trigger({
type: 'select2:event_name', // It worked for me with select2:selecting and select2:select
params: {
args: { // Only use 'args' if using select2:selecting, select2:select does not use it
data: varWithEventData
}
}
});
For those who facing an issue like this:
If you're using multiple select elements and have a common event handler (like $(".mySelect2Inputs").click(...) ) when you do $('#mySelect2').trigger('change') the click event handler is gonna trigger multiple times ($(".mySelect2Inputs").length times).
To prevent this situation, you must use $('#mySelect2').trigger('change.select2') (attention to .select2 namespace!).
From the select2 docs:
https://select2.org/programmatic-control/events#limiting-the-scope-of-the-change-event
It's common for other components to be listening to the change event, or for custom event handlers to be attached that may have side effects. To limit the scope to only notify Select2 of the change, use the .select2 event namespace:
$('#mySelect2').val('US'); // Change the value or make some change to the internal state $('#mySelect2').trigger('change.select2'); // Notify only Select2 of changes
I am using Struts jQuery plugin. Problem is with <sj:tabbedpanel>.
I want to preselect the tab depending on the input while loading the page.
I know there is property selectedTab="1".
But I want it to change it while loading the page using jQuery.
In jQuery-UI plugin, there is function $("#tab").tabs('selected',2) which does that.
What is the similar function which does the same thing here.
Try this:
<sj:tabbedpanel id="tabbed" selectedTab="%{selected}"></sj:tabbedpanel>
selected should be a parameter, which decides the opened tab.
If you still wanna use jQuery, please check the api: jQuery Tabs API
here is the important part:
A series of events fire when interacting with a tabs interface:
tabsselect, tabsload, tabsshow (in that order)
tabsadd, tabsremove
tabsenable, tabsdisable
If you want to do this from javascript then use option to set selected tab.
$("#tab").tabs( "option", "selected", 2);
I am having a html dropdown
<select id="ExternalIp" onchange="externalIpchange()"></select>
I bind the data to dropdown through jquery and a I am passing data from controller which is working properly. I want to change the look and feel of the dropdown so I called a function
$("#ExternalIp").selectbox();
Now the look and feel of drop down is changed but it is not showing the data which I bind to dropdown. I am not getting what is the problem. Plz help
It appears as if the jQuery plugin you are using resets the values bound to the select list.
Look for a method provided within your jQuery plugin to rebind the data which you earlier attached with jQuery or style your element first and then try binding the values.
Cheers!!!
I'm using the nifty 'combobox' variant of jQuery UI Autocomplete - see here: http://jqueryui.com/demos/autocomplete/#combobox
I have it within a Form element because its part of a form.
The Autocomplete Combobox has a <button> that is used to show the whole drop down list. However when the user presses it, the form submits. This appears to be because the <button> has a type="submit" attribute. The whole element is created by the button() call within the .combobox fn, see source code.
How do I stop it submitting?
(NB: This guy had the same problem but he fixed it by removing the form - I can't do that)
Ah, nevermind, I figured it out.
The problem is discussed on the jQuery forum here:
http://forum.jquery.com/topic/autocomplete-combobox-problem-when-it-is-placed-inside-a-form-tag
They suggest several different ways of adjusting the source code of the autocomplete combo to fix it. The simplest one seems to be this:
Change the line that says
$("<button> </button>")
to
$("<button type=\"button\"> </button>")
this prevents the type="submit" from being inserted into the final button.