Jquery clone and Chosen initialize issue after first row

Question

I want to create Add more rows in form..So users can add multiple data once.. To clone rows used this plugin

Clone-section-of-form-using-jQuery

Everything working fine.. When i use Jquery Chosen plugin for dropdown.. It's only Working for first row..

I guess need to initialize chosen after every row created.. But I'm unable to edit Clone-section-of-form-using-jQuery file to achieve that result..

I read all related post.. Those most of using old chosen plugin.. now days chosen using similar code show on below

 <select data-placeholder="Choose a Country..." class="chosen-select" style="width:350px;" tabindex="2">
        <option value=""></option>
        <option value="United States">United States</option>
      </select>

        <script type="text/javascript">
          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]);
            }
         </script>

So i don't know how to apply above code to clone form plugin :(

I create sample combined clone form plugin and Chosen..

Download Link

Can any one help me

Thanks

Answer 1

Ok, I found your problem. I've changed the code thus: I've encapsulated the initialization into a function

function initSelects(baseSelector) {
    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, baseSelector).chosen(config[selector]);
    }
}
initSelects('body');

then I've changed your clone code like this:

    newElem = $('#entry' + num).clone().attr('id', 'entry' + newNum).fadeIn('slow'); // create the new element via clone(), and manipulate it's ID using newNum value
    $('.chosen-container',newElem).remove();
    newElem.find("input:text").val("").end()
    newElem.find("input[type=date]").val("").end()
    newElem.appendTo('.clonedInput:last');
    $('select.chosen-select',newElem).show();
    initSelects(newElem);

The important parts are:

• remove the cloned Chosen from the new element
• show (unhide) the select
• reinitialize the select

Also, although it works as it is as well, I think you want to use newElem.insertAfter, rather than newElem.appendTo in your clone code. I think it declares your intention better.