Choosen plugin not working with dynamic created rows in html table

JavaScript
1

Hi! I am trying to filter drop down list with the help of choosen plug in, its working fine for first row. But when I clone or dynamically create more row, then drop down list become inactive and and displaying selected value of first row in all new dynamic rows. Below is the my code . I needed guidance to resolve this issue

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Medicine Re-Location Form</title> 

	
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">      
    
  
   

  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
     <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.min.css">
  
</head>
  <body>




<div class="container">
  <div class="card">
    <h3 div class="card-header" style="background-color: #3fbbc0;">Request Form</h3>
    <div class="card-body">
	<form method="POST" action="invoice.php">
            <div class="card-body">              
                            
                            
                        </div>         






  <table class="table table-bordered">
                    <thead class="table-success" style="background-color: #3fbbc0;">
                      <tr>
                        
                        <th width="15%"><center>Product</th>                       
			<th width="10%"><center>Qty (No)</th>                    
					
			<th width="20%"><center>Remarks</th>
			<th width="5%"></th>

                                               
                         <button type="button" class="btn btn-sm btn-success" onclick="BtnAdd()">Add Item</button>                         
                        </th>
</tr>
                    </thead>
                    <tbody id="TBody">
                      <tr id="TRow" >
   <div class="col-lg-4"><div class="form-group">
 <td><Select  class="scode form-control text-end" name="scode[]" id = "scode"  class="form-control"  required onchange="GetDetail(this.closest('tr'))">
<option value="">Select Product</option>
	<?php
	include('db.php');
	$sql = mysqli_query($con,"SELECT * FROM procd2");
	while($row=mysqli_fetch_array($sql))
	{
	echo '<option value="'.$row['pro1'].'">'.$row['pro1'].'</option>';
	} ?></select>



</td>

       
      	<td><input type="text" class="qty form-control text-end" name="qty[]" id="ccc" pattern="\d+"></td>
			
     
      
           <td><input type="text" class="form-control text-end" name="remarks3[]"  id="zzz" ></td>
		<td class="NoPrint"><button type="button" class="btn btn-success"  style="line-height: 1;" onclick="BtnDel(this)">x</button></td>
			
                      </tr>   </tbody> </table>


<script>

jQuery('.scode').chosen();
</script>


 <div class="col-lg-4"> <div class="form-group"><center>
		<input type="submit" name="submit" id="submit" value="Submit"  class="btn btn-success submit_btn invoice-save-btm">	
		
	

</form>

  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
 <script src="https://code.jquery.com/ui/1.12.1/jquery.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script type="text/javascript" src="frontend-script.js"></script>
 


   
 </body>
</html>

<script type="text/javascript">

function GetPrint()
{
    /*For Print*/
    window.print();
}

function BtnAdd()
{
    /*Add Button*/
    var v = $("#TRow").clone().appendTo("#TBody") ;
    $(v).find("input").val('');
    $(v).find("input").autocomplete({
        source: 'backend-script.php'  
    });
    $(v).removeClass("d-none");
    $(v).find("th").first().html($('#TBody tr').length - 1);
}

function BtnDel(v)
{
    /*Delete Button*/
       $(v).parent().parent().remove(); 
       GetTotal();

        $("#TBody").find("tr").each(
        function(index)
        {
           $(this).find("th").first().html(index);
        }

       );
}
2

…so…

$(v).find("select").chosen();

?

3

Because you are cloning a select element that has .chosen attached to it, and chosen has some initial condition problems, the simplest solution (I saw some more complicated work-arounds that involved adding and removing css classes, then removing .chosen from the element, before attaching .chosen to the cloned element) is to remove/destroy the chosen attachments, clone the element, than reattach chosen to the select elements.

Change the initial .chosen() method call to the following so that it has a consistent width inside its container -

$('.scode').chosen({width: '100%'});

Add the following lines around the .clone() line -

// destroy the .chosen attached to the elements
$('.scode').chosen('destroy');

var v = $('#TRow').clone().appendTo('#TBody');

// remove the duplicated id
$(v).removeAttr('id');

// attach .chosen to the elements
$('.scode').chosen({width: '100%'});

Note: you cannot use the required attribute with .chosen, since the actual select menu is hidden and you cannot require a hidden field to have a value.

4

Hi sir thanks for your answer! I added lines as per your suggestion but still not working!

function BtnAdd()
{
    /*Add Button*/
    var v = $("#TRow").clone().appendTo("#TBody") ;
    $('.scode').chosen('destroy');
    var v = $('#TRow').clone().appendTo('#TBody');
    $(v).removeAttr('id');
    $('.scode').chosen({width: '100%'});
    $(v).find("input").val('');
    $(v).find("input").autocomplete({
        source: 'backend-script.php'  
    });
    $(v).removeClass("d-none");
    $(v).find("th").first().html($('#TBody tr').length - 1);
}
5

first I was using it as imput field, later I decided to use drop down list for values!

7

If you check the browser’s developer tools, console tab, you will find an error about .chosen() not being a function. This is because you are loading an old version of jquery, jquery-1.12.4.js, near the bottom of the page. The newer version of jquery that you are loading near the top of the page, jquery-3.7.1.min.js, is the only instance you should be loading on the page. You are also trying to load a non-existent, …/ui/1.12.1/jquery.js file, near the bottom of the page.

You should also validate the resulting web pages at validator.w3.org

1 Like
9

Thanks alot respected sir!
now its working fine!

10

hi @mabismad sir! thanks alot , its solve the issue! But choosen plugin change the style of the drop down field as shown in the below pic. Is there anyway by which I can impose my default style on this drop down field, so that i can look same as qty and remarks

Capture
Capture847×316 15.4 KB

11

You can play around with the css for the plugin although its a little tricky,. This should get you close.

    .chosen-container {
      display: block;
      width: 100% !important;
      min-height: calc(1.5em + .75rem + 2px);
      background: none;
      box-shadow: none;
    }

    .chosen-container .chosen-single {
      background: none;
      box-shadow: none;
      display: block;
      width: 100% !important;
      height: calc(1.5em + .75rem + 2px);
      padding: .375rem .75rem;
      font-size: 1rem;
      font-weight: 400;
      line-height: 1.5;
      color: #495057;
      background-color: #fff;
      background-clip: padding-box;
      border: 1px solid #ced4da;
      border-radius: .25rem;
      transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    }

    .chosen-container-single .chosen-single div b {
      background-position: 0 10px;
    }
1 Like
13

its done! thanks alot sir

1 Like