CODEWITHSUNDEEP
jqueryjquery-chosen
babacan
babacan

Reputation: 25

Chosen plugin is not working when i add dynamically selectbox

When I dynamically add a row the Chosen plugin doesn't work on new selectboxes. How can I add the Chosen functionality to new selectboxes?

var sayac = 6;
$(document).ready(function(){
$(document).on('click', '.addd', function(){
  var html = '';
  sayac += 1;
  html += '<tr>';
  html += '<td><select name="kagit_tip[]" class="select form-control inst_amount' + sayac + '"><option value="">Kağıt Tipi</option><?php echo fill_unit_select_box($connect); ?></select></td>';
  html += '<td><select name="kagit_ebat[]" class="select form-control inst_amount' + sayac + '"><option value="">Kağıt Ebadı</option><?php echo kagit_ebat_selectbox($connect); ?></select></td>';
  html += '<td><input type="text" name="tabaka[]" class="form-control item_quantity inst_amount' + sayac + '" " /></td>';
  html += '<td><input type="text" name="kgfiyati[]" class="form-control item_quantity inst_amount' + sayac + '" " /></td>';
  html += '<td><button type="button" name="remove" class="btn btn-danger btn-sm remove"><span class="glyphicon glyphicon-minus"></span></button></td></tr>';  
  $('#item_table').append(html);
});

<div class="col-md-12">
  <form method="post" id="insert_form">
    <div class="table-repsonsive">
      <span id="error"></span>
      <table class="table table-bordered" id="item_table">
        <tr>
          <th>Ek Kağıt</th>
          <th>Ebat</th>
          <th>Tabaka</th>
          <th>Kg Fiyatı</th>
          <th>Ek Kağıt Tutar</th>
          <th><button type="button" name="addd" class="btn btn-success btn-sm addd"><span class="glyphicon glyphicon-plus"></span></button></th>
        </tr>
      </table>
    </div>
  </form>
</div>

Upvotes: 1

Views: 554

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337560

Presumably you're calling chosen() when the page loads, hence it only works on the select elements in the DOM at that point.

To fix your issue you need to call chosen() again on the new elements you dynamically added, something like this:

var sayac = 6;

$(document).ready(function() {
  $(document).on('click', '.addd', function() {
    sayac++;

    var html = '';
    html += '<tr>';
    html += '<td><select name="kagit_tip[]" class="select form-control inst_amount' + sayac + '"><option value="">Kağıt Tipi</option><?php echo fill_unit_select_box($connect); ?></select></td>';
    html += '<td><select name="kagit_ebat[]" class="select form-control inst_amount' + sayac + '"><option value="">Kağıt Ebadı</option><?php echo kagit_ebat_selectbox($connect); ?></select></td>';
    html += '<td><input type="text" name="tabaka[]" class="form-control item_quantity inst_amount' + sayac + '" " /></td>';
    html += '<td><input type="text" name="kgfiyati[]" class="form-control item_quantity inst_amount' + sayac + '" " /></td>';
    html += '<td><button type="button" name="remove" class="btn btn-danger btn-sm remove"><span class="glyphicon glyphicon-minus"></span></button></td></tr>';

    var $row = $(html).appendTo('#item_table');        
    $row.find('select').chosen({
      // your options here...
    });
  });
});

Also note that incremental id/class attributes are an anti-pattern which I would suggest you remove.

Upvotes: 1

Related Questions