CODEWITHSUNDEEP
jqueryjquery-pluginsjquery-chosen
Mario Jose Mixco
Mario Jose Mixco

Reputation: 35

ajax-chosen adding dynamic elements

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();

Upvotes: 3

Views: 8899

Answers (2)

arieljuod
arieljuod

Reputation: 15838

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/

Upvotes: 7

TuxujPes
TuxujPes

Reputation: 76

liszt:updated is deprecated.

Use 

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

Upvotes: 3

Related Questions