Can't get why Chosen plugin isn't working - ruby-on-rails

I'm using RubyOnRails, so all my stylesheets should be including automatically.
I want to make my dropdown lists more user friendly, and I chose Chsen plugin.
Here is my code of page:
<link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/chosen.css?body=1" media="all" rel="stylesheet" type="text/css" />
<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/chosen.jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/chosen.jquery.min.js?body=1" type="text/javascript"></script>
<script src="/assets/static_pages.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>
So javascripts and stylesheets are included, yes ?
My HTML code(from exmple):
<select tabindex="1" style="width:350px;" data-placeholder="Choose a Country">
<option value=""></option>
<option value="United States">United States</option>
<option value="United Kingdom">United Kingdom</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Albania">Albania</option>
</select>
And in my application.js file:
$(document).ready(function(){
$(".chzn-select").chosen();
});
No errors in Google Console, but in my page it is showing as default select list. Why ?

You need to add a "chzn-select" class to your select tag. Your js code is applying the chosen plugin to any element it finds that uses that class. Here is what your select tag should look like:
<select class="chzn-select" tabindex="1" style="width:350px;" data-placeholder="Choose a Country">
<option value=""></option>
<option value="United States">United States</option>
<option value="United Kingdom">United Kingdom</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Albania">Albania</option>
</select>

On your select tag you need to add class="chzn-select" to actually enable chosen.

Related

How customize the position of select dropdown

In my website, i'm using jquery plugin select2. The plugins works for me but i have got one problem in my webpage. The dropdown element is not positioned correctly
select dropdown with select2
Here is my js code
$('.select-options').select2({
multiple: true,
selectOnClose: false,
closeOnSelect: true
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.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>
<select class="select-options" name="comp[]" multiple>
<option value="1">Comp 1</option>
<option value="2">Comp 2</option>
<option value="3">Comp 3</option>
<option value="4">Comp 4</option>
<option value="5">Comp 5</option>
<option value="6">Comp 6</option>
<option value="7">Comp 7</option>
<option value="8">Comp 8</option>
</select>
for the positioning of the element, it's an option of select2 (version 4.1.0) or a css rule ? How customize the positionning of element dropdown ?
Thanks so lot

How to set the values selected in select2 list box in MVC application when i want edit the data

#Html.ListBox("RiskFactors", null, new { #class = "form-control select2" })
<script>
$('#RiskFactors').select2({
placeholder: 'Select Risk Factors',
closeOnSelect: false
});
</script>
Hi I hope I can communicate the information correctly and I apologize for the language errors
Please check the working example here you need to replace this code with your functionality.
var values = "1,3";
$('#example').val(values.split(','));
$('#example').select2().trigger('chnage');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" integrity="sha256-FdatTf20PQr/rWg+cAKfl6j4/IY3oohFAJ7gVC3M34E=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js" integrity="sha256-d/edyIFneUo3SvmaFnf96hRcVBcyaOy96iMkPez1kaU=" crossorigin="anonymous"></script>
<select id="example" multiple="multiple" style="width: 300px">
<option value="1">A</option>
<option value="2">Youvalue</option>
<option value="3">Yourvalue </option>
</select>

jQuery Select2 is not displaying

I am trying to use select2. I added CSS & JS of select2 using below code.
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.11/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.11/js/select2.min.js"></script>
I am using below JS Code in my HTML page.
<script>
$(document).ready(function() {
$('.js-example-basic-multiple').select2({
placeholder: 'Select an option'
});
});
</script>
My HTML is like below
<select class="js-example-basic-multiple" multiple="multiple">
<option value="example1">example1</option>
<option value="example2">example2</option>
<option value="example3">example3</option>
<option value="example4">example4</option>
<option value="example5">example5</option>
<option value="example6">example6</option>
</select>
I am using below jQuery link
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
But I am getting output like below
I have fixed your code please check it.
$('#example').select2({
placeholder: 'Select an option'
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://rawgit.com/select2/select2/master/dist/js/select2.js"></script>
<link href="https://rawgit.com/select2/select2/master/dist/css/select2.min.css" rel="stylesheet" />
<select id="example" multiple="multiple" style="width: 300px">
<option value="example1">example1</option>
<option value="example2">example2</option>
<option value="example3">example3</option>
<option value="example4">example4</option>
<option value="example5">example5</option>
<option value="example6">example6</option>
</select>

Have data-live-search interpret the same as normal space ( )

I am using data-live-search with bootstrap-select and am running into a problem where the blank spaces used in my options are not interpreted the same as a normal space. I would like to have replaced by a normal blank space. Was wondering if there is any easy way to fix this? Here is a JSFiddle of the problem. Code is below as well (per SO rules).
<body>
<div class="container" style="width: auto;">
<select class="selectpicker" title='Choose one of the following...' data-live-search="true">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
</body>
I think there is no option o configuration to achieve your goal.
Probably the simplest way to do that is using jQuery:
$(document).ready(function() {
$(".selectpicker option").each(function(index) {
var txt = $(this).html().replace(" ", " ");
$(this).html(txt);
console.log(index + ": ", this);
});
$('.selectpicker').selectpicker('refresh');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<label>Select live search</label>
<select class="selectpicker" title='Choose one of the following...' data-live-search="true">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
</select>

Jquery Mobile doesn't change URL when new page loads

On submit my form variables are written to the database and the page changes to the next page BUT the address bar doesn't change. ie it still says mobile2.asp even though the view is mobile3.asp. What am I missing?
<head>
<title>mysite</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="include/js/jquery.mobile-1.2.0.min.css" />
<link rel="stylesheet" href="css/themes/mycss.css" />
<script src="include/js/jquery.js"></script>
<script src="include/js/jquery.mobile-1.2.0.js"></script>
<%
dim EN
EN = xss_Clean(Request.Form("EN"))
If Request.ServerVariables("REQUEST_METHOD")= "POST" Then
write_element "EN", EN
response.redirect "mobile3.asp"
End if
%>
</head>
<div data-role="content">
<form action="mobile2.asp" method="post">
<div id="entries" class="list" data-theme="a">
<label for="EN" class="select"><h1 class="header">Number required</h1></label>
<select name="EN">
<option value="1">1</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option></select>
</div>
<button type="submit" data-theme="b" name="submit" value="submit-value" class="ui-btn-hidden" aria-disabled="false" data-ajax="false">Proceed</button>
</form>
</div>
Maybe the closing quote on the redirect?
response.redirect "mobile3.asp"

Resources