sdfgg45 February 2016

How to run multiple jQuery choosen() on the same form using clone()

I want to clone a choosen object when user clicks a button. So far i can manage to copy up the fields/select input box, but the new elements that are added / cloned, dossent react on the choosen() call;

I have added my code so far:

The html code:

<select data-placeholder="Choose something" class="classname" name="somthinghere[]">
     <option value="123">Somthing</option>
     <option value="124">Somthing again</option>
</select>

Button to trigger clone:

<button class="add_field_button btn btn-warning" data-fields="0" name="add">Add more selectfields and use the choosen plugin</button>   

The jQuery script that handles the cloing of select element, and trigger the choosen object.

<script>                        
    $(document).ready(function() {
        $(".add_field_button").click(function(e){ 
            e.preventDefault();

            var add_button = $(this);
            var fieldset   = add_button.closest('.fieldset-clone');
            var fieldset_clone;
            var fieldset_content;

            fieldset_clone = add_button
                            .closest('.fieldset-clone')
                            .find('.fieldset-content')
                            .eq(0)
                            .clone();

            fieldset_content = $('<div>')
                .addClass('remove-button')
                .append(fieldset_clone.children());

            add_button.before(fieldset_content);
            add_remove_btn(fieldset_content);

            $('.ny-matrett').chosen();
        });
    });
</script>

Answers


Pierre Granger February 2016

You need to "destroy" your chosen before cloning it. After cloning, you can rebuild your chosen. Here is one way, if i have correctly understood the question :

https://jsfiddle.net/xgqbfth7/

HTML part :

<div id="home">

  <fieldset>
    <legend>#1
    </legend>
    <div class="fieldset-content">
      <div>
        <select data-placeholder="Choose something" class="classname" name="somthinghere[]">
          <option value="123">Somthing</option>
          <option value="124">Somthing again</option>
        </select>
      </div>

      <button class="add_field_button btn btn-warning" data-fields="0" name="add">Add more selectfields and use the choosen plugin</button>
    </div>
  </fieldset>

</div>

JS part :

var x = 1;

 $(document).ready(function() {

   jQuery('#home select').chosen();
   jQuery(document).on('click', '.add_field_button', function(e) {
     makeChosen(false);
     x++;
     e.preventDefault();
     var add_button = $(this);
     var fieldset = add_button.closest('fieldset');
     var newFieldset = fieldset.clone(true, false).appendTo('#home');
     newFieldset.find('select').append('<option value="">Test ' + x + '</option>');
     newFieldset.find('legend').html(x);
     makeChosen(true);
   });
 });

 function makeChosen(status) {
   if (status) jQuery('#home select').chosen();
   else {
     jQuery('#home select').chosen('destroy');
   }
 }

Post Status

Asked in February 2016
Viewed 2,130 times
Voted 13
Answered 1 times

Search




Leave an answer