I want to do just a simple users loading in select 2 using AJAX. My code is as simple as:
$('.loadUsers').select2({
placholder: "Test placeholder",
minimumInputLength: 2
});
Now the first problem is the placeholder is not even working (nothing is displayed, no error at all) but the select2 input is displayed properly. Moreover, when I try to add the ajax option to select2 parameters I get the following error:
Error: Option 'ajax' is not allowed for Select2 when attached to a <select> element.
How to solve these problems?
The version of Select2 I'm using is 3.2.
// EDIT
Ok, I somehow managed to fix the AJAX loading by assigning the select2 to a hidden input instead of a select and adding both data and results properties. However the placeholder is still not showing. Why?
Related
I have implemented select2 widget, version 4. It works, but the x icon. It is not clearing the selection.
If you see this doc: https://select2.github.io/options.html, it says that this a problem in fact, but the documentation is incomplete for this.
Anyone has solved this already?
Thanks
Jaime
No it's not a bug. The "X" icon requires placeholder option.
Without it, clearAllow option cannot be used. So, right code will be like this:
$(".js-example-placeholder-single").select2({
placeholder: "Put some text...",
allowClear : true
});
By the way, there is undocumented option called debug. If you pass it to select2() method, the found errors will be printed on console. For example code in below:
$(".js-example-placeholder-single").select2({
//placeholder: "Put some text...",
allowClear : true,
debug: true
});
Will get in browser's console:
Why allowClear requires placeholder option?
The real drop down list, that you create with <select> and <option> elements hides by select2. And created new one.
In the new created drop down list, the field that user see (without drop down list) created automatically. Each time when you select new option, select2 will change previous Field with new one.
When X icon clicked, it also delete main field. And creates new field with parameters of placeholder.
Finally I have found it is a bug in Select2 4.0.2.
The solution is this, in select2.js, line 1760.
This has to be replaced:
this.$element.val(this.placeholder.id).trigger('change');
this.trigger('toggle', {});
By:
this.$element.val(this.placeholder.id).text(this.placeholder.text).trigger('change');
//this.trigger('toggle', {});
This solution also causes the dropdown not to appear when selection is cleared.
In my case, the clear button is not working even placeholder option is set. I need to add z-index property:
.select2-container .select2-selection--single .select2-selection__rendered {
z-index:1;
}
Adding of the empty select option with value '' helped me.
Select2 4.0.3.
I'm using select2.full.js
I'm not using any require.js to help me pull in modules, I'm basically using my know how from everything I learned in v3.5
I've been trying countless of hours, wrapping my head around this, but I have no idea how to make ajax cascading dropdowns.
Example: You load up the page, there is the first select2 dropdown that pulls data using ajax automatically (you don't enter anything.. data is there on the page load from the server), a default value is selected. Since that default value is selected, the second select2 drop down will use that value to make an ajax call to populate its own list. Now, when I select another value in the first select2 dropdown, the second select2 dropdown will reflect those changes with the new dataset.
What I've able to come up with was a 3 dropdowns that you can populate on a page load, but when you do any ajax request, the dropdown data doesn't change.
It's been two years since I used select2, and the library keeps changing, the documentation keeps changing, I'm at my wits end with this library. But I feel drawn to it by the bootstrap support, and the look and feel. The functionality, the way to implement things, the documentation is just so unbelievably awful.
I don't have any useful code at all, I've been pulling, plugging, modifying, etc.. and now I'm moving to my hair and teeth.
ANY useful example to do this would be awesome.
Just found my answer..
I was using the templating:
<select id="test">
<option value="1">1</option>
<option value="2">2</option>
</select>
to:
data = [{id: "1", text: "1"}, {id: "2", text: "2"}];
<input id="test" type="hidden" />
and just kept my jquery on select2 the same. So it was really just a change in the templating from to that solved it.
However, the only downside to this is that when you are refreshing new data from these drop downs, the highlighted (selected value) is always the first item in the drop down list, even though that's not the selected value shown in the dropdown.
Here is a small code snippet to make Select2 (v4.x) cascading dropdown - https://gist.github.com/ajaxray/187e7c9a00666a7ffff52a8a69b8bf31
Using this module, options of a select2 list box will be loaded/refreshed by ajax based on selection of another select2 list box.
Example use -
new Select2Cascade($('#province'), $('#district'), 'path/to/geocode', {type:"district", parent_id: ''});
Selected value of parent select2 listbox will be set to the parent_id of the data object before ajax call.
I've been using jQuery UI with Bootstrap and I seem to run into a problem that I haven't had before. I'm not sure what has changed; I've tried setting back different version of jQuery and I didn't update the jQuery UI in the meanwhile. So I'm not exactly sure what broke.
The error from the console when I click on any date in the datepicker returns:
Uncaught TypeError: Cannot set property 'currentDay' of undefined
The code is fairly straightforward as one would expect from a datepicker:
$(".datepicker").datepicker({
dateFormat: 'dd-mm-yy'
});
With the following HTML:
<input type="text" class="datepicker" />
Is this a bug that should be reported (since no other Google matches turn up) or is it something else I've missed?
I've found the solution. After a long time of debugging I figured out that there was a <div> that had the exact same ID, lying higher than the input field. Therefore the script took the first instance that contained the ID and picked the DIV instead of the input field.
I removed/renamed the DIV and it worked fine again.
The above jQuery datepicker error is generally caused by having a duplicate controls with the same ID, no matter whether you use id or another selector like css class or field name to instantiate it.
I solved this with create new ID for HTML DOM object. There is duplicated Id.
Try to add new ID for HTML DOM object.
I was having this error also. I found that elsewhere on the form I had some label 'for' attributes that did not match ids on the form inputs - seems like this might confuse datepicker too. Once I fixed those up, everything worked fine and the error went away. Take Andreas' advice (+1 for that!) and validate your forms - Chris Pederick's Web Developer Toolbar gives you an easy way to validate as you go.
put a selector.
<script> $("#formID #duplicatedId").datepicker({language: 'he'});
</script>
FormID: Id of the form that contains input.
duplicatedId: input element's Id.
In my case I was triggering the datepicker from a div against a hidden input field and getPos(a) was causing an undefined message on the variable "a". I experimented with moving the hidden input field outside of a div and that did the trick. Note that the input field was findable by jQuery no matter where it was, so that was not the problem - it was with positioning. Hope this helps someone else.
Might be two input box having same class without different id and for that you are trying for date picker. If it is there give two different id it will work.
I've ran into this problem too, and i was 100% sure i did not use duplicate id.
After some debugging i found out a reason - i was using DataTables mod, which duplicates contents of tfoot, thus creating exact copy of datepicker elements. And i had this datepicker inputs in tfoot row.
Fixed that issue with:
table.find("TFOOT").find("TR:first").remove();
Which is called AFTER table.DataTable(....)
This removed original, zero height row with all contents;
Select boxes converted to Select2, do not automatically integrate with unobtrusive validation mechanism in ASP.NET MVC framework.
For example, on a form which contains a regular select box (marked as required in model definition), submitting the form while no options have been selected in the select box, will cause the border and background of the select box to take a reddish color, and by using #Html.ValidationMessageFor, error messages, if any, can be displayed beside the box. However if the select box is converted to a Select2 component, then none of the mentioned features work any more. Even the validation error message will not show up.
It seems that the reason for even the validation error message not showing, is because Select2 changes the display CSS property of the original select box to none (display:none), and I guess the unobtrusive validation script does not bother generating error messages for invisible fields.
Any ideas / solutions?
This issue isn't really specific to Select2, but rather to the jQuery unobtrusive validator.
You can turn on validation for hidden fields as highlighted in this answer.
$.validator.setDefaults({
ignore: ''
});
As the comments noted, it didn't work inside an anonymous callback function within $(document).ready(). I had to put it at the top level.
I've run into similar issues with the select2 plugin. I don't know exactly which features you're using specifically, but in my experience, when you set an element as a select2 in the document.ready event, the plugin will change some of the element's attributes on the fly (inspect one of the elements after your page has finished loading - oftentimes you'll see the id and class properties are different than what you're seeing when you view source).
It's difficult to offer more without actually seeing the code, but here's a few ideas to get you started:
First off, obviously make sure you have the a link to your select2.css stylesheet in the header.
Then, since you're talking about form submissions, I'd recommend you examine whether or not you're getting a full postback or submitting via AJAX (if you're using jQueryMobile, you're using AJAX unless you override it in the jquerymobile.js file or set a data-ajax="false" in your form attributes). You can just look at the value returned by Request.IsAjaxRequest() for this. Obviously if you're submitting via ajax, you won't hit the document.ready event and the select2 won't initialize properly and you'd need to figure out a way around that. Try refreshing the page after the submit and see if it renders the select2 component.
Then I'd suggest examining the elements and see if they're not behaving like you'd expect because you're actually trying to work with classes that the plugin has reassigned at runtime. You can either just adjust your logic, or you can dig into the select2 code itself and change the behavior - it's actually fairly well-documented what the code is doing, and if you hop on the Google group for select2, Igor is usually pretty quick to follow up with questions.
like this
$('select').on('select2:select', function (evt){
$(this).blur();
});
$('body').on('change', 'select.m-select2', function () {
$(this).blur();
})
I am having a html dropdown
<select id="ExternalIp" onchange="externalIpchange()"></select>
I bind the data to dropdown through jquery and a I am passing data from controller which is working properly. I want to change the look and feel of the dropdown so I called a function
$("#ExternalIp").selectbox();
Now the look and feel of drop down is changed but it is not showing the data which I bind to dropdown. I am not getting what is the problem. Plz help
It appears as if the jQuery plugin you are using resets the values bound to the select list.
Look for a method provided within your jQuery plugin to rebind the data which you earlier attached with jQuery or style your element first and then try binding the values.
Cheers!!!