CODEWITHSUNDEEP
javascriptjqueryjquery-chosen
Phil Motto
Phil Motto

Reputation: 131

Adding the Chosen JQuery plugin to my HTML

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>

Upvotes: 2

Views: 1901

Answers (2)

tomb
tomb

Reputation: 1436

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 .

Upvotes: 0

Obsidian Age
Obsidian Age

Reputation: 42304

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>

Upvotes: 4

Related Questions