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:
- .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'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
Share Improve this question asked Jan 13, 2015 at 13:54 lee_mcmullenlee_mcmullen 3,1871 gold badge35 silver badges40 bronze badges2 Answers
Reset to default 4I 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 pleted 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 plete.
** 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./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>