search is disabled with select2 library with bootstrap modal - javascript

I am trying to use select2 library with my page using php everything working perfect even is behaving well but problem is that i cannot search anything the search is by default disabled which was my main reason to use this library.
<https://jsfiddle.net/udp3qq7t/5/

I don't see any problem in your code. Here is the working demo of select two I extracted from your code.
<select class="scselect" name="cname">
<option>Select</option>
<option>Pakistan</option>
<option>Dubai</option>
<option>Bangladesh</option>
</select>
<script>
$(document).ready(function() {
$(".scselect").select2({});
});
</script>
JSfiddle
Make sure PHP code is not breaking your output

I have sort out the issue by Select2 doesn't work when embedded in a bootstrap modal
post.By (remove tabindex="-1" from modal)

Related

Select2 dropdown not shown properly in UI with struts tags

My selec2 dropdown is not shown properly.
Following is the code :
//Included select2 CSS file here
HTML code:
<div>
<tr>
<td><b><bean:message key="label.student.display" />:</b>
<html:select property="stuCode" styleId="rollno" onchange="getStuData(this);">
<html:option value=""><bean:message key="label.student.select" /></html:option>
<html:option value="ABC">ABC</html:option>
<html:option value="XYZ">XYZ</html:option>
<html:optionsCollection name="studentForm" property="StuList" label="label" value="value" />
</html:select>
</td>
</tr>
</div>
//included javascript select2 tag
</body>
JQuery code :
$(function() {
$("#rollno").select2();
});
Select2 is being included without any errors in console.But output is not as expected .
Please note : There are multiple forms in the HTML page.Some forms uses normal dropdown instead of Select2. Kindly help me to resolve this issue.Thanks in advance!
Give a width to the select in the struts tag and it should work. I faced the same issue before. I think thats the issue, I do not see anything else wrong.
You can also use width parameter of select2 and set a width. If you want to give percentage width in struts tag then while creating select2 do below
$("#rollno").select2({
width: 'resolve'
});
Also obviously you can also use css to set a width of the select in html.

Effects of external bootstrap library not applied on the JS generated html

I have a table which is being generated on the webpage after we click he button proceed <button class="btn btn-default" id="proceed">Proceed</button> the external library that i have included in order to make multi select boxes is bootstrap-select. The problem is that while the library is working normally when i include it in my webpage as :
<link rel="stylesheet" type="text/css" href="<?php echo base_url();?>/css/bootstrap-select.min.css" />
<script type="text/javascript" src="<?php echo base_url();?>/js/bootstrap-select.min.js"></script>
(using codeignitor as a framework) but it doesn't work on the mutiselets i have in my table which are being generated using Jquery as :
$('#proceed').click(function(){
makeTable();
});
and excerpt from the makeTable function (which is were the problem lies) is :
tbody = '<td><select id="fromstation" name="ratelist_party_base" class="selectpicker" multiple><option value="example">example</option></select></td>';$("#tab_logic").append(tbody);
tab_logic being the id of the desired place to append , while ill like to make a few things clear is the the code is working fine and the table is being generated, the only problem is that the mutiselect boxes in my code are not getting the library applied on them , and yes while i know there are better ways of rendering the table (like bootstrap modal) for example , but due to some development reasons that is not a viable option. so someone shed some wisdom . much appreciated
After appending your html you need to call the selectpicker() again. I hope it helps.
tbody = '<td><select id="fromstation" name="ratelist_party_base" class="selectpicker" multiple>'<option value="example">example</option></select></td>';
$("#tab_logic").append(tbody);
$("#fromstation").selectpicker();

How to set datepicker to textbox in fiddle?

Well i been facing issue to conStruct a fiddle where i can explain my problem to everyone clearly . Well i done most part and i needed small assistance on helping me setting up fiddle with datepicker binded to textbox in my fiddle
My fiddle : http://jsfiddle.net/JL26Z/2/
<script id="PhoneTemplate" type="text/html">
<div> // designing template for further use
Well depends on my this resolution i can post my real issue .
Regards
Updated your Fiddle:
In your fiddle, if you are using Knockout.js , other files can be added in the External Resources Tab. You need to add jQuery UI reference to it.
Add these lines to your code.
Html :
<input type="text" id="date" />
Js :
$(document).ready(function(){
$('#date').datepicker();
});
Note : This is just an answer to include datepicker in the fiddle.
For the whole functionality you should refer this answer - Link.

Uncaught TypeError: Object function (a,b){return new e.fn.init(a,b,h)} has no method 'widget'

I am using Jquery-ui-multiselect-widget for converting noramal select box to multiselect MultiSelect Widget.
Link for jquery UI pluggin : https://github.com/ehynds/jquery-ui-multiselect-widget
HTML :
<select id='noOFRows' multiple="multiple" > <option value="10">10<option value="20">20<option value="30">30<option value="40">40<option value="50"> 50 </option> </select>
JS code :
$(document).ready(function(){
$("#noOFRows").multiselect();
});
but getting this error.
Error in Jquery.multiselect.js:
Error in mail index.php
Looks like you are missing jQuery UI library because the widget framework is provided by jQuery UI
If you do not want any other widgets from jQuery UI, then go the the custom download option ans select only widget option and download, then add the jquery-ui-xxx.js file to the page after jQuery is included
There was one more case regarding the extensions you installed in your browsers. in some case the add blocker will be the root cause of these errors. In chrome you have "incognito window", make sure it working on that window.
The thing is, when you include jQuery UI library, you should make sure that this library is before the multiselect library.
Say:
<script src="JS/jquery-ui.min.js" type="text/javascript"></script>
<script src="JS/jquery.multiselect.js" type="text/javascript"></script>

controlling the width for a select box

i was trying to change the width of a particular optional value under <select> attribute, something like this. But i am getting troubled as in IE the select box along with the option value gets expanded. Is there any simple way to make the <option> only to expand and not the <select> box.. mainly in IE ....
<select width="123" style="width: 123px;">...</select>
Seems to be quite compatible solution working with all newer browsers.
This can be done using the jQuery plugin found at
http://www.jainaewen.com/files/javascript/jquery/ie-select-style/#demo
The plugin is very simple to use. Here's a breakdown of some full working code.
HTML
<select id="test" >
<option>choose on</option>
<option>aaaaaaaaaaaaaaaaaaaaaaa</option>
<option>bbbbbbbbbbbbbbbbbbbbbbb</option>
<option>ccccccccccccccccccccccc</option>
<option>ddddddddddddddddddddddd</option>
</select>
CSS
#test{
width:100px;
border:1px solid red;
}
jQuery
Don't forget to include the jQuery Js file and this plugins' Js file.
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://files.jainaewen.com/files/javascript/jquery/ie-select-style/jquery.ie-select-style.min.js"></script>
Then put the following right after:
<script type="text/javascript">
$('#test').ieSelectStyle();
</script>
All this should go before the closing </body> tag
Check working example at http://jsfiddle.net/7Vv8u/2/
Styling <select> items is a bit of a problem since there is no cross-browser solution without using JavaScript - since each browser handles rendering of the form controls differently.
I would suggest using an <ul> element and applying the functionality/design to act more like a <select> element - using JavaScript
this article may help you with this

Categories