2011-12-01 21 views
6

Estoy usando el plugin jQuery elegido (por Harvest). Está funcionando bien en (documento). Listo, pero tengo un botón que, cuando hace clic, usa ajax para crear dinámicamente más objetos seleccionados que quiero usar la función "elegida". Sin embargo, solo los elementos seleccionados originales tienen las características "elegidas", y las nuevas (creadas dinámicamente) no funcionan. Estoy usando jQuery.get para agregar los nuevos elementos. Este es un ejemplo del código:Cargando elementos seleccionados "elegidos" dinámicos

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

Estaba pensando que necesito una función .live() en algún lugar, pero no he sido capaz de darse cuenta de eso todavía. ¡Cualquier ayuda es muy apreciada!

Nota - No estoy tratando de cargar dinámicamente nuevas opciones, como se especifica en la documentación utilizandotrigger("liszt:updated");

Respuesta

6

Asegúrese de que los elementos tienen response la clase select.

console.log(response); // to verify 

También puede ser una buena idea aplicar solo el complemento al nuevo elemento (s).

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

Además, si /myurl devuelve un documento HTML entera, puede obtener resultados impredecibles.

+0

gracias, encontré el problema en la respuesta! Los elementos seleccionados estaban allí, pero tenían identificadores duplicados para que no se cargaran correctamente. –

+0

antes del filtro agregar: $ (". Seleccionar"). Vacío(); después de anexar agregar: $ ("seleccionar"). Trigger ("elegido: actualizado"); –

2

Tuve un problema similar con Chosen. Estaba intentando agregar dinámicamente una nueva selección después de que el usuario haga clic en un enlace. Cloné la selección anterior y luego agregué el clon, pero las opciones elegidas no funcionarían. La solución fue despojar a la clase elegida y elementos añadidos, poner el clon en el DOM y luego ejecutar vuelto a elegir:

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

una manera que usted puede utilizar elegido con el 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'); 
}); 

donde selectObj es en particular elija objeto

Pero ...

Escogido se implementa muy mala. Tiene varios errores visuales, como: seleccione una opción, luego comience a buscar uno nuevo, luego elimine los seleccionados y siga escribiendo - obtendrá 'Seleccionar algunas opciones' extendidas como 'Seleccione un valor de búsqueda de opciones'. No es compatible con el encadenamiento de JQuery. Si intenta implementar AJAX, notará que cuando pierde el foco del texto seleccionado, desaparece, ahora cuando vuelva a hacer clic, mostrará algunos valores. Podría intentar eliminar esos valores, pero será un momento difícil, porque no puede usar el evento 'desenfoque', porque también se dispara al seleccionar algunos valores. Sugiero no usar elegido en absoluto, especialmente con AJAX.

0

1.- Descargue Livequery plugin y llámelo desde su página.

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

3

después de código (llenar el selecto) .WRITE este

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

Este es un ejemplo de Chosen cargar dinámicamente nueva base de datos de formulario de opciones usando ajax cada vez Elegido se hace clic.

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