CODEWITHSUNDEEP
javascriptjqueryjquery-chosen
Stephen
Stephen

Reputation: 717

Chosen JS with clone(true,true), rerender on append

I am using the Chosen JS jQuery plugin & I am trying to get it to rerender every time a cloned element (using true, ture - this is because I need to copy the on click events) is appended to the dom.

This is my code:

    var container = jQuery(self.options.parent_class + ' tbody tr:first-child'),
    container_clone = container.clone(true,true);

    var elem = container_clone.find('select');
    elem.chosen('destroy');
    elem.chosen();

    return container_clone;

Here it is on fiddle: http://jsfiddle.net/udj7t/1/

Upvotes: 0

Views: 1386

Answers (2)

P-Rick Stephens
P-Rick Stephens

Reputation: 245

For those interested in a possible solution that will work with clone(true, true), as per the OP's actual question I found that doing the following worked for me. I also had multiple selects in my cloned row so I needed to use the each() method. This could easily be adapted though.

// Look through the cloned row and find each select
$clone.find('select').each(function (){

    // Because chosen is a bitch with deep cloned events 
    // We need to make another internal clone with no events
    $clonedChosen = $(this).clone().off();

    // Now we can delete the original select box
    // AND delete the chosen elements and events
    // THEN add the new raw select box back to the TD
    $parentTd = $(this).closest('td');
    $parentTd.empty().append($($clonedChosen).show());

    // Finally, we can initialize this new chosen select
    $parentTd.find('select').chosen();
}

Upvotes: 0

Rohan Kumar
Rohan Kumar

Reputation: 40639

Try this,

$(document).ready(function(){
    $('select').chosen();
    $('a#clone_me').on('click', function(){
        var $clone = jQuery('#toClone select:first').clone();
        $clone.removeAttr('style');
        //$clone.chosen('destroy');
        jQuery('#toClone').append($clone);
        jQuery('#toClone select:last').chosen();
    });
});

Demo

Upvotes: 3

Related Questions