Loading dynamic "selected" selection items

Question

I am using the jQuery plugin selected (Harvest). It works fine (document) .ready, but I have a button that, when clicked on, uses ajax to dynamically create larger objects that I want to use the "selected" function. However, only the original selection elements have "selected" functions, and new (dynamically created) do not work. I am using jQuery.get to add new elements. Here is a sample code:

jQuery(".select").chosen();//this one loads correctly jQuery("#add-stage").click(function() { jQuery.get('/myurl',{},function(response) { //response contains html with 2 more select elements with 'select' class jQuery('#stages').append(response); jQuery(".select").chosen();//this one doesn't seem to do anything :-( }); }); 

I thought I needed the .live () function somewhere, but I still could not figure it out. Any help is much appreciated!

Note. I am not trying to dynamically load new parameters as indicated in the documentation using trigger("liszt:updated");

Answer 1

Make sure the response elements have a select class.

 console.log( response ); // to verify 

It might also be a good idea to apply the plugin to new elements.

 jQuery(".select").chosen(); jQuery("#add-stage").click(function() { jQuery.get('/myurl',{},function(response) { console.log( response ); // verify the response var $response = $(response); // create the elements $response.filter('.select').chosen(); // apply to top level elems $response.find('.select').chosen(); // apply to nested elems $response.appendTo('#stages'); }); }); 

Also, if /myurl returns the entire HTML document, you may get unpredictable results.

Answer 2

after code (fill in the selection) .write this

 $(".select").trigger("chosen:updated"); 

Answer 3

I had a similar problem with Chosen. I tried to dynamically add a new selection after the user clicks on the link. I cloned the previous selection and then added the clone, but the Chosen options did not work. The solution was to separate the Chosen class and the added elements, put the clone in the DOM and run the selected option again:

 clonedSelect.find('select').removeClass('chzndone').css({'display':'block'}).removeAttr('id').next('div').remove(); mySelect.after(clonedSelect); clonedSelect.find('select').chosen(); 

Answer 4

one way you can use with ajax:

 $.ajax({ url: url, type: 'GET', dataType: 'json', cache: false, data: search }).done(function(data){ $.each(data, function(){ $('<option />', {value: this.value, text: this.text}).appendTo(selectObj); }); chosenObj.trigger('liszt:updated'); }); 

where selectObj is a special selection object

But...

Selected is very poorly implemented. It has several visual errors, for example: select an option, then start searching for a new one, then delete the selected ones and continue typing - you will get "Select some options", for example, "Select some search options." It does not support jQuery chaining. If you try to implement AJAX, you will notice that when you lose the focus of the selected one, the text will disappear, now when you click again, it will show some values. You can try to remove these values, but it will not be easy because you cannot use the blur event because it also fires when some values ​​are selected. I suggest not using select ones at all, especially with AJAX.

Answer 5

1.- Download the Livequery plugin and call it from your page.

2.- Release Kraken: $(".select").livequery(function() { $(this).chosen({}); });

Answer 6

This is an example of Chosen dynamically loading a new form database using ajax every time Chosen is clicked.

 $('.my_chonsen_active').chosen({ search_contains:true }); $('.my_chonsen_active').on('chosen:showing_dropdown', function(evt, params){ id_tosend=$(this).attr("id").toString(); $.get("ajax/correspondance/file.php",function(data){ $('#'+id_tosend).empty(); $('#'+id_tosend).append(data); $('#'+id_tosend).trigger("chosen:updated"); }); });