Autocomplete su elemento creato dinamicamente

[Deathlok]

Salve,

Ho un problema che mi sta facendo parecchio innervosire in quanto non riesco a capire perchè non funziona...

Ho questo pezzo php

<div class="catinfo" method="post" style="display:inline-block;">
    <?php ins_database_hd(); ?>                
    <?php ItemForm::plugin_post_item(); ?>                        
</div>

Dove ItemForm:lugin_post_item() genera elementi del tipo

<div class="meta">
    <label for="meta_modello">Anno di rilascio: </label>
    <input id="meta_modello" type="text" name="meta[5]" value="" class="text">
</div> 

E fin qui niente di strano se non fosse che questo codice jquery

jQuery(document).ready(function($)
{
$('#auto').hide();$('li[id^="lis"]').hide();$('#itemimg').hide();$('.item_dblist').hide();
myobj = {"116":"monitors_tab","100":"cpu_tab","113":"mouse_tab","114":"mousepad_tab","115":"keyboard_tab","102":"psu_tab","106":"case_tab","103":"dissipatori_tab","105":"exthd_tab","99":"inthd_tab","104":"masterizzatori_tab","107":"ram_tab","108":"aux_tab","109":"mobo_tab","110":"pci_tab","111":"vga_tab","101":"ssd_tab"}; 

$('#catId').change(function() { 
   var selectVal = myobj[$('#catId :selected').val()];  
    
    $('#meta_modello').autocomplete( 
    { 
        source: "http://tecnomercatino.it/oc-content/plugins/databasehd/codicephp.php?tab="+selectVal, 
        minLength: 0,
        select: function (event, ui) {
        console.log("Selected: " + ui.item.modello);                
        $('.meta_list').hide();        
        $('.item_dblist').show(); 

non ne vuole sapere di funzionare, e non so più dover andare a parare, usando un normale campo di input tutto funziona, io volevo usare però i campi generati dal CMS che vengono inseriti in automatico nel database in modo da levarmi dei fastidi .-.

La mia teoria, anche se non capisco bene perchè, è che al momento dell'esecuzione dello script il campo in oggetto non sia ancora stato generato, anche se mi pare strano

Grazie per l'aiuto ^^

[bstefano79]

devi usare on

http://api.jquery.com/on/

[Deathlok]

Grazie

Ma come sai sono ignorante lo devo usare su che elemento? al posto di change?

[bstefano79]

invece di chiamare l'autocomplete in questo modo devi usare on per farlo funzionare anche su gli elementi creati dinamicamente

invece di

$('#meta_modello').autocomplete(  
    {  
        .........
    });

chiamalo con

 $(document).on('autocomplete','#meta_modello' , function(e){
          .......
       });

[Deathlok]

Ok grazie, provo e ti dico cosa ne esce fuori

[Deathlok]

Ho modificato così il codice:

jQuery(document).ready(function($)
{
$('#auto').hide();
$('li[id^="lis"]').hide();
$('#itemimg').hide();
$('.item_dblist').hide();
myobj = {"116":"monitors_tab","100":"cpu_tab","113":"mouse_tab","114":"mousepad_tab","115":"keyboard_tab","102":"psu_tab","106":"case_tab","103":"dissipatori_tab","105":"exthd_tab","99":"inthd_tab","104":"masterizzatori_tab","107":"ram_tab","108":"aux_tab","109":"mobo_tab","110":"pci_tab","111":"vga_tab","101":"ssd_tab"}; 

$('#catId').change(function() { 
   var selectVal = myobj[$('#catId :selected').val()];  
    
    $(document).on('autocomplete','#meta_modello' , function(e){
        if ( !$(this).data("autocomplete") ) { // If the autocomplete wasn't called yet:
            $(this).autocomplete({     
                source: "http://tecnomercatino.it/oc-content/plugins/databasehd/codicephp.php?tab="+selectVal,
                minLength: 0,
                select: function (event, ui) 
                {
                    console.log("Selected: " + ui.item.modello);                
                    $('.meta_list').hide();        
                    $('.item_dblist').show();
                    if(selectVal=='cpu_tab')
                    {
        
                        $('input[id="meta_modello"]').val((ui.item.modello).replace(/-/g, " "));        
                        $('li[id="lis_modello"]').append(ui.item.modello);        
                        $('li[id="lis_modello"]').show();
                        $('input[id="meta_anno"]').val(ui.item.anno);        
                        $('li[id="lis_anno"]').append(ui.item.anno);        
                        $('li[id="lis_anno"]').show();
                        $('input[id="meta_produttore"]').val(ui.item.produttore);        
                        $('li[id="lis_produttore"]').append(ui.item.produttore);        
                        $('li[id="lis_produttore"]').show();
                        $('input[id="meta_arch"]').val(ui.item.arch);        
                        $('li[id="lis_arch"]').append(ui.item.arch);        
                        $('li[id="lis_arch"]').show();
                        $('input[id="meta_socket"]').val(ui.item.socket);        
                        $('li[id="lis_socket"]').append(ui.item.socket);        
                        $('li[id="lis_socket"]').show();
                        $('input[id="meta_corenum"]').val(ui.item.corenum);        
                        $('li[id="lis_corenum"]').append(ui.item.corenum);        
                        $('li[id="lis_corenum"]').show();
                        $('input[id="meta_threadnum"]').val(ui.item.threadsnum);    
                        $('li[id="lis_threadnum"]').append(ui.item.threadsnum);    
                        $('li[id="lis_threadnum"]').show();
                        $('input[id="meta_l2cache"]').val(ui.item.l2cache);        
                        $('li[id="lis_l2cache"]').append(ui.item.l2cache);        
                        $('li[id="lis_l2cache"]').show();
                        $('input[id="meta_l3cache"]').val(ui.item.l3cache);        
                        $('li[id="lis_l3cache"]').append(ui.item.l3cache);        
                        $('li[id="lis_l3cache"]').show();
                        $('input[id="meta_benchurl"]').val(ui.item.bench);
                        $('input[id="meta_imgurl"]').val(ui.item.imgurl);
                        $('#itemimg').attr("src", ui.item.imgurl);        
                        $('#itemimg').show();
            
                    }
           
                }
            
            }); 
            $('#auto').show();
        
        }
    


    });
 });
 }); 

(l'ho postato tutto per evitare equivoci)

Ma non vuole ancora funzionare .-.

Ancora grazie per il prezioso aiuto

[Vindav]

prova cosi:

$(document).on('keyup.autocomplete','#meta_modello ' , function(e){

[bstefano79]

http://jsfiddle.net/6t74T/4/ guardando questo esempio in effetti usa keydown.autocomplete
il problema di questo esempio è che utilizza live che è deprecato, quindi meglio se usi on perchè così continuerà a funzionare anche nelle vesrioni successive di jquery

[Deathlok]

Grazie ad entrambi!

$(document).on('keyup.autocomplete','#meta_modello ' , function(e){

L'ho modificata un po' in modo che si avvii sul focus e non keyup, quindi ho ottenuto ciò

$(document).on('focus.autocomplete','#meta_modello' , function(){ 

Approfitto della vostro pazienza ancora un attimo, se io dopo aver eseguito l'autocomplete, eseguo questo codice

if(selectVal=='cpu_tab')
                    {
        
                        $('input[id="meta_modello"]').val((ui.item.modello).replace(/-/g, " "));        
                        $('li[id="lis_modello"]').html("[b]Modello: [/b]" +ui.item.modello);        
                        $('li[id="lis_modello"]').show();
                        $('input[id="meta_anno"]').val(ui.item.anno);        
                        $('li[id="lis_anno"]').html("[b]Anno Uscita: [/b]" +ui.item.anno);        
                        $('li[id="lis_anno"]').show();
                        $('input[id="meta_produttore"]').val(ui.item.produttore);        
                        $('li[id="lis_produttore"]').html("[b]Produttore: [/b]" +ui.item.produttore);        
                        $('li[id="lis_produttore"]').show();
                        $('input[id="meta_arch"]').val(ui.item.arch);        
                        $('li[id="lis_arch"]').html("[b]Architettura: [/b]"+ui.item.arch);        
                        $('li[id="lis_arch"]').show();
                        $('input[id="meta_socket"]').val(ui.item.socket);        
                        $('li[id="lis_socket"]').html("[b]Socket: [/b]"+ui.item.socket);        
                        $('li[id="lis_socket"]').show();
                        $('input[id="meta_corenum"]').val(ui.item.corenum);        
                        $('li[id="lis_corenum"]').html("[b]Numero Core: [/b]"+ui.item.corenum);        
                        $('li[id="lis_corenum"]').show();
                        $('input[id="meta_threadnum"]').val(ui.item.threadsnum);    
                        $('li[id="lis_threadnum"]').html("[b]Numero Threads: [/b]"+ui.item.threadsnum);    
                        $('li[id="lis_threadnum"]').show();
                        $('input[id="meta_l2cache"]').val(ui.item.l2cache);        
                        $('li[id="lis_l2cache"]').html("[b]Cache L2: [/b]"+ui.item.l2cache);        
                        $('li[id="lis_l2cache"]').show();
                        $('input[id="meta_l3cache"]').val(ui.item.l3cache);        
                        $('li[id="lis_l3cache"]').html("[b]Cache L3: [/b]"+ui.item.l3cache);        
                        $('li[id="lis_l3cache"]').show();
                        $('input[id="meta_benchurl"]').val(ui.item.bench);
                        $('input[id="meta_imgurl"]').val(ui.item.imgurl);
                        $('#itemimg').attr("src", ui.item.imgurl);        
                        $('#itemimg').show();
            
                    }
                    else $('li[id^="lis"]').val(''); 

Praticamente vado a mettere in una lista di elementi alcuni valori ritornati dall'autocomplete.

Adesso se compilo tutto tranne descrizione e titolo, succede che mi ritorna un errore di validazione indicandomi che i campi devono essere riempiti, e fin qui è giusto.

Dopo ciò la pagina viene ricaricata, vengono mostrati tutti i campi correttamente compilati, ma vorrei che venisse comunque visualizzata la lista di elementi che ho creato nell'autocomplete precedente.. come posso fare?

Ancora grazie