CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstraprerender
designscoop
designscoop

Reputation: 69

Rerender Dynamic Elements when using jQuery Plugin Selectize and Bootstrap-Switch

I am new to jQuery so please go easy, I have a form that will represent an Advanced Search. Users will be able to add rows to refine their specific search.

Each row has 3 elements: A Checkbox & 2 x Select boxes.
As can be seen in the fiddle I am using jquery to clone the row and place the cloned row after the last row.

Everything is working fine except visually I would like the checkbox to use Bootstrap-Switch http://www.bootstrap-switch.org/

And the select boxes to use Selectize https://github.com/brianreavis/selectize.js

Now, when I clone the row with these plugins not active, everything works. I have NO idea how to re-render or re activate them once a new row is inserted.

Is this something that is plugin specific? Or kind of universal to jquery? I have read HEAPS of answers on here about similar things but I cannot seem to get it right.

Here is the jquery snippet:

$adSearchForm = $('#adSearchForm');
$adSearchForm.on('click', 'button, input, select, option', function (event) {  
console.log("Button Clicked", event)
});

$('#addSearchRow').click(function(event){
    $('[data-content=adSearch-3]:first').clone().insertAfter('[data-content=adSearch-3]:last');
//  $('.searchByField,.searchOperator').selectize({refreshItems: true});
//  $('[data-toggle=switch]').bootstrapSwitch({refreshItems: true});
});

Here is the fiddle, hope its ok. http://jsfiddle.net/CkVQr/6/

Thankyou very much for your help. Cheers

Upvotes: 1

Views: 1970

Answers (1)

Robert Koritnik
Robert Koritnik

Reputation: 105059

Plugins change your HTML

There are two major problems you may not be fully aware of with your code:

  1. Whenever you do a .clone() it merely deep clones your DOM element subtree, but not any event handlers bound to cloned elements.
  2. Your .selectize() plugin changes HTML of your form quite considerably, converting input elements to other things. So whenever you clone your already converted select filter row, and subsequently want to run .selectize() on it again, this particular plugin won't find any suitable input elements to convert. Hence it won't work. Everything will just look as it should but won't work.

What can be done?

The main idea is that whenever you clone your search filter row, you have to clone your original HTML and not after it was converted using your plugins.

HTML Templates to the rescue

One of the possibilities is to change you page (and functionality) a bit and put your search filter row in a template and always use that. When you create your first row, you should read the template (and cache it) and add+convert it on your page. When you'd add an additional row, just use the same cached template and add+convert it again.

HTML template

<script id="filterRow" type="text/x-template">
    <!-- Your filter rown HTML goes in here -->
</script>

Some Javascript

var cachedTemplate = cachedTemplate || $("#filterRow").html();

...

$('#addSearchRow').click(function(evt) {
    var newRow = cachedTemplate.clone(); // clone for reusability
    newRow.insertAfter('[data-content=adSearch-3]:last');
    newRow.selectize();
    ...
});

Upvotes: 1

Related Questions