Select box is not usable on dynamically load

[fumeeptc]

Hello everyone!

I have code that calculates total values between inputs and also calculates total value. … That part works just fine! But when i add line dynamically second row select box (unit of measurement) is not usable.

Example: http://jsfiddle.net/u6g2cnex/ (i use SEMANTIC UI framework)

Anyone have ideas how to solve this?

[fumeeptc]

For now i just removed class from select box and add simple css style and it works. … Still i would like it to work with that class also so if anyone have any ideas i m ready to try!

[m3g4p0p]

Hi @fumeeptc, you’ll have to initialize that “chosen” widget for the new row too; but for that to work you need a “fresh” row as a template, not clone one that already has it initialized. For example:

<script type="text/template" id="row-template">
  <tr>
    <td>
      <div class="a_control">
        <div class="side-by-side clearfix">
          <select name="additional_costs_uom[]" class="chosen-select" style="display: none;">
            <option value="">↓ unit of measurement</option>
            <option value="KG">KG</option>
            <option value="T">T</option>
            <option value="L">L</option>
          </select>
        </div>
      </div>
    </td>
    <td>
      <div class="a_control">
        <div class="input-icon right">
          <input type="text" class="a_count" name="additional_count[]" style="height: 20px !important;">
        </div>
      </div>
    </td>
    <td>
      <div class="a_control">
        <div class="input-icon right">
          <input type="text" class="a_rate" name="additional_rate[]" style="height: 20px !important;">
        </div>
      </div>
    </td>
    <td>
      <div class="a_control">
        <div class="input-icon right">
          <input type="text" class="a_costs" name="additional_costs[]" style="height: 20px !important;">
        </div>
      </div>
    </td>
    <td>
      <span class="remove_additional_row"><i class="red remove icon"></i></span>
    </td>
  </tr>
</script>

And in your JS:

var rowTemplate = $('#row-template').text()

$('#add_additional_info').on('click', function() {
  var $newRow = $(rowTemplate)

  $newRow.find('.chosen-select').chosen({
    allow_single_deselect: true, 
    disable_search_threshold: 3, 
    width: "100%", 
    search_contains: true
  })

  $('.additional_table tbody').append($newRow)
})