istanziare elementi dopo il caricamento di una chiamata ajax
Taggato: istanziare ajax jquery
- Questo topic ha 19 risposte, 2 partecipanti ed è stato aggiornato l'ultima volta 9 anni, 9 mesi fa da Valerio Radice.
- AutorePost
- 14 Maggio 2014 alle 18:00 #6087Valerio RadicePartecipante
Ciao a tutti ho necessità di istanziare un elemento (un color picker) in jQuery dopo aver ricevuto una parte di pagina HTML come risultato di un’elaborazione di un file php.
Se ricarico la pagina il color picker ma al primo tentativo no,
non mi è chiaro cosa devo dirgli per farlo istanziare, io carico css e js nell’html della pagina index, il risultato della chiamata ajax mi da un codice html e uno script in javascript ma al primo giro non va, se faccio refresh il color picker funziona.
Il color picker è questo: http://colpick.com/plugin ma penso sia più un problema di istanziare l’oggetto, posso postare il codice?
grazie a tutti per l’aiuto in anticipo
14 Maggio 2014 alle 18:12 #6088Valerio RadicePartecipanteAl primo caricamento mi da il seguente errore nella console:
TypeError: $(...).colpick is not a function
se premo mela+R ricarica e funziona tutto…sembra che non converta la classe .color-box nell’oggetto colorpick
15 Maggio 2014 alle 10:39 #6093jqueryitaliaAmministratoreCiao Valerio.
Suppongo che l’elemento al cui click associ il colorpicker sia un elemento della pagina caricata in ajax, quindi non presente nel DOM all’inizio: è quindi logico che tu abbia quel tipo di errore.
Per evitarlo, supponendo che che l’id dell’elemento al cui click debba comparire il colorpicker sia #picker, devi modificare la chiamata in questo modo:
$('#picker').on( 'click', function() { $(this).colpick({ ... ... ... }); });
il tutto ovviamente al document ready 😉
Buon lavoro!
15 Maggio 2014 alle 14:29 #6094Valerio RadicePartecipanteCi ho pensato ieri sera a questa soluzione ma ho un problema, il colore che devo istanziare nel colorpicker lo ho nella pagina 2(quella in ajax) mentre il tuo codice lo devo mettere nella prima( la index ), infatti al caricamento della pagina la funziona ajax stà dentro un document ready, mentre quella del pulsante “passo successivo” viene caricata così com’è, senza document ready.
Dovrei aver eseguire del codice JS che ricevo dalla pagina2 (ovvero quello che istanzia il div con classe .col-pic)
come posso fare?
il tuo codice ovviamente è da inserirsi nella index ma non posso istanziarlo subito col colore giusto.
però potrei dirgli di cambiare colore nella pagina ajax xkè a quel punto è già istanziato, giusto?
15 Maggio 2014 alle 15:05 #6095Valerio RadicePartecipanteHo lo stesso identico problema nell’istanziare un CKEDITOR
nalla index in document ready ho messo in ordine la funzione ajax, la funzione on che resta in ascolto (in teoria) per istanziare il colorpicker e la funzione per istanziare il ckeditor, ma sembra non andare non fa nemmeno l’alert…
scusate se vi posto il codice ma almeno capite meglio, grazie mille
jQuery(document).ready(function(){ jQuery.ajax({ url: 'function/general-class/render.class.php', success: function (data) { jQuery('#render').append(data); istanzia(step); } }); $('.color-box').on( 'click', function() { alert("eccomi"); $('.color-box').colpick({ colorScheme:'dark', layout:'hex', color:'#000000', onSubmit:function(hsb,hex,rgb,el) { $(el).css('background-color', '#'+hex); $(el).colpickHide(); $('#ss_app_name_color').val(hex); }, onChanges:function(hsb,hex,rgb,el){ $(el).css('background-color', '#'+hex); $('#ss_app_name_color').val(hex); } }); }); $('#textarea_home').on( 'click', function() { CKEDITOR.replace( 'textarea_home' ); });
16 Maggio 2014 alle 12:47 #6102jqueryitaliaAmministratoreE’ difficile individuare un eventuale errore solo vedendo il codice javascript.
Senza caricare tutto il codice qui, riesci a caricare il codice necessario a far partire questa pagina in un dominio di test online?
16 Maggio 2014 alle 16:26 #6106Valerio RadicePartecipanteAllora in qualche modo sono riuscito a sistemare il ckeditor anche se vorrei che l’utente lo vedesse già caricato e non che cambi al clic.
il link al sito temporaneo è questo sito
confido in voi xkè veramente non capisco come fare.grazie in anticipo del supporto
17 Maggio 2014 alle 09:50 #6113jqueryitaliaAmministratoreIo vedo una pagina sola dove non è presente nè il colorpicker nè l’editor CK…
17 Maggio 2014 alle 12:12 #6114jqueryitaliaAmministratoreSono riuscito a vederla, finalmente!!!
Prova a chiamare la funzione istanzia(step) invece che dentro il success della funzione ajax, dentro il complete, cioè:jQuery.ajax({ url: 'function/general-class/render.class.php', success: function (data) { jQuery('#render').append(data); }, complete: function() { istanzia(step); } });
17 Maggio 2014 alle 23:23 #6116Valerio RadicePartecipanteOk grazie mille lunedì proverò 😉
- AutorePost
- Devi essere connesso per rispondere a questo topic.