Jquery chosen plugin doesn't Work in ajax response

Question

I have two select box. and I want to apply chosen plugin in both select box.

When No-1 Select box change then No-2 select box generate from AJAX response.

Chosen Plugin in No-1 work perfectly. But When No-2 select box generate from ajax then chosen plugin doesn't work in No-2 select box.

main.php

<tr>
   <td>Select Location</td>
   <td>
      <select id="issue_type" name="issue_type" class="chosen-select">
         <option value="" disabled="disabled" selected="selected">Select Location</option>
         <option value="17">RM Store</option>
         <option value="17">PM Store</option>
         <option value="17">FG Store</option>
      </select>
   </td>
</tr>           
<tr id="tr_product" name="product">
   <td>Select Product</td>
   <td></td>
</tr>

JS code for ajax

$('#location').change(function(){
   if(this.value){
      $('#td_avail_qty').html('');
      $.ajax({
         type:"GET",
         url:"mat_issue.php",
         data:{action:"ajax",sub_action:"location",location:this.value}
      }).done(function(data){
         $('tr#tr_product').show().children().eq(1).html(data);
      });
   }
});

mat_issue.php

$product_str = '<select id="product" name="product" class="chosen-select">
                    <option value="" disabled="disabled" selected="selected">Select Product</option>';
$location = $req['location'];
$sql_product =  "SELECT l.`loccode`, l.`stockid`, l.`quantity`,s.description FROM `locstock` l INNER JOIN stockmaster s ON l.stockid = s.stockid WHERE l.`loccode` = '$location'  AND l.`quantity` > 0";

if($query_fg = DB_query($sql_product,$db)):
   while($data_product = DB_fetch_assoc($query_fg)):
      $product_str .= '<option title="Available Quantity '.$data_product['quantity'].'" value="'.$data_product['stockid'].'">'.$data_product['description'].'</option>';
   endwhile;
endif;
$product_str .= '</select>';
echo $product_str;

No-2 Select box generate from ajax successfully. But chosen plugin doesn't work in this select box.

I use this code for chosen plugin

var config = {
      '.chosen-select'           : {},
      '.chosen-select-deselect'  : {allow_single_deselect:true},
      '.chosen-select-no-single' : {disable_search_threshold:10},
      '.chosen-select-no-results': {no_results_text:'Oops, nothing found!'},
      '.chosen-select-width'     : {width:"95%"}
}
for (var selector in config) {
      $(selector).chosen(config[selector]);
}

And I use .chosen-select class in my select box

Answer 1

pass your chosen jquery function in your ajax success function...

may be this can help you out..

$('#location').change(function(){
   if(this.value){
      $('#td_avail_qty').html('');
      $.ajax({
         type:"GET",
         url:"mat_issue.php",
         data:{action:"ajax",sub_action:"location",location:this.value}
      }).done(function(data){
         $('tr#tr_product').show().children().eq(1).html(data);
         $("#product").chosen({max_selected_options: 5}); //your chosen code for select tag
      });
   }
});

let me know if you face any other problem....

Answer 2

You need to load chosen after you have finished loading data in the select tag, Look at my snippet below

<script>      
 $('#subject_id').on('change',function(e){
    var subject_id = e.target.value;

    $.get('/ajax_subject_finder/'+subject_id,function(data){

      $('#subject_paper_id').empty();
      $('#subject_paper_id').append("<option></option>");
      $.each(data,function(index,subObject){

        $('#subject_paper_id').append("<option value="+subObject.id+">"+subObject.number+"</option>");

      });

      $('#subject_paper_id').chosen();
    });

});