ajax-chosen adding dynamic elements

Question

I need help with my code:

I am dynamically adding elements, creating new elements need these functions have a plugin called CHOSEN but to create them after creation does not work I tried to rerun the function to add the properties of Chosen to new elements.

ajaxchosen = function () {
    $("select").each(function(index, element){
        $(element).ajaxChosen(
                   { method: "GET", 
                     url: $(element).attr("source"),
                     dataType: "json"
                   }, function(data){ 
                       var terms; 
                       terms = {};
                       $.each(data, function (i, val) {
                           return terms [i] = val;
                       });
                       return terms;
                   });
    });
};

$ (element).closest("form").find(".nested-field:visible:last").append(template.replace(regexp, new_id));
ajaxchosen();

Answer 1

If you modify the content of a select that has already been transformed using Chosen, you need to call

$("#form_field").trigger("liszt:updated");

or (depending on what version you are using)

$("#form_field").trigger("chosen:updated");

after the modification so chosen reloads itself on that select and updates the values. So, you add the values using some ajax directly on the select (not the chosen divs) and then call the method.

check the docs: http://harvesthq.github.com/chosen/

Answer 2

liszt:updated is deprecated.

Use

$("#form_field").trigger("chosen:updated");