smanettoni javascript help

**Lioz** · 18/02/2009, 21:17

non sono una grande programmatore javascript ma devo risolvere questo problema:

sto cercando di scrivere una logica in jquery che permetta l'editing inline di una tabella

in pratica, cliccando su un elemento con classe "edit" l'elemento stesso viene sostituito con un input che eredita il testo dell'elemento: sempre al click tutta la tabella viene circondata da un tag form e dai relativi bottoni per il submit/reset in modo che l'utente possa salvare tutti i valori con un solo click.

fin qui tutto ok: quello che non riesco a capire è come gestire correttamente l'evento submit di questa form (sul quale volevo fare una richiesta ajax passando al mio script lato server tutti i parametri (valori dei campi) della form creata

ecco il codice

$(document).ready(function(){

var cont = 0;

$('.edit').bind('click',function(){ // ad ogni click sull'elemento edit

idSpan = $(this).attr("id");
testoSpan = $(this).text();

cont++; // aumenta cont

if(cont<=1){ // dopo il primo click appendi la form intorno alla tabella e aggancia il submit

$(this).parents("table").wrap("<form action=\"#\" id=\"update\"></form>");

$("<input type=\"reset\" value=\"annulla\" />").insertAfter($(this).parents("table"));
$("<input id=\"lancia\" type=\"submit\" value=\"salva i dati\" />").insertAfter($(this).parents("table"));

} // fine if prima iterazione

/* TO DO: size dell'input e name */

$(this).replaceWith("<input type=\"text\" name=\"nomeinput\" class=\"text\" size=\"30\" value=\""+testoSpan+"\" />"); // sotituisci il testo con un input con value pari al testo

}); // fine bind

$('#update').submit(function(){

// logica sul submit dell'invio

})

});

il problema da quanto ho capito è che lo script nel punto in cui chiamo la funzione sul submit non è in grado di leggere gli elementi del DOM che ho inserito. Avete qualche idea?

**balaDEnef** · 19/02/2009, 19:10

Originariamente Scritto da Lioz

non sono una grande programmatore javascript ma devo risolvere questo problema:

sto cercando di scrivere una logica in jquery che permetta l'editing inline di una tabella

in pratica, cliccando su un elemento con classe "edit" l'elemento stesso viene sostituito con un input che eredita il testo dell'elemento: sempre al click tutta la tabella viene circondata da un tag form e dai relativi bottoni per il submit/reset in modo che l'utente possa salvare tutti i valori con un solo click.

fin qui tutto ok: quello che non riesco a capire è come gestire correttamente l'evento submit di questa form (sul quale volevo fare una richiesta ajax passando al mio script lato server tutti i parametri (valori dei campi) della form creata

ecco il codice

il problema da quanto ho capito è che lo script nel punto in cui chiamo la funzione sul submit non è in grado di leggere gli elementi del DOM che ho inserito. Avete qualche idea?

non ti ha risposto nessuno!

**wizard** · 19/02/2009, 19:26

A me e' venuto il mal di testa a leggere il messaggio di Lioz, tanto era complicato il problema

**alb** · 19/02/2009, 20:24

Originariamente Scritto da wizard

A me e' venuto il mal di testa a leggere il messaggio di Lioz, tanto era complicato il problema

Beh, se leggevi prima il titolo magari non andavi avanti a leggere

**The Ramandolo Man** · 19/02/2009, 20:52

Originariamente Scritto da Lioz

il problema da quanto ho capito è che lo script nel punto in cui chiamo la funzione sul submit non è in grado di leggere gli elementi del DOM che ho inserito. Avete qualche idea?

così alla veloce ( come dici ) credo che l'elemento ancora nn c'è quindi nn puoi attaccargli nesun evento . tu clicchi , circondi la tabella e a quel punto devi dargli l'evento submit perchè l'elemento è presente solo in quel momento . prova a mettere quell'update submit all'interno dell'evento click subito dopo che hai circondato la tabella . ora tu semplicemente hai aspettato che la pagina sia stata caricata ( document ready ) con gli elementi iniziali e associato l'evento click e creato l'evento submit per un elemento che ancora nn è presente .

nel nuovo jquery uscito c'è
http://docs.jquery.com/Events/live#typefn
che permette di associare un evento una sola volta per elementi presenti e futuri della pagina . il submit ancora nn c'è pero' .

**Lioz** · 19/02/2009, 21:59

Originariamente Scritto da The Ramandolo Man

così alla veloce ( come dici ) credo che l'elemento ancora nn c'è quindi nn puoi attaccargli nesun evento . tu clicchi , circondi la tabella e a quel punto devi dargli l'evento submit perchè l'elemento è presente solo in quel momento . prova a mettere quell'update submit all'interno dell'evento click subito dopo che hai circondato la tabella . ora tu semplicemente hai aspettato che la pagina sia stata caricata ( document ready ) con gli elementi iniziali e associato l'evento click e creato l'evento submit per un elemento che ancora nn è presente .

nel nuovo jquery uscito c'è
http://docs.jquery.com/Events/live#typefn
che permette di associare un evento una sola volta per elementi presenti e futuri della pagina . il submit ancora nn c'è pero' .

grazie!!!

bellissimo quel live

**Lioz** · 20/02/2009, 10:38

forse ci sono riuscito

ho fatto in modo di creare un evento onsubmit all'interno della form generata
l'evento chiama una funzione alla quale passo come parametro il riferimento alla form stessa. A questo punto posso scrivere la mia funzione che gestisce l'invio dei dati della form

$(this).parents("table").wrap("<form action=\"#\" id=\"update\" onSubmit=\"invioForm($(this))\"></form>");

function invioForm(parametro){

formId = '#'+$(parametro).attr("id");

dati = $(formId).serialize();

/* TO DO: richiesta ajax con invio dati */

return false;

}

**The Ramandolo Man** · 20/02/2009, 12:29

si così dovrebbe andare bien

.

**C.R.** · 20/02/2009, 13:56

mio fratello (ingegnere informatico, e sa programmare in quasi tutto tranne
assembler) ha ponderato attentamente la cosa e ha detto che secondo lui ti
complichi la vita inutilmente... non è un esperto web, ma l'html lo sapicchia e
sa a MENADITO java, da cui deriva sta roba.... si chiede perchè non ti basta
un comune tag form coi suoi campi (lui lo avrebbe processato tramite "jsp" su
server tipo tomcat-java, per lui il migliore... ) senza addirittura andarti a
impelagare col compilare una table in-line...

per la cronaca : non conosce ajax e jquery perchè non li usa mai (lavora
con java, c++ e altri 2 che non ricordo)

C.

**Lioz** · 20/02/2009, 14:23

Originariamente Scritto da C.R.

mio fratello (ingegnere informatico, e sa programmare in quasi tutto tranne
assembler) ha ponderato attentamente la cosa e ha detto che secondo lui ti
complichi la vita inutilmente... non è un esperto web, ma l'html lo sapicchia e
sa a MENADITO java, da cui deriva sta roba.... si chiede perchè non ti basta
un comune tag form coi suoi campi (lui lo avrebbe processato tramite "jsp" su
server tipo tomcat-java, per lui il migliore... ) senza addirittura andarti a
impelagare col compilare una table in-line...

per la cronaca : non conosce ajax e jquery perchè non li usa mai (lavora
con java, c++ e altri 2 che non ricordo)

C.

eh ma lo scopo è proprio non fare una form classica
voglio poter editare tutti i valori "on the fly" senza ricare la pagina
aggiornandoli però anche sul db