My problem is simple, but I can't seem to find a solution:
I am using bootstrap selectpicker plugin for my <select> tags
What I want is that when the user clicks on the dropdown selections,
the search box gets focused on, instead of having to click on the search box for it to be focused on to initiate a keyword search (Just better UI in general),
I read online that focusing on the searchbox should be on by default, but I tried default settings and it is not working
Here is my JQUERY/JS attempt to manually focus on the search box textbox input:
I tried this
$('.ingredientsList .dropdown-toggle').on('click', function (e) {
$(this).find(".bs-searchbox input").focus();
});
and this
$('select').on('changed.bs.select', function (e) {
$(this).find(".bs-searchbox input").focus();
});
Also tried this replacing select with class names and IDs, nothing seem to make it focus on the input text. I tried replacing .val() of the searchbox input just as a test and it worked. So really, I think what I'm doing wrong is the focus(); bit, but need general direction.
Here is the original HTML
<select class="selectpicker ingredientsList" name="ingredientsSelection" data-size="5"
id="ingredientsList" title="Search Ingredients" data-live-search="true" >
<option value="0">Milk</option>
<option value="1">Butter</option>
</select>
Maybe because you have many selecpicker and when you select one, it focuses to others. You may do that programmatically by looking more information in here
Try this:
$(document).ready(function () { $('#ingredientsList').focus();});
Related
I have an issue that I'm trying to solve. Need some advice to the right direction:
With Prestashop when creating combinations, you have a dropdwon-list on product page where customer can choose the combination from. Here within the product.tpl file I have created some extra button to get customers attention for a certain combination. Now I would like this combination beeing automatically selected and activated when user clicks on that button. I have inputted some javascript code within the product.tpl file which is also hiding some other elements when button is clicked. I just dont get it to work that a certain attribute option is selected on mouseclick. Someone may have some clue to solve this??
This is the select option list of the attributes within product page. For example I want on button click choose option "Large" and beeing activated within product page via onclick function with help of jquery/javascript within the template. How to achieve this?
<select id="group_4" class="attribute_select selectBox" onchange="findCombination();getProductAttribute();$('#wrapResetImages').show('slow');;" name="group_4" style="display: none;">
<option title="Small" selected="selected" value="21">Small</option>
<option title="Medium" value="41">Medium</option>
<option title="Large" value="40">Large</option>
<option title="Extralarge" value="25">Extralarge</option>
I have tried with this but it doesn't work:
$('#group_4 option[value='58']').attr('selected', 'selected').change();
Your quotes are wrong, looking at the console you would get the error Uncaught SyntaxError: Unexpected number
$('#group_4 option[value='58']').attr('selected', 'selected').change();
^ ^
should be
$('#group_4 option[value="58"]').attr('selected', 'selected').change();
To change the selected option, you can simply change the value of the select element using plain JS:
document.getElementById('group_4').value = 58;
You'd still need to trigger the change event after that, though.
See a simple example here: http://jsfiddle.net/BgBGL/1/ (uses alert as onchange callback)
Here is my simple code:
$(".test").change(function(){
alert("user clicked");
});
<select class="test">
<option value="1">test1</option>
<option value="2">test2</option>
</select>
It's all simple and working, but I want to get that function called not only when user changes option, but when he clicks on the same option that is already selected, I've tried click event but it gets fired up before user even clicka on any option, what could I do?
doesn't work in chrome.
$(".test option").click(function(e){
console.log('click');
});
updated your fiddle.
put the click on the option
EDIT: looks like it isn't possible without a bunch of work like using click on the select and comparing the location it was clicked or something hokey like that.
I am not sure what the end goal is, but the click on the select might work if you can do the processing one extra time when they initially click into it.
another article on it:
If you mean that there is only one thing in the select (like in the problem I was having), you could create a default disabled option, and set that as the selected. This would mean that if you had one option, onchange would fire because the disabled was the one that was previously selected:
<option disabled selecte>Select an option</option>
<option> Only Option </option>
I have a select div that I'm using the chosen jquery plugin to style and add features to (most notably, search). The div looks something like this,
<select data-placeholder="add a foobar" id="foobar" style="width: 350px;">
<option value=""></option>
</select>
And I'm using the chosen plugin like this,
$('#foobar').chosen();
While some AJAX is loading, I'd like to disable the entire <select> div. Maybe with something like this,
$('#foobar').disable()
or this
$('#foobar').prop('disabled', true)
I think you get the idea.
Any ideas on how to do this? I've tried a number of different things, like using jquery idioms for disabling things, disabling the <select> which just disables the underlying select, not the chosen stuff on top of it. I've even resorted to manually adding another div with a high z-index to just grey out the box, but I think that this is likely to be ugly and buggy.
Thanks for the help!
You are disabling just your select, but chosen renders it as divs, and spans, etc. So after disabling your select you need to update the plugin to make the select widget disabled too. You can try this way:
$('#foobar').prop('disabled', true).trigger("liszt:updated");
//For non-older versions of chosen you would want to do:
$('#foobar').prop('disabled', true).trigger("chosen:updated");
I found the information here
Fiddle
Once you update the widget all it does is it unbinds the click or other events on the plugin and changes its opacity to 0.5. As there is no real disabled state for a div.
In the lastest version of chosen, liszt:updated is not working anymore. You need to use chosen:updated:
$(".chosen-select").attr('disabled', true).trigger("chosen:updated")
Here's a JSFiddle.
PSL was correct, but chosen has been updated since.
Put this after you do the disabling:
$("#your-select").trigger("chosen:updated");
$('#foobar').prop('disabled', true).trigger("chosen:updated");
This works Perfect!!!!
#chosen v1.3.0
You can try this:
$("#foobar").prop('disabled',true).trigger("chosen:updated").chosen('destroy').chosen()
$("chosen_one").chosen({
max_selected_options: -1
});
$(document).ready(function () {
$("#foobar").chosen().on('chosen:showing_dropdown',function() {
$('.chosen-select').attr('disabled', true).trigger('chosen:updated');
$('.chosen-select').attr('disabled', false).trigger('chosen:updated');
$('.search-choice-close').hide();
});
$('.search-choice-close').hide();
});
When user clicks on select box , I want to hide the options menu which I do by firing blur event on select box . Following code works on firefox but not on chrome .
<select id="myselect" name="city">
<option value="default" id="first">Default value</option>
</select>
<script type="text/javascript">
$('#myselect').click(function(){
$(this).blur();
});
</script>
In chrome options menu stays as it is.
I suspect that this is related to user modal state (although I couldn't find any documentation to support it, I might add). I suspect that any event listeners are ignored until the user has made a selection from the options.
To support this, you can see that $(this).blur() fires exactly as expected when we hook it up to the onchange event of the <select>:
http://jsfiddle.net/TkfPN/
It would be far better to simply disable the <select> element. Blurring a focused element is extremely bad HCI and frustrating to the user.
Here is my hack for my problem
var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
if(is_chrome) $(".option").hide();
where class "option" represent all the option of select box.
I found a solution to this. Just delete the select box's node then add it back in! Make sure you're using delegated event handlers. Seems to work in all browsers. Here's my solution in jQuery, but if someone wants to write a pure JS solution, that would be good also.
jQuery('.sortSelect').appendTo('.sortParent');
If it wasn't appearant, the markup in this example works if sortSelect is the last direct child of sortParent. $.insertAfter()/$.insertBefore() would work as well.
I have a "select" input that is programmed to open up a modal box when clicked to get some information before proceeding. That part all works great.
The problem is that once the modal box is up, the select dropdown options are all still visible. I want that select input to go back to being a normal, not clicked on at all, select box.
What javascript or jquery code can I use to make that select dropdown clear away?
I think it is more correct to move handler from click to change. In this case select will be close and keyboard changes also will be processed
Try using this instead:
$('#mySelect').focus(function(event){
event.preventDefault();
// code here
});
If that does't work, try using the preventDefault() with the click event.
The focus will at least allows users navigating fields with the keyboard (tab, etc) instead of the mouse.
Prior to jQuery 1.6
$('#mySelectBox :selected').attr('selected', '');
jQuery 1.6 and higher
$('#mySelectBox :selected').removeProp('selected', '');
I'm not sure that you can do it with standard select tag. Maybe because it still has focus. What I did when I needed a customized select tag is to avoid the select tag completely and use a button which graphically looks like the select button. Look at this page - look at the TAX button and the button to the left of it. There is no select tag, but it works great.