I'm trying to manage select2 library in order to augment the capabilities of natives select html controls.
According to the official documentation (very compressed) it says that for using select2 you only need to download they CSS and JavaScript files and that is (and also, implicitly assumed, that you need jQuery).
So, there is a way of initializing select using HTML5 data attributes, but I am not getting it; I'm trying to follow their example. Perhaps I am missing some important note here.
Here is the HTML I am trying to do
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
</head>
<body>
<h1>Hello Select2</h1>
<div>
<select multiple id="a_select" data-tags="true" data-placeholder="Select an option" data-allow-clear="true" style="width:100%">
<option value="AL">Alabama</option>
<option value="WY">Wyoming</option>
</select>
</div>
</body>
</html>
Also a link to plunker, to have a live example ready to go. https://plnkr.co/edit/Xk101K3sowAYQwbRCFez?p=preview
PS: I can achieve the desired result thought JavaScript, but is quite annoying to don't know what is not working when i just followed the example on the official site.
You're not initializing Select2 anywhere... data-* attributes let you override default configuration, but you still need to kick off the plugin:
<script>$('select').select2();</script>
https://plnkr.co/edit/RPObSPVl8jlZgtedsK38?p=preview
Related
SelectBoxIt allows you to replace ugly and hard-to-use HTML select boxes with gorgeous and feature rich drop downs.
I implemented the SelectBoxIt and the <select> inside my render(return()) method didn't recognize it.
I searched the web and found almost only one source on Github that I didn't understand its recommendation, you can help me on this point.
In brief, I concluded that SelectBoxIt naturally doesn't support ReactJS.
Hence we need a solution or trick for that.
Below is sample code from their website and used it completely in my project:
<!doctype html>
<html>
<head>
<meta charset=utf-8>
<title>SelectBoxIt demo</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" />
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css" />
<link type="text/css" rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<link rel="stylesheet" href="http://gregfranko.com/jquery.selectBoxIt.js/css/jquery.selectBoxIt.css" />
</head>
<body>
<select name="test">
<option value="SelectBoxIt is:">SelectBoxIt is:</option>
<option value="a jQuery Plugin">a jQuery Plugin</option>
<option value="a Select Box Replacement">a Select Box Replacement</option>
<option value="a Stateful UI Widget">a Stateful UI Widget</option>
</select>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script src="http://gregfranko.com/jquery.selectBoxIt.js/js/jquery.selectBoxIt.min.js"></script>
<script>
$(function() {
var selectBox = $("select").selectBoxIt();
});
</script>
</body>
</html>
The following select was not affected:
<select
id="sel1"
// ref={s => { this.selectBox = s; }}
onChange={ event => this.onSelectChange(event.target.value) }
>
{options}
</select>
The <select name="test"> has worked when put it inside render(return()) but the <select id="sel1" > inside render(return()) has not been changed to be a SelectBoxIt shape. Note that I commented the ref={s => { this.selectBox = s; }} just to prevent the error to display.
Since this is a jquery plugin, you need to make sure to have it installed:
npm install -S jquery
Then you need to import this in your script :
import * as $ from 'jquery';
Now in your react component, apply the jquery initialization in componentDidMount. The only catch is that you need to use ref to find the node.
render() {
return <select ref={s => { this.selectBox = s; }} />
}
componentDidMount() {
$(this.selectBox).selectBoxIt();
}
Some reference here.
I found that reactJS didn't "catch" onChange of the select that is replaced with SelectBoxIt but it "catch" onClick. So for one project that use SelectBoxIt + ReactJS I've made onClick trigger from jQuery when select value is changed combined with react onChange event.
In script tag /index.html/:
$("select").on('change',function(){
$("select").trigger('click');
});
In reactJS /SelectBox.js/:
onClickHandled that check if value is changed.
Example here: https://github.com/gshishkov/selectBoxIt-reactjs
I know it is not very elegant solution, but it was fastest and working one.
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>
I am new to bootstrap. I do not understand why these simple multiselect options are not clickable.
EDIT
The first multiselect on the test-site below is the one in question. I have tested using Chrome and Firefox.
EDIT-2
I am also using angularjs and think there may be a conflict somewhere. I am in the process of testing this hypothesis out.
HTML
<head>
<link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css"/>
<script src="js/bootstrap-multiselect.js"></script>
</head>
<label for="work-type" class="fixed50">Type:</label>
<select id="work-type" name="work-type[]" multiple >
<option value="fiction">Fiction</option>
<option value="non-fiction">Non-Fiction</option>
</select>
The only javascript referense:
JS
$("#work-type").multiselect();
Here is a link to my test-site.
You also need to introduce a js file and a css file.
See details：
http://davidstutz.github.io/bootstrap-multiselect/
I'm working on some code that uses custom attributes on DOM nodes. These are necessary for particular logic that is used. The custom attributes are set on input elements such as dropdowns and text input fields and are of the format...
<input type="text" myCustomId="blah"...
This all works fine with standard HTML inputs. However, we are looking to use some Dijit widgets in place of the standard inputs to achieve a specific look & feel.
The DOM is parsed onLoad and the widgets are loaded (we set data-dojo-type to specify the widget).
The problem is Dojo/Dijit doesn't preserve the custom attributes. They get lost in the parsing.
Is it possible to specify custom attributes that a Dijit widget should use?
Edit:
Heres some sample HTML that highlights the problem. The "custom" attribute is being lost...
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://dojotoolkit.org/reference-guide/1.9/_static/js/dijit/themes/claro/claro.css">
<script>dojoConfig = {parseOnLoad: true}</script>
<script src="http://dojotoolkit.org/reference-guide/1.9/_static/js/dojo/dojo.js"> </script>
<script>require(["dojo/parser", "dijit/form/TextBox"]);</script>
</head>
<body class="claro">
<label for="firstname">Test: </label>
<input type="text" name="firstname" custom="test" value="testing testing"
data-dojo-type="dijit/form/TextBox"
data-dojo-props="trim:true, propercase:true" id="firstname" />
</body>
</html>
I found a solution based on this article...
http://dojotoolkit.org/features/1.6/html5data-attributes
Essentially if I add "data-" in front of our custom attributes, the dojo parser preserves the custom attribute in the widget. It doesn't place the attribute on the top most node of the widget but it does enough for us to look it up
Try use data-dojo-props='urCustomID=XXX', then you could obtain it by get("urCustomID").
the custom attributes added are retained by the widgets indeed. But, they are case-insensitive. According to the example you provided in your question, try accessing it by,
registry.byId('field_id').get('mycustomid')
or
dijit.byId('field_id').get('mycustomid')
Let me give a simple example:-
<script type='text/javascript'>
dojo.require("dijit.form.TextBox");
function func() {
alert(dijit.byId('namefld').get('customid'));
}
</script>
</head>
<body class="claro">
<input type="text" customId='mango' dojoType="dijit.form.TextBox" id="namefld" name="namefld"/>
<button onclick='func()'>click</button>
</body>
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.