blur to close select box do not work in chrome? - javascript

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.

Related

Prevent element inside modal from closing the modal with jQuery?

I have a mess of js right now and there are too many things across a bunch of different files (inherited) and I'm having trouble with one last piece.
I have a modal containing a form and everything works fine except the selectboxes. Once the user clicks the select box it fires the close function. I've tried everything I can remember but I can't remember the proper terms for what I'm trying to do so I can't google it.
Here's a quick fiddle
Code:
<div class="modal">
<select>
<option>Select an option</option>
<option>1</option>
<option>2</option>
</select>
</div>
And js:
$(document).click(function(){
if(!$(event.target).is(".modal")){
$(".modal").hide();
};
});
This works normally for anything I put in there except selectboxes.
UPDATE: Ok so I was completely wrong with this question and made a few incorrect assumptions in my testing. This is not related to selectboxes but specifically to jQuery datepicker-ui selects. So this question is a duplicate of a few others on Stackoverflow and it can be closed as duplicate. One of the duplicate questions I found was: Implementing jQuery DatePicker in Bootstrap modal
The event.target refers to the element from where the event originated, so when you click on the select element e.target is the select element then the $(event.target).is(".modal") test will fail.
So the solution is to check whether the event's target is inside a .modal element for which you can use .closest() as below
$(document).click(function(){
if(!$(event.target).closest(".modal").length){
$(".modal").hide();
};
});
Demo: Fiddle

Triggering an event

I have a target website where there is the following dropdown menu.
<select class="categories-options" data-level="1" name="level1-option" id="level1-option" required="">
<option value="">default</option>
<option value="p1" data-href="/callback/p1">P1</option>
<option value="p2" data-href="/callback/p2">P2</option>
<option value="p3" data-href="/callback/p3">P3</option>
</select>
When an item is selected from the menu, it triggers a "change" event and a function is called when this event happens. I have debugged the event using Chrome and you can see the debugging output when I selected an item from the dropdown menu. I have taken a screenshot from the debugger.
Now, let me explain what I am trying to do. I use a javascript function to select an item from the dropdown menu using the following code:
var id= document.getElementById('level1-option');
setSelectedValue(id, "p2");
$('#level1-option').trigger("select");
In the last line, I try to trigger the same event that happens originally in the webpage as if I manually selected the item. however, it doesn't trigger anything. |I see in the debug output that the event is triggered by class. I have tried many different things but didn't work. Could anyone shed some light on this issue? How can I trigger the same event that happens in that webpage using jquery or javascript?
Your code:
$('#level1-option').trigger("select");
...will trigger an event called select (which isn't related to the value of a form field change), but the event you stopped on in the debugger is change, not select:
If you want to trigger the change event, trigger the change event:
$('#level1-option').trigger("change");
// Difference is here -------^
Side note: Because you're using jQuery, your code can be simpler, you dont need the getElementById or the setSelectedValue:
$('#level1-option').val("p2").trigger("change");
Try this
$('#level1-option').trigger("change");

Why do I have to click a selectbox option twice in IE for it to go away?

I have a selectbox on my page, and it works excellently in every browser except IE. I've tested on 8 and 9, and I have the same issue. When I click an option, the .change() event fires, exactly like it should, but the options don't disappear until I either click again (which doesn't fire the click event, strangely), or click outside of the select box. This is no problem for me, since I use chrome, but I decent chunk of my users use IE8.
Here's the .change() function:
$('#configEquipDesc').change(function () {
alert($(this).val());
if ($(this).val() != 'unselected') {
ajaxGetConfig($(this).val());
}
});
Here's the HTML for the select.
<select name="configEquipDesc" id="configEquipDesc" data-native-menu="false" data-inline="true" class="configMenuEquip">
<option value="unselected" data-placeholder="true">Inspection</option>
</select>
More options are added using ajax, and that all works perfectly.
If this is a dynamically created selectbox, which I suspect it is, You need to use delagation. Try changing your jQuery to this:
$('body').on('change','#configEquipDesc', function () {
ajaxGetConfig($('option:selected', this).val());
});
and see if that fixes your problem.
EDIT - it's the selected option that you're trying to get the value of, correct? Not the select statement itself. So, here's a little trick to grabbing only the selected option and sending it to your ajaxGetConfig() function!!

disable jquery-chosen dropdown

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();
});

Keeping jQuerys .change() from running on page load

I have a page that has multiple select lists and when ever one of the select list changes using jQuery's .change() function I change the text in a span next to the select list. When the page loads there is already some text in every span (the text different for each span). The problem is that when the page loads the .change() function loops through all of the select lists changing the text in every span. I don't want the text in the span to change until a user selects a different item in the list. I can't just check to see if there is text in the span because if a user does change the selected item it doesn't matter if there is any text or not, I just don't want to to replace the text when the page loads. So, how can I get the .change() function to stop firing when the page is loaded? The code:
JS/jQuery
$(document).ready(function() {
$("select").change(function () {
var txt = $(this).val();
$(this).next('span').text(txt);
}).trigger('change');
});
HTML (repeated many times)
<select name="animal[]">
<option value="dog" selected="selected">dog</option>
<option value="cat">cat</option>
<option value="bird">bird</option>
<option value="snake">snake</option>
</select>
<span class="out">text that shouldn't be replaced until user changes selected item</span>
Thanks for your help!
You just need to remove this call:
.trigger('change')
It's what's invoking the $("select").change(function () { ... }) handler that you just bound. The default behavior is to wait for the change event to occur...a .trigger('change') or .change() (no parameters) will simulate the change event, making that handler go to work.
The "change" is triggering because your code is telling it to! That call to .trigger("change") says, "run the 'change' event handler please". So, take that out.
Now, the thing is, the reason your code was written that way was probably to make sure that the settings of the <select> elements really reflects what the behavior is supposed to be when users manually make the same changes. For example, sometimes there are forms where part of the inputs are supposed to be disabled unless a <select> is set to a certain option. By triggering the "change" event on page load, the code could make sure that those rules are in force. If you just take out that trigger, things may not work right, is what I'm saying. That handler looks pretty simple, so maybe the problem is that this code was cut-and-pasted from somewhere else.

Categories