How to run multiple jQuery choosen() on the same form using clone() -
i want clone choosen object when user clicks button. far can manage copy fields/select input box, new elements added / cloned, dossent react on choosen() call;
i have added code 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 trigger clone:
<button class="add_field_button btn btn-warning" data-fields="0" name="add">add more selectfields , use choosen plugin</button>
the jquery script handles cloing of select element, , trigger 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>
you need "destroy" chosen before cloning it. after cloning, can rebuild chosen. here 1 way, if have correctly understood 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 , use 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'); } }
Comments
Post a Comment