Adding the Chosen JQuery plugin to my HTML
Question
I attempted to integrate Chosen's plugin in to my HTML for increased drop down functionality. I added a link to the Chosen style sheet, JQuery, and Chosen's JQuery. Additionally, I created a class through JQuery to include in my tags. Any ideas as to why it is not working?
Thanks so much
<!DOCTYPE html> <html> <head> <title>Experiment</title> <link type="text/css" rel="stylesheet" href="chosen.min.css"> <script type="text/text/javascript" src="jquery-3.3.1.min.js"></script> <script type="text/text/javascript" src="chosen.jquery.min.js"></script> <script type="text/javascript"> $(function() { $("chosen-select").chosen(); }); </script> <style type="text/css"> </style> <body> <table> <tr> <td> <select class="chosen-select"> <option value="" disabled selected>Title</option> <option value="clean">Clean</option> <option value="salvage">Salvage</option> <option value="rebuilt">Rebuilt</option> </select> </td> <td> <select class="chosen-select"> <option value="" disabled selected>Title Status</option> <option value="in hand">In Hand</option> <option value="lien">Lien</option> <option value="missing">Missing</option> </select> </td> <td> <select class="chosen-select"> <option value="" disabled selected>Title Stat</option> <option value="in hand">In Hand</option> <option value="lien">Lien</option> <option value="missing">Missing</option> <option value="ralph jr.">Missing</option> <option value="ralph">Missing</option> </select> </td> </tr> </table> </body> </html>
2 answers
solution1
2 2018-07-05 02:57:42
The problem is entirely down to the fact that your <script> types are text/text/javascript . Change them to text/javascript and the scripts will work as expected.
Also note that you're missing your closing </head> in your above code.
I've fixed this up, and used absolute script references in the following:
<!DOCTYPE html> <html> <head> <title>Experiment</title> <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css"> <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script> <script type="text/javascript"> $(function() { $("chosen-select").chosen(); }); </script> <style type="text/css"> </style> </head> <body> <table> <tr> <td> <select class="chosen-select"> <option value="" disabled selected>Title</option> <option value="clean">Clean</option> <option value="salvage">Salvage</option> <option value="rebuilt">Rebuilt</option> </select> </td> <td> <select class="chosen-select"> <option value="" disabled selected>Title Status</option> <option value="in hand">In Hand</option> <option value="lien">Lien</option> <option value="missing">Missing</option> </select> </td> <td> <select class="chosen-select"> <option value="" disabled selected>Title Stat</option> <option value="in hand">In Hand</option> <option value="lien">Lien</option> <option value="missing">Missing</option> <option value="ralph jr.">Missing</option> <option value="ralph">Missing</option> </select> </td> </tr> </table> </body> </html>
solution2
0 2019-04-04 13:17:32
I wrestled with this Gem and finally got it working (thanks to a suggestion from Mezbah) with the following script at the top of the view page:
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css">
<script>
$( document ).ready(function() {
$('.chosen-select').chosen({
allow_single_deselect: true,
no_results_text: 'No results matched',
width: '80%'
})
});
</script>
then in the view:
<%= form.select :school_ids, School.where(state: "IL").all.map { |k| [k.name_city, k.id] },
{ include_blank: true, label: "Select Schools"},
{ :multiple => true, class: 'chosen-select', :data => {:placeholder => "Select School(s)"}} %>
Also, here is my application.js:
//= require jquery3
//= require popper
//= require bootstrap
//= require rails-ujs
//= require chosen-jquery
//= require_tree .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.