I'm trying to do something when a user selects an option from a select box - As simple as can be right? I'm using JQuery 1.3.1 to register a click handler with the id of the select box. Everything was fine until I tested using Chrome and Safari and found it didn't work.
Firefox 3.05 - YES
I.E 7.0.5730.13 - YES
IE6Eolas - YES
Sarafi 3.2.1 - NO
Chrome 1.0.154.43 - NO
See below code:
<html>
<head>
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script language="javascript">
$(document).ready(function(){
$('#myoption').click(function() { alert('Select Dropdown was clicked: '+ $('#myoption').val()); });
});
</script>
</head>
<body>
<select id="myoption">
<option value="A">A</option>
<option value="B">B</option>
</select>
</body>
</html>
Anyone know what I should be doing for this to work? The alert does eventually get triggered but only after double-clicking the select box?
I found my problem. For Select boxes, you need to register a handler for a "change" event rather than a "click" event. It's strange that Firefox and IE work with the click event.
To sum up, the following code works across all browsers:
<html>
<head>
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script language="javascript">
$(document).ready(function(){
$('#myoption').change(function() { alert('Select Dropdown was clicked: '+ $('#myoption').val()); });
});
</script>
</head>
<body>
<select id="myoption">
<option value="A">A</option>
<option value="B">B</option>
</select>
</body>
</html>
Safari and Chrome are both webkit based browsers. Webkit uses the native dropdown elements from your OS instead of implementing dropdowns itself, and unfortunately native dropdowns do not support a click events. For the same reason they also do not support CSS for option elements or other neat tricks.
The only cross-browser way to get those working is to implement this by hand using an <ul> and a lot of javascript.
Related
I try to use the newest select2 v4.0.3 library in a web page. I used the given example on this page for tagging and tokenization.
I tested it in different browsers. It works fine, but in Internet Explorer v.11 it behaves strangely:
I tried to add a new element which was not among the options.
After typing a few characters, the cursor was taken away and I was not able to finish the word I was typing in. When I clicked into the select box to gain back the cursor, the half-entered word disappeared. So it seems to be impossible to type in more then 3-4 characters. I experienced the same on select2.github.io/examples page when opening it in IE.
<html>
<head>
<link rel="stylesheet" href="css/select2.css" type="text/css" />
<script src="js/jquery-2.1.0.js" type="text/javascript"></script>
<script src="js/select2.full.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
$(".js-example-tokenizer").select2({
tags: true,
tokenSeparators: [',', ' ']
});
});
</script>
<select class="js-example-tokenizer" multiple="multiple" style="width: 600px;">
<option value="AL">Alabama</option>
<option value="WY">Wyoming</option>
</select>
</body>
</html>
Without using the tagging, select2 works fine in IE as well. But I would like to use a multi-select, tagged control where the user can enter free text as selected option also.
Is there a workaround for select2 to use it with tagging and tokenization in IE as well?
Fiddle example to use on IE11 for testing.
The issue on GitHub related to the problem.
These two classes : select2-container--focus select2-container--open are on the input's container respectively when the input element has the focus and when the options dropdown menu is open.
When we begin to type, the opening of the dropdown menu make the input element lost the focus (blur). Select2 needs to re-focus on the element. In fact, in the Select2 source code, we can see that the update method finish by re-focus on the element : this.$search.focus() (check here).
This code works fine in most browsers, but not in IE v11 because IE doesn't arrive to re-focus on the input with this Select2 source code. The class select2-container--focus disappears and the focus stay on the dropdown menu, which creates the bug.
In more recent version of Select2, it looks like they tried a fix : check here.
Sadly, after test it, it is still not working. The only solution that i see here is to override the Select2 source code until a fix is released. Otherwise, you need to use a version where the bug is not present (e.g. 4.0.2 as mentionned in comments).
Based on GitHub issues (in particular this one : GitHub issue), a solution could be :
JS Fiddle
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<script type="text/javascript">
// Override update method
$.fn.select2.amd.require._defined['select2/selection/search'].prototype.update = function(a, b) {
var c = this.$search[0] == document.activeElement;
this.$search.attr("placeholder", "");
a.call(this, b);
this.$selection.find(".select2-selection__rendered").append(this.$searchContainer);
this.resizeSearch();
if (c) {
var self = this;
window.setTimeout(function() {
self.$search.focus();
}, 0);
}
};
$(document).ready(function() {
$(".js-example-tokenizer").select2({
tags: true,
tokenSeparators: [',', ' ']
});
});
</script>
<select class="js-example-tokenizer" multiple="multiple" style="width: 600px;">
<option value="AL">Alabama</option>
<option value="WY">Wyoming</option>
</select>
so I'm starting to experiment with javascript/jquery and I have an input field with a datalist attached to it. The only problem I have is that when i "hover" over the datalist (once it appears) I want to trigger an event.
I have managed to trigger click and change events, but mouseover just won't work and I can't seem to find an example that works. Here is the code
<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script type="text/javascript">
$(function(){
// This works
$("#browserList").on("change", function(){
console.log("changed val=" + $(this).val());
});
// This does not
$("datalist#browsers").mouseover(function(){
console.log("hovered");
});
});
</script>
<input list="browsers" id="browserList" placeholder="Find a browser">
<datalist id="browsers">
<option>Explorer</option>
<option>Firefox</option>
</datalist>
Please tell me what I am missing,
Thank you!
For mouse over use the below syntax
$("#browserList").mouseover(function(){
//do something
})
If you want to trigger the event on options of datalist, it's not possible because they are shadow elements. please see the explanation from another SO question. This explains better about it.
I'm instantiating the Chosen plugin within a Bootstrap Modal. I'm calling the Chosen plugin after I've launched the modal.
All works as expected apart from being able to auto focus the element to allow typing without first clicking into the element. Strangely I'm getting a blue border around the element which would indicate it has focus but no keypress actually registers until I click into the object.
I only need this to work for Chrome, I'm currently running version 39.0.2171.95.
I'm following instructions from the docs:
http://harvesthq.github.io/chosen/options.html#triggerable-events
Here's the code:
var $modal = $('#' + modalId); // This element contains relevant modal markup along with <select> element
$modal.modal();
var $mySelect = $('#mySelectElement'); // id of the <select> element
$mySelect.chosen();
$mySelect.trigger('chosen:activate'); // This doesn't work...
Have also tried the following but to no avail:
$mySelect.trigger('chosen:open'); // This doesn't work...
Any pointers appreciated.
Cheers,
Lee
I found an answer, or a workaround at least.
When stepping through the code I noticed that the trigger('chosen:activate') method is called before the $modal.modal() has completed i.e. the modal has not yet displayed.
I simply added an asynchronous delay before calling chosen:activate which appears to fix it and the Chosen element can be typed into immediately:
// Enable chosen plugin...
var $mySelect= $('#mySelect');
$mySelect.chosen();
var enableChosen = setTimeout(function() {
$mySelect.trigger('chosen:activate');
}, 250);
Anything lower than 250ms and it stops working again. I guess it's something to do with having to wait for the modal fade animation to complete.
** UPDATE **
Alternative and better method, hook into the shown.bs.modal callback for the Bootstrap modal, like so:
$modal.on('shown.bs.modal', function(e) {
// Enable chosen plugin...
var $mySelect = $('#mySelect');
$mySelect.chosen();
$mySelect.trigger('chosen:activate');
});
Your code must work. Here is a simple example base on official documentation. I don't know if your are doing something more in your code that is doing your code don't work.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Chosen: A jQuery Plugin by Harvest to Tame Unwieldy Select Boxes</title>
<link rel="stylesheet" href="docsupport/style.css">
<link rel="stylesheet" href="docsupport/prism.css">
<link rel="stylesheet" href="chosen.css">
<style type="text/css" media="all">
/* fix rtl for demo */
.chosen-rtl .chosen-drop { left: -9000px; }
</style>
</head>
<body>
<form>
<div id="container">
<div id="content">
<header>
<h1>Chosen <small>(<span id="latest-version">v1.3.0</span>)</small></h1>
</header>
<em>Into This</em>
<select data-placeholder="Choose a Country..." class="chosen-select" style="width:350px;" tabindex="2">
<option value=""></option>
<option value="United States">United States</option>
<option value="United Kingdom">United Kingdom</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Aland Islands">Aland Islands</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
</select>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="chosen.jquery.js" type="text/javascript"></script>
<script type="text/javascript">
var $mySelect = $('.chosen-select');
$mySelect.chosen();
$mySelect.trigger('chosen:open');
</script>
</body>
</html>
I can't get it to do anything. The drop down just behaves normally. I've followed their instructions and created the simplest demo I could and still nothing works. I've checked my paths and put everything in the same directory to make sure everything is being found. I have jQuery being loaded first.
Here's the html file:
<!doctype html>
<html>
<head>
<title>Searchable</title>
<script src="jquery-1.9.1.js"></script>
<script src="jquery.searchabledropdown-1.0.8.src.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("select").searchable();
});
</script>
</head>
<body>
<select id="myselect">
<option value="0">Aardvark</option>
<option value="1">Beta</option>
<option value="2">Charlie</option>
<option value="3">Louis Chan</option>
<option value="4">Zoomba</option>
<option value="5">Lima</option>
</select>
</body>
</html>
Here's a link to the plugin. Demo is on the plugin page: http://jsearchdropdown.sourceforge.net/
this works for me:
<!doctype html>
<html>
<head>
<title>Searchable</title>
<script type="text/javascript" src="http://jsearchdropdown.sourceforge.net/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://jsearchdropdown.sourceforge.net//jquery.searchabledropdown.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("select").searchable();
});
</script>
</head>
<body>
<select id="myselect">
<option value="0">Aardvark</option>
<option value="1">Beta</option>
<option value="2">Charlie</option>
<option value="3">Louis Chan</option>
<option value="4">Zoomba</option>
<option value="5">Lima</option>
</select>
</body>
</html>
It seems like the $.browser has been removed from jquery 1.9 core and above see the reference here you can decide to fix the problem by changing the library, use an older jquery version or use another alternative here you can find some better examples.
Good luck!
I downloaded the code and tested it. The problem is jQuery 1.9.1, when I put that version it does not work, but when I put back jQuery 1.8.3 it works.
I don't think there is a way to solve it unless you dig in the library, so it's better to use 1.8.3 as in the demo.
For the above Example: Once you searched the key like 'Zoo..' then you can select 'Zoomba'. Again If want to change the selection, in that list you can able to see only 'Zoomba' not all values.
If you want to show all values in that list you have to clear that searched key once selected index changed. Like this,
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Searchable</title>
<script type="text/javascript" src="http://jsearchdropdown.sourceforge.net/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://jsearchdropdown.sourceforge.net//jquery.searchabledropdown.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#myselect').searchable();
$('#myselect').change(function() {
$(this).autocomplete('search', '');
});
});
</script>
</head>
<body>
<select id="myselect">
<option value="0">Aardvark</option>
<option value="1">Beta</option>
<option value="2">Charlie</option>
<option value="3">Louis Chan</option>
<option value="4">Zoomba</option>
<option value="5">Lima</option>
</select>
</body>
</html>
You written code is fine, It is a browser and Jquery version related issue.
Runs on IE 7.x, IE 8.x, Firefox 3.5.x, Safari 4.x, Opera 10.x, Chrome 3.x
It uses version Jquery 1.7.2 and Jquery UI 1.8.18
Also use plugin http://effinroot.eiremedia.netdna-cdn.com/repo/plugins/forms-controls/searchabledropdown/jquery.searchabledropdown.js
You can check the running version on JSFiddle
http://jsfiddle.net/JWyRZ/
You always can use jquery-browser-plugin plugin from https://github.com/gabceb/jquery-browser-plugin. It adds the functionality missed by upgrade to 1.9. Just make sure you load jquery first and jquery-browser plugin afterwards.
i am using star rating plugin from https://github.com/ripter/jquery.rating, and using select box code as
<select name="Rating">
<option value="6">1</option>
<option value="7">2</option>
<option value="8">3</option>
<option value="9">4</option>
<option value="10">5</option>
</select>
And javascript code is like
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="jquery.rating.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("select[name='Rating']").addClass('rating');
$(".rating").rating();
$("select[name=Rating]").bind("change", function(){
alert( $("select[name=Rating]").val() );
});
});
</script>
And am using the same CSS available with the plugin. Here am trying to alert the selected value. Its working fine with IE8, But not working with Firefox & chrome. in firefox & chrome alert value is always 6. I am not getting what is the problem. Please help me to solve this issue.
Thanks in advance.
Try including JQuery Migrate into your project and see if it's works
https://github.com/jquery/jquery-migrate/