Caricamento elementi di selezione "scelti" dinamici

Question

Sto utilizzando il plug-in jQuery scelto (da Harvest). Funziona bene su (document) .ready, ma ho un pulsante che, quando cliccato, usa ajax per creare dinamicamente più oggetti selezionati che voglio usare la funzione "scelta". Tuttavia, solo gli elementi di selezione originali hanno le caratteristiche "scelte" e le nuove (create dinamicamente) non funzionano. Sto usando jQuery.get per aggiungere i nuovi elementi. Ecco un esempio del codice:

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

stavo pensando che ho bisogno di una funzione di .Live() da qualche parte, ma non sono stato in grado di capire che fuori ancora. Ogni aiuto è molto apprezzato!

Nota - Non sto cercando di caricare dinamicamente nuove opzioni, come specificato nella documentazione utilizzandotrigger("liszt:updated");

Answer 1

Accertarsi che i response elementi hanno la classe select.

console.log(response); // to verify 

Potrebbe anche essere una buona idea applicare il plug-in solo ai nuovi elementi.

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'); 
    }); 
}); 

Inoltre, se /myurl restituisce un intero documento HTML, è possibile ottenere risultati imprevedibili.

Answer 2

Ho avuto un problema simile con Chosen. Stavo cercando di aggiungere in modo dinamico una nuova selezione dopo che l'utente ha fatto clic su un link. Ho clonato la selezione precedente e aggiunto il clone, ma le opzioni scelte non funzionavano. La soluzione era quella di spogliare la categoria considerata e elementi aggiunti, mettere il clone nel DOM e poi eseguire scelto di nuovo:

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

Answer 3

un modo è possibile utilizzare scelti con l'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'); 
}); 

dove selectObj è particolare selezionare oggetto

Ma ...

Chosen è implementato molto male. Ha diversi bug visivi, come: seleziona qualche opzione, poi inizia a cercarne una nuova, poi rimuovi selezionati e continua a digitare - otterrai 'Seleziona alcune opzioni' estese come 'Seleziona alcune opzioni cerca valore'. Non supporta il concatenamento di JQuery. Se cercherete di implementare AJAX noterete che quando perdete la focalizzazione del testo scelto, il testo inserito scompare, ora quando cliccherete di nuovo mostrerà alcuni valori. Si potrebbe provare a rimuovere quei valori, ma sarà un momento difficile, perché non è possibile utilizzare l'evento 'sfocatura', perché si attiva anche quando si selezionano alcuni valori. Suggerisco di non usare affatto scelto, specialmente con AJAX.

Answer 4

1.- Scarica Livequery plugin e chiamalo dalla tua pagina.

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

Answer 5

dopo aver codice (riempire la selezione) .WRITE questo

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

Answer 6

Questo è un esempio di Chosen caricare dinamicamente nuovo database modulo di opzioni utilizzando ogni volta ajax Scelto viene cliccato

$('.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"); 
    }); 
});