Validazione di più form con jquery e validation

[nixs]

buongiorno a voi, invidiati guru del js...

è una settimana che ci smanetto ma non ne vengo a capo, per cui
mi sono deciso a consultare questo NG.
Cercherò di essere sintetico ed esplicativo allo stesso tempo.

quello che ho fatto:
pagina ASP, con jquery e jquery-validation come plug-in, db access.
La pagina mi mostra un elenco di 30 righe con 5 colonne. Ogni riga
ha una div nascosta che posso far apparire per modificare i dati di una
riga.
Ho fatto un ciclo in modo che ogni riga abbia un form proprio, definito dal
nome "form" + IDcampoChiave del record corrente, stessa cosa per gli
imput di ogni form.

quello che voglio fare:
la validazione di un form con jq-validation è una bomba! mi riesce
benissimo,
ma ora mi scontro con la necessità di applicare la stessa routine jq a più
form.

i dubbi:
faccio bene a fare tanti form oppure meglio uno con campi denominati con ID?
Io pensavo di fare così in modo da inviare solo un piccolo gruppo di dati
(del form
dove viene fatta la variazione) e non tutti i campi (anche quelli non
variati) di un
unico form.
Non sono molto pratico di js, faccio delle piccole modifiche ma niente di
importante,
per cui, trovata la giusta funzione su internet non so come renderla
"universale"
per più form, capisco solo che devo in qualche modo passargli il nome del
form da
validare dinamicamente (e anche attivare con qualche onclick la
validazione), ma
non saprei come.

In pratica questo è un abbozzo della funzione che uso:

//validazione form
$(document).ready(function() {
$("#myForm").validate({
rules: {
NOME: "required",
COGNOME: "required"
},
messages: {
NOME: "Inserisci il nome.",
COGNOME: "Inserisci il cognome."
}
});
});

Vi ringrazio per l'eventuale aiuto
Nicola

[nixs]

Dalla mancanza di risposte devo dedurre che non è possibile?

Nicola

[Cristiano Larghi]

Il Sun, 25 Mar 2012 17:09:17 +0200, nixs ha scritto:

> Dalla mancanza di risposte devo dedurre che non è possibile?

No, penso sia più corretto dedurre che non c'è nessuno, tra chi segue
questo newsgroup javascript, che usa bene jquery (quindi un sottogruppo)
e che conosce il plug-in di cui stai parlando (quindi sotto-sottogruppo).

[Cristiano Larghi]

Il Thu, 22 Mar 2012 19:06:34 +0100, nixs ha scritto:

Ci provo, visto che nessuno sa risponderti

> In pratica questo è un abbozzo della funzione che uso:
>
> //validazione form
> $(document).ready(function() {
> $("#myForm").validate({

Dato che lo esegui al termine del caricamento della pagina, immagino che
questo non faccia altro che associare l'evento "validate" al form con
id="myForm".
Se così è, per esempio, potrebbe funzionare se togli il #: così a naso
assocerai l'evento a tutti i tag "form" della pagina.

[nixs]

> Dato che lo esegui al termine del caricamento della pagina, immagino che
> questo non faccia altro che associare l'evento "validate" al form con
> id="myForm".
> Se così è, per esempio, potrebbe funzionare se togli il #: così a naso
> assocerai l'evento a tutti i tag "form" della pagina.

Prima di tutto ti ringrazio per avermi concesso attenzione.

Credo che non funzionerebbe, in quanto la funzione jquery è fatta per
cercare un id.
Inoltre, i miei form hanno ognuno un nome e id univoco, quindi dovrei
incapsulare la routine jq in una funzione js che passi alla prima l'id del
solo form del quale io clicco il submit.

Per capirci, la struttura dei form è la seguente:

<form id="form_1" ......>
-i vari input_1-
-submit_1-
</form>
<form id="form_2" ......>
-i vari input_2-
-submit_2-
</form>
ecc.

Inoltre, e questo non c'entra con jq, è giusta l'impostazione
della pagina con più form?
Nicola

[ZER0]

On 22/03/12 19:06 , nixs wrote:
> buongiorno a voi, invidiati guru del js...

> quello che ho fatto:
> pagina ASP, con jquery e jquery-validation come plug-in, db access.

Ammetto che non credevo che ci fosse ancora qualcuno che usasse ASP (da
come ne parli, immagino ASP Classic, non .NET) e Access come DB. :)

> La pagina mi mostra un elenco di 30 righe con 5 colonne. Ogni riga
> ha una div nascosta che posso far apparire per modificare i dati di una
> riga.

Questo mi fa pensare che tu abbia 30 form differenti.

> Ho fatto un ciclo in modo che ogni riga abbia un form proprio, definito dal
> nome "form" + IDcampoChiave del record corrente, stessa cosa per gli
> imput di ogni form.

Ecco, non ne hai bisogno. Ti basta una form sola per l'editing di una
riga. Mostrerai sempre quella, nel punto appropriato, quando devi

modificare i dati di una riga.

La validazione la farai una volta che esci dalla modalità di editing, se
passa allora aggiornerai i dati di quella riga tramite JS per riflettere
i nuovi inserimenti, farai una chiamata `$.ajax` al server (puoi
tranquillamente simulare l'invio di una form in POST, credo ci sia un
esempio nella documentazione di jquery) e stop.

Se alcuni dei dati da visualizzare dipendono dal risultato
dell'inserimento nel DB, puoi far restituire alla chiamata `$.ajax` tali
dati (in formato JSON o altro) che poi andrai a popolare nella riga
indicata.

Questo è l'approccio per il quale opterei in base a ciò che hai detto,
anche per evitare di inviare dati inutili al server.

> faccio bene a fare tanti form oppure meglio uno con campi denominati con
> ID?

Come ho detto, eviterei di avere diversi form. Visto che i dati sono
tabellari e rappresentano la stessa struttura, ti basta un form da usare
per l'editing di una riga – non modificherai mai contemporaneamente più
righe, anzi, non puoi modificare contemporaneamente più di un campo a
dirla tutta.

> per più form, capisco solo che devo in qualche modo passargli il nome
> del form da
> validare dinamicamente (e anche attivare con qualche onclick la
> validazione), ma
> non saprei come.

Se per più form intendi "non voglio scrivere nel codice l'ID della form
ma voglio che lo capisca da sé", ti basta fare una cosa del genere:

<form>
<input />
<!-- il tuo form -->

<input type="button" onclick="validateForm(this.form)" />
</form>

Dove `validateForm` sarà qualcosa tipo:

function validateForm(form) {
$(form).validate({ /* le tue regole */ });
}

Nota che, non sapendo come funzioni questo plugin, non so se debbo
gestire la risposta del metodo – ammesso ce l'abbia – né se fa un submit
automatico.

Se invece intendi "applicare la validazione su form multiple allo stesso
tempo", come ho detto non ho idea di come funzioni questo plugin. Se è
fatto a modo, dovrebbe funzionare anche su elementi multipli (dato che
jquery lo consente).

Ad esempio, presupponendo che le tue form stiano tutte in un certo
contenitore (diciamo con id "dataset"):

$("#dataset form").validate({ /* le tue regole */ });

Se così non fosse, puoi sempre farlo a mano. Il problema è che non
sapendo cosa fa questo `validate` non posso consigliarti un approccio
corretto. Intendo dire, una cosa del genere:

$("#dataset form").each(function (index, form) {
$(form).validate({ /* le tue regole */ })
})

Fa quello che chiedi, ovvero cicla tutte le form e chiama il validate.
Ma dato che non sembra che questo validate restituisca qualcosa,
potrebbe fare il submit automatico alla prima form che va bene. Inoltre,
non ha senso ciclare tutte le form se già una fallisce, bisognerebbe
evitarlo. Ma non so se "validate" restituisce un valore con il quale
puoi identificare tale scenario.
Inoltre come fai a capire quali form deve essere inviata o meno.

> Vi ringrazio per l'eventuale aiuto
> Nicola

Hope it helps.

[nixs]

>Ammetto che non credevo che ci fosse ancora qualcuno che usasse ASP (da
>come ne parli, immagino ASP Classic, non .NET) e Access come DB. :)

beh, da quanto leggo in giro probabilmente hai ragione, ma io non lo faccio
per lavoro e solo l'ASP conosco, non ho abbastanza tempo per imparare
.NET. Poi, per quanto riguarda il db, per adesso, durante lo sviluppo, va
bene quello, poi si vedrà, se son rose... fioriranno.
D'altra parte, girando per siti, anche nuovi, si vede ancora molto l'ASP
classico.

>Questo mi fa pensare che tu abbia 30 form differenti.

si, l'intenzione era quella di non inviare dati inutili, ma solo quelli
della
riga che si modifica (che ha un proprio SUBMIT).

>Ecco, non ne hai bisogno. Ti basta una form sola per l'editing di una
>riga. Mostrerai sempre quella, nel punto appropriato, quando devi
>modificare i dati di una riga.
>La validazione la farai una volta che esci dalla modalità di editing, se
>passa allora aggiornerai i dati di quella riga tramite JS per riflettere
>i nuovi inserimenti, farai una chiamata `$.ajax` al server (puoi
>tranquillamente simulare l'invio di una form in POST, credo ci sia un
>esempio nella documentazione di jquery) e stop.

Tralasciando AJAX, che per ora non mi è ancora abbastanza chiaro,
la cosa mi sembra molto interessante (quella di mostrare lo stesso form
nella riga editata), ma non saprei come fare a farlo spostare di volta in
volta quando "apro" (uso una funzione jq toggle-div) la riga.
Devo forse utilizzare una di quelle funzioni jq che mi "stampa" un po'
di codice HTML nel punto voluto? Sono sulla strada giusta?

>Come ho detto, eviterei di avere diversi form. Visto che i dati sono
>tabellari e rappresentano la stessa struttura, ti basta un form da usare
>per l'editing di una riga – non modificherai mai contemporaneamente più
>righe, anzi, non puoi modificare contemporaneamente più di un campo a
>dirla tutta.

che significa che non posso modificare più di un campo?
Nella riga ho 5 campi (Cognome, Nome, data di nascita ecc.)
E l'utilizzatore potrebbe voler correggere o modificare più di
un campo.

>Se per più form intendi "non voglio scrivere nel codice l'ID della form
>ma voglio che lo capisca da sé", ti basta fare una cosa del genere:
> <form>
> <input />
> <!-- il tuo form -->

[cut]

Se mi porti per mano, ora, mi interessa molto la storia dell'unico form
riposizionabile :-)))

>Nota che, non sapendo come funzioni questo plugin, non so se debbo
>gestire la risposta del metodo – ammesso ce l'abbia – né se fa un submit
>automatico.

Il plugin testa l'input nei campi secondo le condizioni che gli prescrivi
e in caso non vengano rispettate scrive accanto al campo il messaggio
che indica cosa non va.

>Se invece intendi "applicare la validazione su form multiple allo stesso
>tempo",

tranquillo, era da intendere sempre UN form per volta (dato che ognuno
contiene
il suo submit)

grazie, ciao
Nicola

[Cristiano Larghi]

Il Mon, 26 Mar 2012 00:20:30 +0200, nixs ha scritto:

> Credo che non funzionerebbe, in quanto la funzione jquery è fatta per
> cercare un id.

Sicuro? Hai provato?

[ZER0]

On 26/03/12 14:11 , nixs wrote:

>> Ammetto che non credevo che ci fosse ancora qualcuno che usasse ASP (da
>> come ne parli, immagino ASP Classic, non .NET) e Access come DB. :)

> beh, da quanto leggo in giro probabilmente hai ragione, ma io non lo faccio
> per lavoro e solo l'ASP conosco, non ho abbastanza tempo per imparare
> .NET.

Personalmente neanche ti consiglierei, di imparare .NET, soprattutto se
non sei vincolato dal lavoro a tale tecnologia, ma lo fai per passione.
Esistono tecnologie decisamente più interessanti e divertenti a giro.

> D'altra parte, girando per siti, anche nuovi, si vede ancora molto l'ASP
> classico.

Forse in Italia, in ogni caso ASP (Classico) è una tecnologia vecchiotta
con parecchi problemi e limitazioni. Per carità, io ci ho fatto tante
cose e mi son divertito anche all'epoca, ma si parla anche di dieci anni
fa, che in termini informatici è un tempo infinito.

> Tralasciando AJAX, che per ora non mi è ancora abbastanza chiaro,
> la cosa mi sembra molto interessante (quella di mostrare lo stesso form
> nella riga editata), ma non saprei come fare a farlo spostare di volta in
> volta quando "apro" (uso una funzione jq toggle-div) la riga.

Ecco una versione molto spartana (che usa jquery) del concetto:

<script>
$(function() {
var editable = $("#editable");
var current = null;
var inputs = editable.find("input");

$("a[href=#save]").click(function(event) {
document.forms[0].submit();
event.preventDefault();
});

$("a[href=#edit]").click(function(event) {
if (current)
current.show();

current = $(event.target).closest("tr");
current.hide();

var cells = current[0].cells;

for (var i = 0; i < inputs.length; i++)
inputs[i].value = cells[i].firstChild.nodeValue;
editable[0].cells[0].firstChild.nodeValue =
cells[0].firstChild.nodeValue;

editable.insertBefore(current);
editable.show();

event.preventDefault();
});
})
</script>
<form method="GET">
<table border="1" >
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>1234</td>
<td>Foo</td>
<td>That's foo!</td>
<td><a href="#edit">edit</a></td>
</tr>
<tr>
<td>5678</td>
<td>Bar</td>
<td>That's bar!</td>
<td><a href="#edit">edit</a></td>
</tr>
<tr id="editable" style="display:none">
<td>-<input type="hidden" name="txtID" /></td>
<td><input name="txtName" /></td>
<td><input name="txtDescription" /></td>
<td><a href="#save">save</a></td>
</tr>
</tbody>
</table>
</form>

Non fa uso di chiamate "ajax", ma fa un submit al salvataggio.

>> Come ho detto, eviterei di avere diversi form. Visto che i dati sono
>> tabellari e rappresentano la stessa struttura, ti basta un form da usare
>> per l'editing di una riga – non modificherai mai contemporaneamente più
>> righe, anzi, non puoi modificare contemporaneamente più di un campo a
>> dirla tutta.

> che significa che non posso modificare più di un campo?

Intendo dire che un utente modifica un campo solo alla volta, anche se
ce ne sono diversi visualizzati contemporaneamente. Dà il focus al
campo, scrive il valore, passa al successivo. Questo intendevo.

> grazie, ciao
> Nicola

Prego!

[nixs]

>Personalmente neanche ti consiglierei, di imparare .NET, soprattutto se
>non sei vincolato dal lavoro a tale tecnologia, ma lo fai per passione.
>Esistono tecnologie decisamente più interessanti e divertenti a giro.

sono tutt'orecchi! Basta che non sia php, che trovo astruso.

>Ecco una versione molto spartana (che usa jquery) del concetto:

wwwWWWWOOOWWWWW!!!
Bellissimo! Funziona (quasi!) alla grande!

Bisogna ora risolvere due problemucci:

1) ho bisogno di passare l'ID del record modificato (per la pagina
"update.asp).
Non voglio metterlo nella tabella (ho capito che solo così entra nel form),
ho
provato anche ad aggiungere un <td> con stile visibility: hidden, ma lo
spazio
per la cella appare comunque.
Come lo passo (ricorda che l'ID lo stampa, nella pagina, ASP)?

2) tutto l'ambaradan della domanda originale era per una VALIDAZIONE.
Siamo punto e a capo. Come mando in pasto i dati della riga editata alla
funzione di validazione, che è esterna alla funzione che mi hai passato?
Considera che il validatore, qualora entrasse in funzione, darebbe lui il
submit del form, e NON più la tua funzione, o no?
Quindi, a lume di naso, la funzione di validazione dovrebbe prendere
il posto del tuo: document.forms[0].submit();

La funzione di validazione è la seguente:

$(document).ready(function() {
$("#questoForm").validate({

rules: {
NOME: "required",
COGNOME: "required",

NASCITA: {
required: true,
dateITA: true
},
EMAIL: "email"

},
messages: {
NOME: "Inserisci il nome.",

COGNOME: "Inserisci il cognome.",
NASCITA: {
required: "Inserisci la data di nascita.",
dateITA: "La data valida &egrave; nel formato gg/mm/aaaa"
},
EMAIL: "Inserire una email valida"
}
});
});


grazie di nuovo, ciao
Nicola

Prego!

[nixs]

>> Credo che non funzionerebbe, in quanto la funzione jquery è fatta per
>> cercare un id.

>Sicuro? Hai provato?

ho provato, e ci sono riuscito!
Ho inserito il validatore in una funzione che gli
costruisce dinamicamente l'id del form da validare, così:

function Controlla(form_id) {
var j=0;
$("#updateForm" + form_id).validate({
...CUT

e poi nel pulsante di submit ho inserito: onclick="Controlla(<%= IDutente
%>);"

Ma dopo aver ricevuto il messaggio di ZERO ho cambiato,
per cercare di utilizzare quel metodo che mi mangia decine
di righe di codice.
Quindi per ora mi tengo la tua versione in caldo, da utilizzare nel caso la
seconda fallisse. ;-))

Ciao e grazie
Nicola

[ZER0]

On 27/03/12 19:31 , nixs wrote:

>> Personalmente neanche ti consiglierei, di imparare .NET, soprattutto se
>> non sei vincolato dal lavoro a tale tecnologia, ma lo fai per passione.
>> Esistono tecnologie decisamente più interessanti e divertenti a giro.

> sono tutt'orecchi! Basta che non sia php, che trovo astruso.

>> Ecco una versione molto spartana (che usa jquery) del concetto:

> 1) ho bisogno di passare l'ID del record modificato (per la pagina
> "update.asp).
> Non voglio metterlo nella tabella (ho capito che solo così entra nel
> form),

Assolutamente no, anzi:

<script>
$(function() {
var editable = $("#editable");
var current = null;
var inputs = editable.find("input");

var form = document.forms[0];
var txtID = form.txtID;

$("a[href=#save]").click(function(event) {
form.submit();

event.preventDefault();
});

$("a[href=#edit]").click(function(event) {
if (current)
current.show();

current = $(event.target).closest("tr");
current.hide();

// 7 è la lunghezza "record-", il prefisso dell'ID
// Nota che un ID HTML non può iniziare con un valore
// numerico, per questo un prefisso è necessario.
// Inoltre lo rende meno soggetto a possibili duplicati,
// Dato che un ID deve essere anche univoco (come dice
// il nome).
txtID.value = current[0].id.substr(7);

var cells = current[0].cells;

for (var i = 0; i < inputs.length; i++)
inputs[i].value = cells[i].firstChild.nodeValue;
editable[0].cells[0].firstChild.nodeValue =
cells[0].firstChild.nodeValue;

editable.insertBefore(current);
editable.show();

event.preventDefault();
});
})
</script>
<form method="GET">

<input type="hidden" name="txtID" />

<table border="1" >
<thead>
<tr>

<th>Name</th><th>Description</th>
</tr>
</thead>
<tbody>

<tr id="record-1234">

<td>Foo</td><td>That's foo!</td><td><a
href="#edit">edit</a></td>
</tr>

<tr id="record-5678">

<td>Bar</td><td>That's bar!</td><td><a
href="#edit">edit</a></td>
</tr>
<tr id="editable" style="display:none">

<td><input name="txtName" /></td>
<td><input name="txtDescription" /></td>
<td><a href="#save">save</a></td>
</tr>
</tbody>
</table>
</form>

> 2) tutto l'ambaradan della domanda originale era per una VALIDAZIONE.
> Siamo punto e a capo.

Ni, abbiamo un punto di partenza più chiaro. ;)

> funzione di validazione, che è esterna alla funzione che mi hai passato?
> Considera che il validatore, qualora entrasse in funzione, darebbe lui il
> submit del form, e NON più la tua funzione, o no?
> Quindi, a lume di naso, la funzione di validazione dovrebbe prendere
> il posto del tuo: document.forms[0].submit();

Come ti ho scritto, non so come tale validazione funzioni. Se, come
dici, il submit lo fa tale funzione, allora si, devi sostituire il
metodo `submit` di cui sopra.

> La funzione di validazione è la seguente:

> $(document).ready(function() {

In questo caso non ne hai bisogno, ma per il futuro: puoi usare la
versione "breve" di jquery:

$(function() {

> $("#questoForm").validate({
> rules: {
> NOME: "required",
> COGNOME: "required",
> NASCITA: {
> required: true,
> dateITA: true
> },
> EMAIL: "email"
> },
> messages: {
> NOME: "Inserisci il nome.",
> COGNOME: "Inserisci il cognome.",
> NASCITA: {
> required: "Inserisci la data di nascita.",
> dateITA: "La data valida &egrave; nel formato gg/mm/aaaa"
> },
> EMAIL: "Inserire una email valida"
> }
> });

Ecco, questa è l'unica parte che devi mettere al posto della chiamata
`submit`. Ti suggerisco di mettere l'oggetto che rappresenta le opzioni
di validazione fuori però. Tipo assieme/dopo le variabili che ho
definito nel mio codice:

// ..
var form = document.forms[0];
var txtID = form.txtID;
var validateOptions = {
rules : // ..
};

E poi:

$("a[href=#save]").click(function(event) {
$(form).validate(validateOptions);
event.preventDefault();
});

[nixs]

>Assolutamente no, anzi:

no, non mi funziona, le ho provate tutte, anche la modifica di questa:

>// 7 è la lunghezza "record-", il prefisso dell'ID
>// Nota che un ID HTML non può iniziare con un valore
>// numerico, per questo un prefisso è necessario.
>// Inoltre lo rende meno soggetto a possibili duplicati,
>// Dato che un ID deve essere anche univoco (come dice
>// il nome).
>txtID.value = current[0].id.substr(7);

che forse dovrebbe essere:
txtID.value = current[0].id.substr(8);
cioè "ad iniziare dall'8° carattere, no?

Ho pensato:
Siccome il mio form è così:
<form action="insert.asp?g=<%= gruppo %>" id="myForm" name="myForm"
method="post">

Non puoi fare in modo che JS "appenda" nella action, al submit, la stringa
dell'id:
<form action="insert.asp?g=<%= gruppo %>&id=8567" id="myForm" name="myForm"
method="post">
si può fare?

>Come ti ho scritto, non so come tale validazione funzioni. Se, come
>dici, il submit lo fa tale funzione, allora si, devi sostituire il
>metodo `submit` di cui sopra.

penso sia così, nello script del plugin si trova:
if ( valid && this.pendingRequest == 0 && this.formSubmitted &&
this.form() ) {
$(this.currentForm).submit(); <------- qui il submit???
this.formSubmitted = false;
} else if (!valid && this.pendingRequest == 0 && this.formSubmitted) {
$(this.currentForm).triggerHandler("invalid-form", [this]);
this.formSubmitted = false;

}


>Ecco, questa è l'unica parte che devi mettere al posto della chiamata
>`submit`. Ti suggerisco di mettere l'oggetto che rappresenta le opzioni
>di validazione fuori però. Tipo assieme/dopo le variabili che ho
>definito nel mio codice:

di questo ne riparliamo quando funzionerà la prima parte ;-))

Ciao
Nicola

[ZER0]

On 28/03/12 24:08 , nixs wrote:

>> Assolutamente no, anzi:

> no, non mi funziona, le ho provate tutte, anche la modifica di questa:

Come dico sempre "non mi funziona" non vuol dire granché, si ottengono
sempre dei risultati, solo che magari non sono quelli desiderati.

Ad esempio, che browser stai usando per i test? Cosa ti dice la sua
error console? Può darsi tu abbia un errore di codice durante
l'esecuzione che preclude l'esecuzione di codice successivo.

>> txtID.value = current[0].id.substr(7);

> che forse dovrebbe essere:
> txtID.value = current[0].id.substr(8);
> cioè "ad iniziare dall'8° carattere, no?

No. Lo puoi verificare da te:

alert("record-1".substr(7));

> Ho pensato:
> Siccome il mio form è così:
> <form action="insert.asp?g=<%= gruppo %>" id="myForm" name="myForm"
> method="post">

Non usare mai ID e name uguale. Primo, hanno due significati diversi (ID
deve essere univoco, name può essere multiplo), secondo su IE puoi avere
comportamenti anomali in certi casi.

> Non puoi fare in modo che JS "appenda" nella action, al submit, la
> stringa dell'id:

Faresti solo un macello, e non ne hai bisogno. Prendi il codice che ti
ho dato, scrivilo in un file ex novo, aggiungi un tag <script> che punta
a jquery, e provalo. Dato che il metodo è in GET, cliccando su `save`
dovresti vedere i dati che invierebbe all'ipotetico server sulla barra
degli indirizzi. Se non c'è `txtID` tra quelli, e ci sono i restanti,
allora c'è un problema con quel codice e il browser con il quale lo stai
testando, e vedremo di risolverlo.

Altrimenti è un problema di implementazione con il tuo codice già
esistente: o hai fatto un errore nel riscriverlo oppure `validate` non
si comporta come ti aspetti.

> penso sia così, nello script del plugin si trova:
> if ( valid && this.pendingRequest == 0 && this.formSubmitted &&
> this.form() ) {
> $(this.currentForm).submit(); <------- qui il submit???

Sembrerebbe di si, ovviamente bisogna vedere se passa da queste
condizioni. Prova a mettere un `alert` o un `console.log` (che vedi
dalla web console) e vediamo cosa ti risponde.

[nixs]

Ti sono grato per la tua disponibilità...

> Come dico sempre "non mi funziona" non vuol dire granché, si ottengono
> sempre dei risultati, solo che magari non sono quelli desiderati.

si, i risultati ci sono, il sistema funziona perfettamente, mostra
correttamente
le righe della tabella, le edita con i campi input, spedisce il form alla
pagina "update.asp", che riceve correttamente TUTTI i dati della riga
selezionata, TRANNE l'id, che è assente.
Io uso il POST, ho provato con GET e nella qerystring manca solo l'ID.
Ti dico anche che ancora non ho integrato il Validation per il form,
quindi la funzione è esattamente come me l'hai passata.

Ho provato anche a inserire dopo:
txtID.value = current[0].id.substr(10);
questo:
alert(txtID.value);
Mi apre la finestra, ma è vuota.

> Ad esempio, che browser stai usando per i test? Cosa ti dice la sua
> error console? Può darsi tu abbia un errore di codice durante
> l'esecuzione che preclude l'esecuzione di codice successivo.

come ho detto la procedura funziona, il browser è Maxthon 3 (web-kit)
e la console non la so utilizzare, troppi comandi.

> No. Lo puoi verificare da te:
> alert("record-1".substr(7));

ok, verificato, è come dici tu.

> Faresti solo un macello, e non ne hai bisogno.

perchè? già passo un dato con qs, sarebbe molto semplice
gestire anche l'id

> Altrimenti è un problema di implementazione con il tuo codice già
> esistente: o hai fatto un errore nel riscriverlo oppure `validate` non
> si comporta come ti aspetti.

come detto non ho ancora utilizzato la validazione e la funzione che
mi hai dato è scritta così:

$(function() {
var editable = $("#editable");
var current = null;
var inputs = editable.find("input");

var myform = document.forms[1]; <--- è 1 perchè prima c'è un altro form
var txtID = myform.IDutente;

$("a[href=#save]").click(function(event) {
myform.submit();

event.preventDefault();
});

$("a[href=#edit]").click(function(event) {
if (current) {
current.show();
}
current = $(event.target).closest("tr");
current.hide();

txtID.value = current[0].id.substr(10);

var cells = current[0].cells;

for (var i = 0; i < inputs.length; i++) {
inputs[i].value = cells[i].firstChild.nodeValue;
editable[0].cells[0].firstChild.nodeValue =
cells[0].firstChild.nodeValue;

editable.insertBefore(current);
editable.show();

event.preventDefault();
}
});
})

Mentre l'html:
<form action="update.asp?gruppo=<%= IDclasse %>" id="updateForm"
name="updateForm" method="post">
....qui ho messo il campo hidden con id=IDutente:
<input type="hidden" name="IDutente" id="IDutente" value="" />

....continua con la costruzione della tabella dati

....la prima <td> è quella che dovrebbe contenere l'ID:
<td id="IDutente<%= IDutente %>"><%= i %></td>
(visualizzando l'HTML della pagina caricata effettivamente c'è l'ID
nella forma IDutente123

....poi l'ultima <td> contiene:
<a href="#edit" title="Modifica">Modifica</a>
<a href="javascript:conferma('<br>ATTENZIONE! Il nominativo verr&agrave;
eliminato.<br><br><img src=\'../images/alert_small.png\' width=\'32\'
height=\'32\' alt=\'\' align=\'left\' /><h3 style=\'padding-top:5px;\'>&nbsp;Confermila cancellazione?</h3><br>', 'delete.asp?gruppo=<%= gruppo %>&id=<%=
IDutente %>');" title="Cancella dalla lista"><img
src="../images/cancella.gif" alt="Cancella" name="Cancella" /></a>

...poi la <tr>:

<tr id="editable" style="display:none">

...e infine l'ultima <td> contiene:
<td><a href="#save" title="Salva variazioni" name="Salva
variazioni">Salva</a>



Ciao
Nicola

[nixs]

> Mentre l'html:
> <form action="update.asp?gruppo=<%= IDclasse %>" id="updateForm"
> name="updateForm" method="post">

Scusa, qui c'è un refuso, è da intendere:

> <form action="update.asp?gruppo=<%= gruppo %>" id="updateForm"
> name="updateForm" method="post">

Ciao
Nicola

[ZER0]

On 28/03/12 19:19 , nixs wrote:

> Ti sono grato per la tua disponibilità...

> si, i risultati ci sono, il sistema funziona perfettamente, mostra
> correttamente
> le righe della tabella, le edita con i campi input, spedisce il form alla
> pagina "update.asp", che riceve correttamente TUTTI i dati della riga
> selezionata, TRANNE l'id, che è assente.

Se non dai un'occhiata alla Web Console – e spulciando più avanti mi
pare tu non l'abbia fatto – non puoi sapere se il "sistema funziona
perfettamente".

> Io uso il POST, ho provato con GET e nella qerystring manca solo l'ID.

Ottimo, quindi hai introdotto qualche differenza rispetto al codice che
ti ho dato, oppure è il browser. Se hai provato, come ti ho detto, a
eseguire quel codice come pagina "stand alone" si dovrebbe comportare
correttamente. Se non lo fa, è il browser.
Mi pare che questa informazione tu non me l'abbia fornita, per
semplicità ti ho copiato io il codice in questa pagina:

<http://beats.daily.it/iclj/record.htm>

Vedi un po' come si comporta.

> Ho provato anche a inserire dopo:
> txtID.value = current[0].id.substr(10);
> questo:
> alert(txtID.value);
> Mi apre la finestra, ma è vuota.

Quindi è probabile che vi sia un errore da queste parti. ad esempio,
cosa succede se fai:

alert(current[0])
alert(current[0].id)

?

>> Ad esempio, che browser stai usando per i test? Cosa ti dice la sua
>> error console? Può darsi tu abbia un errore di codice durante
>> l'esecuzione che preclude l'esecuzione di codice successivo.

> come ho detto la procedura funziona,

La procedura "non funziona", nel senso che non ti da il risultato che
dovrebbe darti. Il che significa che c'è un errore da qualche parte, o
nel codice, o da parte del browser.

> il browser è Maxthon 3 (web-kit)
> e la console non la so utilizzare, troppi comandi.

Non devi "saperla utilizzare", non necessariamente, devi solo aprirla: i
messaggi di errore li vedrai lì (cerca Web Console o Error Console tra i
menù).

>> No. Lo puoi verificare da te:
>> alert("record-1".substr(7));
>
> ok, verificato, è come dici tu.

;)

>> Faresti solo un macello, e non ne hai bisogno.

> perchè? già passo un dato con qs, sarebbe molto semplice
> gestire anche l'id

Perché i dati che mandi in querystring e quelli che mandi come body
della request sono due cose distinte, e non si dovrebbero mischiare. I
dati in QueryString dovrebbero essere usati solo con GET non POST.

>> Altrimenti è un problema di implementazione con il tuo codice già
>> esistente: o hai fatto un errore nel riscriverlo oppure `validate` non
>> si comporta come ti aspetti.

> come detto non ho ancora utilizzato la validazione e la funzione che
> mi hai dato è scritta così:

L'ho messa come una delle possibile opzioni infatti, non come unica.

>
> $(function() {
> var editable = $("#editable");
> var current = null;
> var inputs = editable.find("input");
> var myform = document.forms[1]; <--- è 1 perchè prima c'è un altro form

Puoi anche usare l'id per recuperare il form oppure il name.

> var txtID = myform.IDutente;

Puoi anche verificare che punti all'elemento corretto:

alert(txtID);

Cosa restituisce?

> Mentre l'html:
> <form action="update.asp?gruppo=<%= IDclasse %>" id="updateForm"
> name="updateForm" method="post">
> ....qui ho messo il campo hidden con id=IDutente:
> <input type="hidden" name="IDutente" id="IDutente" value="" />

Come ti ho già spiegato, non si dovrebbe usare attributo name e ID
uguale. Ma a parte questo, non dovrebbe esserci niente di sbagliato.

> ....la prima <td> è quella che dovrebbe contenere l'ID:
> <td id="IDutente<%= IDutente %>"><%= i %></td>

Ecco l'errore. L'ID nell'ultimo codice che ti ho fornito, quello senza
l'ID visibile, non stava nel TD bensì nel TR.

> (visualizzando l'HTML della pagina caricata effettivamente c'è l'ID
> nella forma IDutente123

Si, ma è nell'elemento sbagliato.
Prova a correggere questo punto, e dovrebbe andare – a meno di altri
errori e/o differenze nel browser.

[nixs]

>> ....la prima <td> è quella che dovrebbe contenere l'ID:
>> <td id="IDutente<%= IDutente %>"><%= i %></td>

>Ecco l'errore. L'ID nell'ultimo codice che ti ho fornito, quello senza
>l'ID visibile, non stava nel TD bensì nel TR.

CAXXO CAXXO CAXXO CAXXO CAXXO

FUNZIONA!

Aspe'... non te ne andare che mo' si prova col validatore!
;-))

[nixs]

> Aspe'... non te ne andare che mo' si prova col validatore!

niente, le ho provate tutte... non riesco a far validare il form

penso che la funzione del plugin venga attivata da un evento
submit di un pulsante submit

ho provato di tutto, modificare la tua funzione inglobando
quella del plugin come tu mi hai suggerito, ma nulla

forse qui c'è qualche notizia utile:
http://docs.jquery.com/Plugins/Validation#Validate_forms_like_you.27ve_never_been_validating_before.21

Ciao
Nicola

[ZER0]

On 29/03/12 12:44 , nixs wrote:

> ho provato di tutto, modificare la tua funzione inglobando
> quella del plugin come tu mi hai suggerito, ma nulla

Come ti ho detto, non avendo idea di come funzioni il plugin mi rimane
difficile dirti come fare, ma...

> forse qui c'è qualche notizia utile:
> http://docs.jquery.com/Plugins/Validation#Validate_forms_like_you.27ve_never_been_validating_before.21

...Ora che vedo come funziona, credo che la soluzione sia la seguente:

$(function() {
var editable = $("#editable");
var current = null;
var inputs = editable.find("input");

var form = document.forms[1];
var txtID = form.IDutente;

$(form).validate(/* .. le tue regole */);

$("a[href=#save]").click(function(event) {
form.submit();
event.preventDefault();
});

Se così non funziona, puoi sempre trasformare il link di `save` in un
pulsante di submit.

Let me know.

[nixs]

> ...Ora che vedo come funziona, credo che la soluzione sia la seguente:

no, niente, lo ignora completamente, mentre la tua funzione svolge
perfettamente il suo lavoro.

> Se così non funziona, puoi sempre trasformare il link di `save` in un
> pulsante di submit.

mi andrebbe bene, ma se sostituisco questo:
<a href="#save">Salva</a> con un submit, devo anche eliminare
tutta la parte corrispondente a #save nella tua funzione?

Avendo ora adottato il tuo metodo di editing, la validazione diventa
NECESSARIA, in quanto ho notato che se l'utente cancellasse completamente
il contenuto di un campo e poi salva, il risultato è un macello, forse
perchè la funzione shifta i contenuti dei campi dopo il salvataggio.

Inoltre, ravanando nel file js del validatore, ho trovato questo che
può essere interessante:

if ( validator.settings.onsubmit ) {
var inputsAndButtons = this.find("input, button");

// allow suppresing validation by adding a cancel class to the submit
button
inputsAndButtons.filter(".cancel").click(function () {
validator.cancelSubmit = true;
});

// when a submitHandler is used, capture the submitting button
if (validator.settings.submitHandler) {
inputsAndButtons.filter(":submit").click(function () {
validator.submitButton = this;
});
}

// validate the form on submit
this.submit( function( event ) {
if ( validator.settings.debug )
// prevent form submit to be able to see console output
event.preventDefault();

function handle() {
if ( validator.settings.submitHandler ) {
if (validator.submitButton) {
// insert a hidden input as a replacement for the missing submit
button
var hidden = $("<input type='hidden'/>").attr("name",
validator.submitButton.name).val(validator.submitButton.value).appendTo(validator.currentForm);
}
validator.settings.submitHandler.call( validator,
validator.currentForm );
if (validator.submitButton) {
// and clean up afterwards; thanks to no-block-scope, hidden can be
referenced
hidden.remove();
}
return false;
}
return true;
}

[ZER0]

On 29/03/12 14:21 , nixs wrote:
>> ...Ora che vedo come funziona, credo che la soluzione sia la seguente:

> no, niente, lo ignora completamente, mentre la tua funzione svolge
> perfettamente il suo lavoro.

Allora forse ha bisogno di un pulsante di submit. Rimuovi questa parte:

$("a[href=#save]").click(function(event) {
form.submit();
event.preventDefault();
});

E invece di:

<td><a href="#save">save</a></td>

Scrivi:

<td><input type="submit" value="save" /></td>

Ovviamente lasciando:

$(form).validate(/* .. */);

In testa come da modifica precedente.

> Avendo ora adottato il tuo metodo di editing, la validazione diventa
> NECESSARIA, in quanto ho notato che se l'utente cancellasse completamente
> il contenuto di un campo e poi salva, il risultato è un macello, forse
> perchè la funzione shifta i contenuti dei campi dopo il salvataggio.

Mhm? Non capisco il mio codice non "shifta" alcun contenuto. Se l'utente
cancella un campo questo viene inviato al server. Poi dipende da
quest'ultimo, come gestisce il campo vuoto e genera l'HTML di conseguenza.

Ricorda comunque di rispettare la regola d'oro della validazione dati:
quella lato client è opzionale, quella lato server è obbligatoria.
Si valida i dati lato client solo per offrire un'esperienza utente più
piacevole ed amichevole, non per una questione di sicurezza o altro. I
dati vanno comunque sempre e comunque validati sul server, perché non
puoi fidarti di ciò che il client ti invia, mai.

[nixs]

> Allora forse ha bisogno di un pulsante di submit. Rimuovi questa parte:

> E invece di:

> Scrivi:
> <td><input type="submit" value="save" /></td>

provato, come prima, ma in più si verifica una cosa nuova e strana:

malgrado io inserisca <input type="submit" value="save" />

vedo il pulsante, funziona come prima (salva le modifiche ma senza
validarle),
ma, sul pulsante, invece che scritto "save" c'è scritto "Invia" mah... (???)

> Mhm? Non capisco il mio codice non "shifta" alcun contenuto. Se l'utente
> cancella un campo questo viene inviato al server. Poi dipende da
> quest'ultimo, come gestisce il campo vuoto e genera l'HTML di conseguenza.

Sarà difficile, ma cerco di descrivere la situazione al ritorno nella pagina
dopo aver effettuato la modifica di un campo (cancellandolo completamente).

Situazione nell'HTML: la pagina risulta scritta bene, manca solo
il dato cancellato dall'utente nel secondo <td>

Situazione a schermo:
Al ritorno dal salvataggio, nella riga dove il dato è stato precedentemente
cancellato non appare nulla nella cella (come dovrebbe), ma quando clicco su
"modifica" della stessa riga solo il primo campo contiene il dato, dal
secondo (quello vuoto) all'ultimo della riga sono invece vuoti.
Se continuo cliccando sulla riga precedente "modifica" tutto ok, ma se
poi torno nella riga modificata, questa volta mi mostra nei campi prima
vuoti i dati della riga precedente, e così via.

Quindi, se la tabella HTML è scritta bene, il macello lo fa la funzione
quando "rileva" i dati dell'HTML, dico bene?

Ciao
Nicola

[nixs]

dimenticavo:
la cosa si verifica in IE9, Maxthon 3, Firefox e Chrome

Ciao
Nicola

[ZER0]

On 29/03/12 15:17 , nixs wrote:

>> Allora forse ha bisogno di un pulsante di submit. Rimuovi questa parte:
>> E invece di:
>> Scrivi:
>> <td><input type="submit" value="save" /></td>

> provato, come prima,

Allora, ancora, c'è qualche errore che hai introdotto o preesistente nel
tuo codice. Ho provato ad applicare le modifiche che ti ho suggerito sul
file che avevo messo online, e funziona tutto perfettamente. Puoi
provare tu stesso:

<http://beats.daily.it/iclj/record.htm>

La validazione, come puoi vedere dal sorgente, è fatta solo sul primo
campo (txtName) che è "required" (quindi se cancelli il testo la form
non viene inviata).

> malgrado io inserisca <input type="submit" value="save" />

> vedo il pulsante, funziona come prima (salva le modifiche ma senza
> validarle),
> ma, sul pulsante, invece che scritto "save" c'è scritto "Invia" mah...
> (???)

Questo perché è un `input`. Il `value` è ciò che invia al server, se
vuoi averlo anche come valore su schermo usa un `button` invece:

<button type="submit" value="save">save</button>

>> Mhm? Non capisco il mio codice non "shifta" alcun contenuto. Se l'utente
>> cancella un campo questo viene inviato al server. Poi dipende da
>> quest'ultimo, come gestisce il campo vuoto e genera l'HTML di
>> conseguenza.
>
> Sarà difficile, ma cerco di descrivere la situazione al ritorno nella
> pagina
> dopo aver effettuato la modifica di un campo (cancellandolo completamente).
>
> Situazione nell'HTML: la pagina risulta scritta bene, manca solo
> il dato cancellato dall'utente nel secondo <td>

Quindi significa che il problema è lato server: accetti il dato anche se
è vuoto, lo salvi sul DB, e poi lo ripresenti a schermo.

E da quanto ho capito, ciò non dovrebbe essere possibile – dato che lato
client questa possibilità non dovrebbe esserci, ovvero l'utente non può
inserire un campo vuoto.

> Situazione a schermo:
> Al ritorno dal salvataggio, nella riga dove il dato è stato precedentemente
> cancellato non appare nulla nella cella (come dovrebbe),
> ma quando clicco su
> "modifica" della stessa riga solo il primo campo contiene il dato, dal
> secondo (quello vuoto) all'ultimo della riga sono invece vuoti.
> Se continuo cliccando sulla riga precedente "modifica" tutto ok, ma se
> poi torno nella riga modificata, questa volta mi mostra nei campi prima
> vuoti i dati della riga precedente, e così via.

Se osservassi la Web Console, capiresti subito dov'è l'errore.

> Quindi, se la tabella HTML è scritta bene, il macello lo fa la funzione
> quando "rileva" i dati dell'HTML, dico bene?

Non proprio. Da quel che mi dici la tabella non è scritta bene, a naso
direi che se la stringa è vuota hai un <td> senza contenuto, mentre
invece dovresti avere un <td> con un contenuto, anche vuoto. Ad esempio,
invece di avere:

<td></td>

Dovresti avere:

<td>
</td>

O:

<td>&nbsp;</td>

O qualsiasi altra cosa:

<td>-</td>

etc.

Avere celle "vuote" crea problemi anche di rendering (a meno che non
sfrutti l'empty-cells da CSS). Se non vuoi aggiungere un contenuto
(anche vuoto, come in uno degli esempi) puoi optare per una chiamata a
jQuery – avevo iniziato una filippica su `textContent` e `innerText` e
il differente supporto da parte dei browser, ma poi mi sono ricordato
che usi jQuery, e tanto vale. Quindi invece di:

for (var i = 0; i < inputs.length; i++)
inputs[i].value = cells[i].firstChild.nodeValue;

Puoi avere:

for (var i = 0; i < inputs.length; i++)

inputs[i].value = $.text(cells[i]);

Mi sono anche dimenticato di dirti che la riga dopo:

editable[0].cells[0].firstChild.nodeValue =
cells[0].firstChild.nodeValue;

Adesso che non hai l'ID a schermo è totalmente inutile e puoi rimuoverla.

[nixs]

ore di prove!

Un passo in avanti c'è.

Dunque, inserendo la funzione di validazione nella tua funzione come
mi hai consigliato, in effetti funziona, ma...

1) cosa:
Solo che NON blocca il submit in caso di mancata validazione, così che
io non riuscivo a vedere il messaggio di errore di validazione per quanto
rapidamente
mi salvava e ritornava alla pagina.
Ho inserito subito prima di myform.submit(); un return; e magicamente ho
visto il
messaggio del validatore.

2) cosa:
La validazione funziona con un errore nell'indirizzo email, ad esempio
eliminando @
oppure non inserendo il .xx alla fine, oppure ancora non inserendo la data
nel formato
giusto nel campo data.
Ma non da' segnali se cancello COMPLETAMENTE il contenuto di uno dei campi
con
regola di validazione REQUIRED (e questo, naturalmente, mi impediva anche di
sapere
se il validatore funzionava)

Ciao
Nicola

[nixs]

>Allora, ancora, c'è qualche errore che hai introdotto o preesistente nel
>tuo codice. Ho provato ad applicare le modifiche che ti ho suggerito sul
>file che avevo messo online, e funziona tutto perfettamente. Puoi
>provare tu stesso:
<http://beats.daily.it/iclj/record.htm>

Vedo, purtroppo :-((
Ma leggi il messaggio su nuovo tread

>Questo perché è un `input`. Il `value` è ciò che invia al server, se
>vuoi averlo anche come valore su schermo usa un `button` invece:
<button type="submit" value="save">save</button>

ok

>Quindi significa che il problema è lato server: accetti il dato anche se
>è vuoto, lo salvi sul DB, e poi lo ripresenti a schermo.

beh... il server fa il suo sporco lavoro, se non c'è nulla scrive nulla, e
il campo del db è fatto per accettare anche nulla.
Questo perchè io contavo proprio sul validatore.

>E da quanto ho capito, ciò non dovrebbe essere possibile – dato che lato
>client questa possibilità non dovrebbe esserci, ovvero l'utente non può
>inserire un campo vuoto.

Esatto, e come ti ho scritto nell'altro messaggio, il validatore entra in
funzione
su errori di formato ma non su campo vuoto.
Tieni presente che valido altri form con lo stesso validatore e stessa
condizione
ma funziona perfettamente.

>Se osservassi la Web Console, capiresti subito dov'è l'errore.

Eh... se tu mi insegnassi... io osservassi e capiressi :-))))

>Non proprio. Da quel che mi dici la tabella non è scritta bene, a naso
>direi che se la stringa è vuota hai un <td> senza contenuto, mentre
>invece dovresti avere un <td> con un contenuto, anche vuoto. Ad esempio,
>invece di avere:

questa cosa mi è nuova, il browser non ci mette nulla perchè nel db non
trova nulla. Poi, se questo significa che quando salvo i dati devo
controllare
il nulla e devo salvare uno spazio è un altro paio di maniche.

ciao
nicola

[ZER0]

On 29/03/12 18:45 , nixs wrote:

>> Allora, ancora, c'è qualche errore che hai introdotto o preesistente nel
>> tuo codice. Ho provato ad applicare le modifiche che ti ho suggerito sul
>> file che avevo messo online, e funziona tutto perfettamente. Puoi
>> provare tu stesso:
> <http://beats.daily.it/iclj/record.htm>

> Vedo, purtroppo :-((
> Ma leggi il messaggio su nuovo tread

Ho letto, ma ho timore tu stia complicando le cose. Di default la
funzione di validazione si aggancia al submit, puoi sovrascrivere tale
comportamento ma è un lavoro in più, quindi è bene evitare di fare
`form.submit()` e usare un pulsante come s'è detto.

Hai un esempio funzionante – quello di cui sopra – cerca di prenderlo
per capire cosa c'è che non funziona nel tuo.

>> Quindi significa che il problema è lato server: accetti il dato anche se
>> è vuoto, lo salvi sul DB, e poi lo ripresenti a schermo.

> beh... il server fa il suo sporco lavoro, se non c'è nulla scrive nulla, e
> il campo del db è fatto per accettare anche nulla.
> Questo perchè io contavo proprio sul validatore.

Eh, ma non ci puoi contare. A prescindere, anche se fai una validazione
coi fiocchi e perfettamente funzionante sul client, *devi* avere la
validazione sul server perché non puoi fidarti mai di ciò che fa il
client, mentre invece hai il controllo del server. Come ti ho già detto
– e puoi cercare su web, negli archivi di questo NG, etc se vuoi aver
maggiori riscontri – se c'è una validazione opzionale è quella sul
client non quella sul server. Quella sul server va fatta a priori, poi
puoi migliorare l'esperienza utente aggiungendo una validazione client-side.
La gente che si fidò solo della validazione client è la stessa che poi
una decina di anni fa si scottò con il SQL Injection.

>> E da quanto ho capito, ciò non dovrebbe essere possibile – dato che lato
>> client questa possibilità non dovrebbe esserci, ovvero l'utente non può
>> inserire un campo vuoto.
>
> Esatto, e come ti ho scritto nell'altro messaggio, il validatore entra
> in funzione
> su errori di formato ma non su campo vuoto.

Nel mio esempio, quello online, io ho fatto il controllo solo di campo
vuoto e funziona benissimo. Non puoi provare a confrontare i due codici
e capire cosa non va? Io purtroppo il tuo codice non ce l'ho da
debuggare, quel che ti ho detto è corretto, e funziona, non so cos'altro
poter fare così alla cieca.

>> Se osservassi la Web Console, capiresti subito dov'è l'errore.
>
> Eh... se tu mi insegnassi... io osservassi e capiressi :-))))

Basta aprirla. Cerca nei menù del tuo browser JavaScript Console o Web
Console, e aprila. Se c'è un errore, te lo mostra li.

Questo magari può aiutarti, almeno per ciò che riguarda Firefox:

<https://developer.mozilla.org/en/Using_the_Web_Console>

>> Non proprio. Da quel che mi dici la tabella non è scritta bene, a naso
>> direi che se la stringa è vuota hai un <td> senza contenuto, mentre
>> invece dovresti avere un <td> con un contenuto, anche vuoto. Ad esempio,
>> invece di avere:

> questa cosa mi è nuova, il browser non ci mette nulla perchè nel db non
> trova nulla.

Si, ma se te hai una cella senza niente non è esattamente una cella
vuota. Un <td></td> viene visualizzato come una cella mancante, non come
una cella vuota, ad esempio (come l'header della pagina d'esempio per la
colonna dei link di edit, per intenderci).

> Poi, se questo significa che quando salvo i dati devo
> controllare
> il nulla e devo salvare uno spazio è un altro paio di maniche.

No, non quando salvi, "il nulla" – ovvero stringa vuota – è un valore
ammesso a livello di DB, solo che quando lo prendi e lo devi
visualizzare come HTML, è allora che devi gestirlo a modo in una
tabella. Ad esempio se tu dicessi che i TD devono avere dei bordi, se
scrivessi delle celle "senza niente" non ti visualizzerebbe tali bordi,
perché, appunto, è come se il tag TD fosse assente in quel punto (a meno
appunto di non gestire l'empty-cells).

Non è fondamentale, ma rischi di avere comportamenti di codice e di
rendering inconsistenti.

[nixs]

>Ho letto, ma ho timore tu stia complicando le cose. Di default la
>funzione di validazione si aggancia al submit, puoi sovrascrivere tale
>comportamento ma è un lavoro in più, quindi è bene evitare di fare
>`form.submit()` e usare un pulsante come s'è detto.

Ti chiami ZERO, ma vali MILLE!!!

funziona!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
col pulsante ora funziona e valida tutto e tutti i campi.

Un ultimo sforzo e finiamo il lavoro (per ora!) ;-))

Succede una cosa che sicuramente (questa volta non puoi contaddirmi :-))
è attribuibile alla funzione che visualizza alternativamente il comando
modifica
con quello salva.

Siccome uso delle icone per il modifica, una per modifica e una per
cancellare il
record, oltretutto con una conferma popup, la funzione che fa:
quando visualizza il pulsante submit, evidentemente, ci infila dentro, in
qualche modo, tutta la roba della modifica, mostrandomi un pulsantone
di 10cm di lunghezza x 2 di altezza.
Infatti, se sostituisco le icone con il testo "Modifica", il pulsante di
submit è normale
ma... con dentro il testo "Modifica" al posto di Invia.

Mo' che faccio?

ciao
nicola

[ZER0]

On 29/03/12 21:44 , nixs wrote:

> Succede una cosa che sicuramente (questa volta non puoi contaddirmi :-))
> è attribuibile alla funzione che visualizza alternativamente il comando
> modifica con quello salva.

> Siccome uso delle icone per il modifica, una per modifica e una per
> cancellare il
> record, oltretutto con una conferma popup, la funzione che fa:
> quando visualizza il pulsante submit, evidentemente, ci infila dentro, in
> qualche modo, tutta la roba della modifica, mostrandomi un pulsantone
> di 10cm di lunghezza x 2 di altezza.

Non dipende tanto dalla funzione in sé, quanto dall'HTML che va a
toccare, quindi dipende in primis dalla struttura HTML che hai (questo è
chiaramente visibile dal fatto che nella pagina di esempio che ti ho
dato tutto funziona). Ovviamente puoi modificare la funzione in base
alle tue esigenze, oltre che sistemare l'HTML.

Dato che non so esattamente qual'è l'HTML che hai adesso, faccio delle
ipotesi, ma ho bisogno di qualche risposta:
a) Le immagini che tag sono? IMG, INPUT, etc.
b) Le immagini di modifica e cancella stanno dentro lo stesso TD ho
hanno un TD per ciascuna?
c) La riga "editable" che serve a editare le altre righe, rispecchia
*esattamente* la struttura delle altre righe? Ha lo stesso numero di TD?
d) Il pulsante di submit che salva i dati è un tag INPUT o BUTTON?

> Mo' che faccio?

Potresti cercare di analizzare la funzione che ti ho dato, e capire cosa
fa, e come interagisce con l'HTML della pagina.
A quel punto dovresti essere in grado di capire come mai il codice
originale nell'HTML originale non da alcun problema, e invece posto
nell'HTML che hai da quel genere di risultato.

[nixs]

"ZER0" ha scritto nel messaggio
news:4F75FB23...@ID-171124.news.individual.net...

>a) Le immagini che tag sono? IMG, INPUT, etc.
>b) Le immagini di modifica e cancella stanno dentro lo stesso TD ho
>hanno un TD per ciascuna?
>c) La riga "editable" che serve a editare le altre righe, rispecchia
>*esattamente* la struttura delle altre righe? Ha lo stesso numero di TD?
>d) Il pulsante di submit che salva i dati è un tag INPUT o BUTTON?

la tabella è perfettamente coerente, 8 celle per ogni riga:
n. progressivo, Cognome, Nome, Nascita, Email, Username, Password, "Azioni".

tante righe per quanti record tira fuori dal recordset + riga fissa fuori
ciclo
<tr id="editable" style="display:none;">

nella cella "Azioni" ho:

do VBS (righe ciclo su recordset)
<tr id="IDutente<%= IDutente %>">
... (prime 7 celle) ...
<td>
<a href="#edit">
<img src="../images/modifica.gif" alt="Modifica" name="Modifica"
/></a>&nbsp;&nbsp;&nbsp; <a href="javascript:conferma('<br />ATTENZIONE! Il
nominativo verr&agrave; eliminato.<br /><br /><img

src=\'../images/alert_small.png\' width=\'32\' height=\'32\' alt=\'\'
align=\'left\' /><h3 style=\'padding-top:5px;\'> &nbsp;Confermi la

cancellazione?</h3><br>', 'delete.asp?gr=<%= IDgruppo %>&id=<%= IDutente

%>');" title="Cancella dalla lista"><img src="../images/cancella.gif"
alt="Cancella" name="Cancella" />
</a>

</td>
</tr>
loop VBS

riga FISSA finale (no-loop)
<tr id="editable" style="display:none;">
... (prime 7 celle con i campi input) ...
<td>
<input type="submit" class="submit" />
</td>
</tr>

>Potresti cercare di analizzare la funzione che ti ho dato, e capire cosa
>fa, e come interagisce con l'HTML della pagina.
>A quel punto dovresti essere in grado di capire come mai il codice
>originale nell'HTML originale non da alcun problema, e invece posto
>nell'HTML che hai da quel genere di risultato.

ci provo, intanto, ma non sono abbastanza pratico di js per arrivarci:

secondo me è qui che fa lo scambio

for (var i = 0; i < inputs.length; i++) { //per un numero di volte pari
al numero di input
inputs[i].value = $.text(cells[i]); //inserisci nei campi il
testo nelle celle

editable.insertBefore(current); //sposta editable nella riga
corrente?
editable.show(); //mostra editable

leggo giusto?

Se si allora è questo che mi crea dubbi:
inputs[i].value = $.text(cells[i]); //inserisci nei campi il testo nelle
celle

Non è che prende il malloppo della cella "Azioni" ( $.text(cells[i]); )
e lo inserisce nell'input (inputs[i].value ), che in questo caso è un
pulsante?



Ciao
Nicola

[ZER0]

On 30/03/12 22:12 , nixs wrote:

> <td>
> <a href="#edit">
> <img src="../images/modifica.gif" alt="Modifica" name="Modifica"
> /></a>&nbsp;&nbsp;&nbsp;

Non usare gli "spazi" per indentare, ma i CSS. Puoi dare una classe CSS
ai tuoi pulsanti / link / immagini dicendo i margini che devono avere
l'un l'altro.

<a href="javascript:conferma(

Non usare lo pseudo protocollo javascript:, come anche in un recente
thread è stato fatto notare, al giorno d'oggi è praticamente inutile.
Soprattutto, non mettere il messaggio di eliminazione qui: oltre che
illeggibile, stai praticamente duplicando lo stesso HTML per ogni riga.
Ti suggerirei qualcosa del genere, piuttosto:

<a href="delete.asp?gr=<%= IDgruppo %>&id=<%=IDutente%>"
title="Cancella dalla lista" class="link-delete"></a>

Nel foglio di stile avrai qualcosa tipo (supponendo l'icona sia 32x32):

.link-delete {
display: inline-block;
width: 32px;
height: 32px;
background: url(../images/cancella.gif) no-repeat;
}

Poi, sempre tramite jQuery, nella funzione principale dove abbiamo
aggiunto gli altri handler, avrai qualcosa del tipo:

$(document.body).on("click", ".link-delete", function() {
return !confirm("ATTENZIONE!\nIl nominativo verrà
eliminato.\nConfermi?");
});

Se invece preferisci avere una finestrella in HTML custom, invece del
`confirm` del browser, allora dovresti quanto meno avere l'HTML nella
pagina (una volta sola, non per ogni record):

<div id="delete-window">
<h2>Attenzione</h2>
<p>Il nominativo verr&agrave; eliminato.</p>

<img src="../images/alert_small.png" width="32" height="32"

alt="alert" align="left" />
<h3>Confermi la cancellazione?</h3>
</div>

Ovviamente aggiungendo nel tuo foglio di stile tutti i valori che ti
servano (i padding non saranno inline come hai fatto, e avrai i margin
al posto dei &nbsp; – o padding laterali, vanno bene uguale).

Personalmente io eviterei di usare `img` anche qui, impostandole da CSS
come nel caso del pulsante; a aggiungerei già i pulsanti di confirm qui
dentro, limitandomi puoi a visualizzare / nascondere il div di
conseguenza. Ma per amor di semplicità è preferibile una transizione più
indolore, quindi puoi riutilizzare la tua funzione di "conferma",
sostituendo:

$(document.body).on("click", ".link-delete", function() {
return !confirm("ATTENZIONE!\nIl nominativo verrà
eliminato.\nConfermi?");
});

Con:

var deleteMessage = $("delete-window").html();

$(document.body).on("click", ".link-delete", function() {
conferma(deleteMessage, this.href);
});

Aumentando comunque notevolmente la leggibilità e la manutenibilità del
codice, rimuovendo parti ridondanti, migliorandone le performance.

Io ho usato un generico `document.body` come root per il delegate degli
eventi, ma se la tua tabella (<table>) ha un `id` puoi usare quello per
limitare l'area.

> Se si allora è questo che mi crea dubbi:
> inputs[i].value = $.text(cells[i]); //inserisci nei campi il testo nelle
> celle

> Non è che prende il malloppo della cella "Azioni" ( $.text(cells[i]); )
> e lo inserisce nell'input (inputs[i].value ), che in questo caso è un
> pulsante?

Bravo. Prima questo ciclo era valido, perché `save` era un link, non un
<input />. Poi ho supposto tu l'avessi trasformato in un <button>,
seguendo la discussione, e dato che `inputs` contiene solo i tag <input
/>, non sarebbe stato presente. Questa è la ragione per cui ti ho
chiesto che tipo di tag fosse.

[nixs]

"ZER0" ha scritto nel messaggio

news:4F7622A1...@ID-171124.news.individual.net...

>Ti suggerirei qualcosa del genere, piuttosto:

[cut]

mi studio tutto e ti faccio sapere...

>Se invece preferisci avere una finestrella in HTML custom, invece del
>`confirm` del browser, allora dovresti quanto meno avere l'HTML nella
>pagina (una volta sola, non per ogni record):

nessuna delle due, la finestra è generata da un altro plugin jq: impromptu
Per cui devo (se posso) trasferire, dove tu mi dici e come mi dici, tutta la
chiamata a funzione:

conferma('<br />ATTENZIONE! Il
nominativo verr&agrave; eliminato.<br /><br /><img
src=\'../images/alert_small.png\' width=\'32\' height=\'32\' alt=\'\'
align=\'left\' /><h3 style=\'padding-top:5px;\'> &nbsp;Confermi la

cancellazione?</h3><br>', 'delete.asp?gr=<%= IDgruppo %>&id=<%= IDutente
%>');

che sarebbe:
function conferma(testo, page) {
$.prompt(testo,{
buttons:{ Si: true, Annulla: false },
focus: 1,
callback: function(e,v,m,f) {
if (v == true){
location.href=page;
}
else{}
}
});

}


>Bravo. Prima questo ciclo era valido, perché `save` era un link, non un
><input />. Poi ho supposto tu l'avessi trasformato in un <button>,
>seguendo la discussione, e dato che `inputs` contiene solo i tag <input
>/>, non sarebbe stato presente. Questa è la ragione per cui ti ho
>chiesto che tipo di tag fosse.

ok, provato col button, esce ugualmente gigantesco e in ogni caso fa
la validazione su errore e il submit in un lampo senza fermarsi al
messaggio d'errore (salva comunque i dati errati.

Che faccio???

Ciao
Nicola

[nixs]

Dimenticavo, io il button l'ho messo così:

<input type="button" name="SALVA" onclick="updateForm.submit()"
value="salva" />

sbagliato?

Potrei usare un'immagine al posto dell'input button, ma resterebbe il
problema del mancato
stop sul submit no?

Ciao
Nicola

[ZER0]

On 31/03/12 13:53 , nixs wrote:

>> Se invece preferisci avere una finestrella in HTML custom, invece del
>> `confirm` del browser, allora dovresti quanto meno avere l'HTML nella
>> pagina (una volta sola, non per ogni record):

> nessuna delle due,

"Nessuna delle due" cosa? :)

> la finestra è generata da un altro plugin jq: impromptu
> Per cui devo (se posso) trasferire, dove tu mi dici e come mi dici,
> tutta la
> chiamata a funzione:
> conferma('<br />ATTENZIONE! Il
> nominativo verr&agrave; eliminato.<br /><br /><img
> src=\'../images/alert_small.png\' width=\'32\' height=\'32\' alt=\'\'
> align=\'left\' /><h3 style=\'padding-top:5px;\'> &nbsp;Confermi la
> cancellazione?</h3><br>', 'delete.asp?gr=<%= IDgruppo %>&id=<%= IDutente
> %>');

Certo, come ti ho detto nel posto precedente puoi riutilizzare la tua
(che è tua) funziona chiamata `conferma`, senza dover mettere tutto quel
codice direttamente nella chiamata stessa. Il post precedente spiega
come fare, leggilo e se ci sono delle parti poco chiare fammi sapere.

>> Bravo. Prima questo ciclo era valido, perché `save` era un link, non un
>> <input />. Poi ho supposto tu l'avessi trasformato in un <button>,
>> seguendo la discussione, e dato che `inputs` contiene solo i tag <input
>> />, non sarebbe stato presente. Questa è la ragione per cui ti ho
>> chiesto che tipo di tag fosse.

> ok, provato col button, esce ugualmente gigantesco

Nel senso che copia sempre il contenuto della cella "azioni" e lo mette
come testo del pulsante stesso?

> e in ogni caso fa
> la validazione su errore e il submit in un lampo senza fermarsi al
> messaggio d'errore (salva comunque i dati errati.

Non mi è chiaro cosa voglia dire questa cosa. :) Comunque, hai aggiunto
sempre `type="submit"` al button?

> Che faccio???

Cosa ti dice la console degli errori?

Eventualmente puoi ripristinare il tag <input/> se ti genera altri
problemi (che io da qua non posso vedere, tu sei l'unico che può capire
cosa sta succedendo nel tuo HTML, che è il discriminante, non la
funzione javascript); e dato che la cella "azioni" è l'ultima della
riga, fermarti un ciclo prima invece di continuare per tutti gli <input
/> (speravo che questa prova l'avresti fatta / proposta tu, una volta
capito cosa non andava).

[ZER0]

On 31/03/12 13:55 , nixs wrote:

> Dimenticavo, io il button l'ho messo così:

> <input type="button" name="SALVA" onclick="updateForm.submit()"
> value="salva" />

> sbagliato?

Si, è sbagliato. Come ti ho scritto in un post precedente, è un tag
<button/>, quindi:

<button type="submit" name="SALVA">salva</button>

Per questo ti saltava la validazione, perché facevi il `submit` tramite
metodo – e come abbiamo visto, questo non fa scattare il `validate` del
plugin.

[nixs]

>Certo, come ti ho detto nel posto precedente puoi riutilizzare la tua
>(che è tua) funziona chiamata `conferma`, senza dover mettere tutto quel
>codice direttamente nella chiamata stessa. Il post precedente spiega
>come fare, leggilo e se ci sono delle parti poco chiare fammi sapere.

sono d'accordo, la soluzione mi piace ma non riesco ad implementarla.

la funzione che genera la popup customizzata è questa:
//popup ok-annulla
function conferma(testo, page) {
$.prompt(testo,{ <<------------------------ da qui è la funzione del
plugin

buttons:{ Si: true, Annulla: false },
focus: 1,
callback: function(e,v,m,f) {
if (v == true){
location.href=page;
}
else{}
}
});
}

come vedi, le devo passare, oltre alla stringa da visualizzare come avviso
(e questa la potrei mettere direttamente nella funzione al posto di "testo",
la pagina asp che effettua la cancellazione.
Nome che viene generato dinamicamente dall'ASP, così:
studenti_delete.asp?g=<%= IDgruppo %>&id=<%= IDutente %>
Come lo passo?

Inoltre, se la metto in blocco nella tua funzione, come faccio ad
eseguirla solo quando premo l'icona "cancella"?

Perdonami, ma js è così astruso per i niubbi!

>Non mi è chiaro cosa voglia dire questa cosa. :) Comunque, hai aggiunto
>sempre `type="submit"` al button?

BINGO! Era qui il problema!!!
io conoscevo solo <input type="button" e non <button type="submit"
SEI GRANDE

Ciao
nicola

[ZER0]

On 31/03/12 19:17 , nixs wrote:

>> Il post precedente spiega
>> come fare, leggilo e se ci sono delle parti poco chiare fammi sapere.

> sono d'accordo, la soluzione mi piace ma non riesco ad implementarla.

[..]

> come vedi, le devo passare, oltre alla stringa da visualizzare come avviso
> (e questa la potrei mettere direttamente nella funzione

Guarda, secondo me non dovresti: come ti ho detto nel post, è bene
tenere l'HTML come HTML nel codice di markup, non come stringa in
JavaScript. È anche più leggibile e pulito.

> al posto di
> "testo",
> la pagina asp che effettua la cancellazione.
> Nome che viene generato dinamicamente dall'ASP, così:
> studenti_delete.asp?g=<%= IDgruppo %>&id=<%= IDutente %>
> Come lo passo?

Ti ho mostrato esattamente passo per passo come fare nel mio post, anche
passare tale link. Se non ti è chiaro, riprendi quel post, e rispondi
quotando ogni riga di codice che non ti è chiara, e io vedrò di
spiegartela meglio.

> Inoltre, se la metto in blocco nella tua funzione, come faccio ad
> eseguirla solo quando premo l'icona "cancella"?

Anche questo te l'ho detto nel post.

> Perdonami, ma js è così astruso per i niubbi!

Non ti preoccupare, il newsgroup serve a questo. :)

>> Non mi è chiaro cosa voglia dire questa cosa. :) Comunque, hai aggiunto
>> sempre `type="submit"` al button?
>
> BINGO! Era qui il problema!!!
> io conoscevo solo <input type="button" e non <button type="submit"
> SEI GRANDE

Ottimo, mi fa piacere che si sia risolto la magagna. Cerca di studiarti
un po' il codice che ti ho dato e capire come funziona, e se ci sono
cose poco chiare non esitare a rivolgerti al NG. Lo scopo sarebbe
riuscire a capirlo totalmente e adattarlo meglio alle tue attuali e
future esigenze.

[nixs]

ok, visto che nell'ultimo messaggio mi dici di far riferimento a questo,
rispondo qui.

Non riesco a modellare il comportamento della pagina come dici.
Vediamo nei particolari:

>Ma per amor di semplicità è preferibile una transizione più
>indolore, quindi puoi riutilizzare la tua funzione di "conferma",
>sostituendo:
> $(document.body).on("click", ".link-delete", function() {
> return !confirm("ATTENZIONE!\nIl nominativo verrà
> eliminato.\nConfermi?");
> });
>Con:
> var deleteMessage = $("delete-window").html();
> $(document.body).on("click", ".link-delete", function() {
> conferma(deleteMessage, this.href);
> });

allora, ho inserito nella tua funzione questa:

var deleteMessage = $("delete-window").html();
$(document.body).on("click", ".link-delete", function() {
conferma(deleteMessage, this.href);
});

mentre fuori di questa c'è "conferma()":

function conferma(testo, page) {
$.prompt(testo,{

buttons:{ Si: true, Annulla: false },
focus: 1,
callback: function(e,v,m,f) {
if (v == true){
location.href=page;
}
else{}
}
});
}

Il comando per il delete è questo:
<a href="delete.asp?g=<%= IDgruppo %>&id=<%= IDutente %>"
class="link-delete"></a>

Inserito insieme al comando Modifica nell'ultima cella della riga, cioè
questo:
<a href="#edit" title="Modifica i dati" class="link-modify" ></a>

Prima del tag <form> ho inserito l'html della popup di conferma (ancora
grezzo, poi applico gli stili giusti):
<div id="delete-window" style="display: none;">
<br>ATTENZIONE! Il nominativo verr&agrave;
eliminato.<br><br><img src="../images/alert_small.png" align="left" /><h3

style="padding-top:5px;">&nbsp;Confermi la cancellazione?</h3><br>

</div>

Primo problema: ho inserito il display: none per evitare di farmi stampare
l'html nella pagina.
Però, dubbio, quando la tua funzioncina "cattura" (se ho ben capito) l'html
della div con id delete-windows,
si porta dietro anche il display: none? Oppure no? Oppure devo aprire a mano
la visibilità? E se si,
come si fa???

Secondo problema, quando clicco su delete, il link funziona, cioè mi porta
alla pagina asp di delete, ma non si
ferma a chiedermi la conferma. Molte volte vedo in un lampo la finestra
popup, ma siccome il link trasporta
alla pagina delete.asp, essa rimane visibile per centesimi di secondo, e
comunque non si ferma alla conferma.
QUESTA, IN PARTICOLARE, è una cosa che non ho mai capito in js: il link
href, COSA NE SA che deve prima
eseguire una funzione??? Non se ne va per i fatti suoi alla pagina linkata?

Sono riuscito ad utilizzare la console errori di Opera (l'unica che segnala
errori!) ed ecco che dice:

[01/04/2012 18:34:18] JavaScript - (la mia pagina)
Event thread: click
Uncaught exception: TypeError: Cannot convert 'message' to object
Error thrown at line 47, column 2 in <anonymous function: $.prompt>(message,
options) in ... (file js impromptu)
if(message.constructor == String)
called from line 57, column 2 in conferma(testo, page) in ...(mia pagina)
$.prompt(testo,{
called from line 80, column 8 in <anonymous function>() in ...(mia pagina)
conferma(deleteMessage, this.href);
called via Function.prototype.apply() from line 3, column 7717 in <anonymous
function: dispatch>(c) in ...(file jquery)
c.data=r.data,c.handleObj=r,n=((f.event.special[r.origType]||{}).handle||r.handler).apply(p.elem,g),n!==b&&(c.result=n,n===!1&&(c.preventDefault(),c.stopPropagation()))
called via Function.prototype.apply() from line 3, column 482 in <anonymous
function: i>(a) in ...(file jquery)
return typeof
f!="undefined"&&(!a||f.event.triggered!==a.type)?f.event.dispatch.apply(i.elem,arguments):b

Ciao
Nicola

[ZER0]

On 01/04/12 18:40 , nixs wrote:

> ok, visto che nell'ultimo messaggio mi dici di far riferimento a questo,
> rispondo qui.

> allora, ho inserito nella tua funzione questa:

È importante che tu capisca il codice, e non semplicemente lo copi
vedendo se funziona o meno, quindi cercherò di spiegartelo passo passo.
È utile che tu lo controlli perché il codice potrebbe anche presentare
typo o errori – io lo scrivo di getto sul NG, e non sono un grande
utilizzatore di jQuery.

Un appunto, ho supposto che utilizzassi l'ultima versione di jQuery, se
ne utilizzi un'altra fammi sapere, che il comportamento di `on` potrebbe
essere diverso.

> var deleteMessage = $("delete-window").html();

Qui ho fatto un errore, che presumibilmente è quello che ti genera
l'eccezione che menzioni. È una mia dimenticanza comune (le DOM API non
richiedono prefissi perché hanno metodi per ogni tipo invece di avere un
metodo per tutti i tipi), il codice corretto per jQuery è:

var deleteMessage = $("#delete-window").html();

In pratica la prima istruzione diceva "jQuery, cercami un nodo con
*tagname* 'delete-window', e recupera il suo contenuto HTML, mettendolo
nella variabile 'deleteMessage'"; mentre ciò che volevo era "jQuery,
cercami un nodo con *id* 'delete-window' e recupera il suo contenuto
HTML, mettendolo nella variabile 'deleteMessage'".

> $(document.body).on("click", ".link-delete", function() {

Questa istruzione dice "jQuery, quando sull'elemento body del document
avviene un click, se l'elemento cliccato ha classe '.link-delete',
esegui la seguente funzione.


> conferma(deleteMessage, this.href);

Dato che una funzione associata a un event handler (come nel caso di
"click") ha come context object (`this`) l'elemento cliccato, questa
istruzione dice "esegui la funzione `conferma` passando come primo
parametro `deleteMessage` e come secondo parametro l'href del link
cliccato."

> });

Qui c'è un'altra mia dimenticanza – che avevo aggiunto nel codice
originale, ma ho dimenticato di portare qui sotto, evidentemente –
ovvero un `return`, come puoi vedere dal codice che faceva uso di
`confirm`. Nel nostro caso, dato che è la tua `conferma` a prendersi in
carico di fare il redirect al link, bisogna aggiungere un `return false`
alla fine della funzione associata all'event handler.
Questo perché aggiungere `return false` in una funzione associata a un
event handler, equivale a chiamare `event.preventDefault()`, ovvero si
inibisce l'azione di default del browser per quell'evento. In un link,
l'azione di default dell'evento click è "naviga all'URL specificato
dall'href".

> Primo problema: ho inserito il display: none per evitare di farmi
> stampare l'html nella pagina.

Giustamente.

> Però, dubbio, quando la tua funzioncina "cattura" (se ho ben capito)
> l'html della div con id delete-windows,
> si porta dietro anche il display: none?

No, perché il metodo `html()` di jQuery (come puoi vedere dalla
documentazione) equivale al più esplicativo `innerHTML` delle DOM API,
ovvero ti recupera solo il codice HTML interno.

Il che significa, che se vuoi usare i CSS per mettere i padding etc,
devi farlo usando come elemento root quello in cui tale HTML andrà a
finire – altrimenti per semplicità puoi lasciare i CSS inline come hai
adesso, che è sempre meglio che averceli a mo' di stringa nel codice
javascript.

> Oppure no? Oppure devo aprire a
> mano la visibilità? E se si,
> come si fa???

Non ti serve in questo caso, ma per la cronaca sai già come si fa – del
resto lo hai usato per "visualizzare" la riga nascosta per l'editing. :)

> QUESTA, IN PARTICOLARE, è una cosa che non ho mai capito in js: il link
> href, COSA NE SA che deve prima
> eseguire una funzione???

DOM (Document Object MOdel) e JavaScript sono due cose differenti: usi
JS per interagire con il DOM. In pratica tramite JavaScript associ una
funzione all'evento "click" del link. Quando quel link viene cliccato,
la funzione viene eseguita.

> Non se ne va per i fatti suoi alla pagina linkata?


> Sono riuscito ad utilizzare la console errori di Opera (l'unica che
> segnala errori!) ed ecco che dice:

Strano, gli errori dovresti vederli in tutte le console – sicuramente in
quella di Firefox. Ricordati solo di aprire la console prima di eseguire
il codice che potrebbe generarti l'errore – se la apri dopo che l'errore
è accaduto non necessariamente lo vedi.

> [01/04/2012 18:34:18] JavaScript - (la mia pagina)
> Event thread: click
> Uncaught exception: TypeError: Cannot convert 'message' to object
> Error thrown at line 47, column 2 in <anonymous function:
> $.prompt>(message, options) in ... (file js impromptu)
> if(message.constructor == String)

Suppongo che il problema sia esattamente quello descritto poc'anzi,
cercando un nodo con tagname "delete-message", e non trovandolo, il
metodo `html()` restituisce `null` invece che una stringa, rilanciando
un eccezione a questo check.

[nixs]

GRANDE, GRANDE....

Tutto ok, preciso come un orologio, dopo aver fatto le correzioni!!!

>DOM (Document Object MOdel) e JavaScript sono due cose differenti: usi
>JS per interagire con il DOM. In pratica tramite JavaScript associ una
>funzione all'evento "click" del link. Quando quel link viene cliccato,
>la funzione viene eseguita.

Fammi indovinare... e se nella funzione mettiamo return false; esce
e non passa al link, altrimenti passa al link?

Sono riuscito addirittura a far evidenziare la riga cliccata per la modifica
col colore giallo
inserendo nella tua funzione:

$("a[href=#edit]").click(function(event) {
if (current) {
current.show();
}
current = $(event.target).closest("tr");
current.hide();

//evidenzia la riga scelta
editable.addClass("selected"); <<---------------------
....

dove "selected" è una classe che setta bgcolor a giallo,
va bene?

Come cicliegina sulla torta c'è solo un ultimo problemuccio da risolvere:

Per non sconvolgere il layout dei campi di modifica, ho inserito nella
funzione
per validare l'opzione che deposita i messaggi di errore in un div apposito,
così:

errorPlacement: function(error,element){},
showErrors: function(errorMap, errorList) {
var list="";
for(i in errorList){
j = parseInt(i)+1;
list=list+"<label>Errore: "+errorList[i].message+"<br /></label>";
}
$("#updateForm").find("label").remove();
$("#updateForm").append(list);

this.defaultShowErrors();
}

che vanno a finire in un div posizionato dopo la chiusura del form:

<div id="formError"></div>

Ora, mi piacerebbe mettere questo div PRIMA del form, ma anche se
lo metto fisicamente prima mi appare sempre alla fine.

Ho provato a modificare:
$("#updateForm").append(list);
in
$("#updateForm").prepend(list);

e in quasto caso lo mette prima, ma è come se andasse a finire
in una cella aggiunta alla prima colonna del form, che è larga pochi px,
quindi mi ficca tutto dentro andando 2-3 volte accapo.

Non capisco perchè, anche se il div sta FUORI dal form, la fun me lo mette
in una cella di questo.

Ciao
Nicola

[ZER0]

On 02/04/12 15:40 , nixs wrote:

> Fammi indovinare... e se nella funzione mettiamo return false; esce
> e non passa al link, altrimenti passa al link?

Non è il fatto che esce dalla funzione il discriminante, quanto che esce
restituendo `false`. Se tu uscissi restituendo `true`, "passerebbe" al link.
Come ho detto, è l'equivalente di chiamare il metodo `event.preventDefault`.

> Sono riuscito addirittura a far evidenziare la riga cliccata per la
> modifica col colore giallo
> inserendo nella tua funzione:
>
> $("a[href=#edit]").click(function(event) {
> if (current) {
> current.show();
> }
> current = $(event.target).closest("tr");
> current.hide();
>
> //evidenzia la riga scelta
> editable.addClass("selected"); <<---------------------

Questo è ridondante. :) dato che `editable` viene nascosto quanto non
sei in "edit-mode", puoi tranquillamente associare gli stili della
classe `selected` all'id `editable` nel CSS; senza bisogno di aggiungere
la classe a livello di codice.

> Per non sconvolgere il layout dei campi di modifica, ho inserito nella
> funzione
> per validare l'opzione che deposita i messaggi di errore in un div
> apposito, così:
>
> errorPlacement: function(error,element){},
> showErrors: function(errorMap, errorList) {
> var list="";
> for(i in errorList){
> j = parseInt(i)+1;
> list=list+"<label>Errore: "+errorList[i].message+"<br /></label>";
> }

Io eviterei di avere codice HTML all'interno del codice JS, in linea
generale. Comunque, non sono sicuro se il tuo problema dipenda dal tuo
codice HTML o dal plugin di validazione in sé. In ambo i casi, non credo
di poterti aiutare a meno che tu non crei una pagina HTML stand alone
(tipo il mio esempio di qualche post fa) dove replichi il problema, che
possa vedere. In questo modo posso cercare di capire dove sta il
problema. Altrimenti alla cieca mi riesce difficile, potrebbe essere
qualunque cosa (un errore o racing condition a livello di JS, un
comportamento del plugin, una questione di HTML, etc).

[nixs]

>Non è il fatto che esce dalla funzione il discriminante, quanto che esce
>restituendo `false`. Se tu uscissi restituendo `true`, "passerebbe" al
>link.
>Come ho detto, è l'equivalente di chiamare il metodo
>`event.preventDefault`.

capito...

>Questo è ridondante. :) dato che `editable` viene nascosto quanto non
>sei in "edit-mode", puoi tranquillamente associare gli stili della
>classe `selected` all'id `editable` nel CSS; senza bisogno di aggiungere
>la classe a livello di codice.

come sempre... hai ragione :-)

>Io eviterei di avere codice HTML all'interno del codice JS, in linea
>generale. Comunque, non sono sicuro se il tuo problema dipenda dal tuo
>codice HTML o dal plugin di validazione in sé. In ambo i casi, non credo
>di poterti aiutare a meno che tu non crei una pagina HTML stand alone
>(tipo il mio esempio di qualche post fa) dove replichi il problema, che
>possa vedere. In questo modo posso cercare di capire dove sta il
>problema. Altrimenti alla cieca mi riesce difficile, potrebbe essere
>qualunque cosa (un errore o racing condition a livello di JS, un
>comportamento del plugin, una questione di HTML, etc).

mi studio la cosa meglio

Una domanda che sorge spontanea:
se ho capito bene, questa:

var inputs = editable.find("input");

va a cercare i tag input.
E se insieme a questi ci sono anche
select o ceckbox???
come modifico il tutto?

Ciao
Nicola

[ZER0]

On 03/04/12 14:14 , nixs wrote:

> Una domanda che sorge spontanea:
> se ho capito bene, questa:
> var inputs = editable.find("input");
> va a cercare i tag input.

si, recupera tutti i tag input contenuti all'interno dell'elemento
"editable".
Dato che nell'esempio c'era un rapporto 1:1 tra le celle con del testo e
i campi di input, ho usato un ciclo che assegnasse in modo becero il
valore del primo al `value` del secondo.

> E se insieme a questi ci sono anche
> select o ceckbox???

Ovviamente nel caso di select e di checkbox il discorso cambia. Non
tanto per aggiungere tali nodi alla lista (nel caso di `select` dovrebbe
bastare aggiungerli al selettore di `find`), quanto per il come gestire
i valori: Il testo contenuto nella cella, non è il `value`
dell'elemento, a differenza dei campi di testo.

Nel caso della select, ad esempio, presumo avrai il testo della option
selezionata. Quindi dovrai prendere il valore della cella, ciclare le
option finché non trovi un testo corrispondente, e allora selezionare
tale option.

Nel caso dei checkbox, dipende come hai deciso di rappresentare a
livello di cella il fatto che un elemento checkbox sia spuntato. Hai
usato del testo? Un immagine? In quel caso dovrai, in base al contenuto
della cella, impostare la proprietà `checked` della checkbox a `true` o
`false`.

Puoi quindi proseguire con il ciclo, aggiungendo un controllo del `type`:

var inputs = editable.find("input,select");

//.. il resto del codice ..

for (var i = 0; i < inputs.length; i++) {

var input = inputs[i];
var cellText = $.text(cells[i]);

switch (input.type) {
case "checkbox":
// gestisci il checkbox in base al contenuto della cella
break;
case "select-one": // supponendo non abbia valori multipli
// rimuove per sicurezza un eventuale valore precedente
// e seleziona l'option con il valore uguale a quello
// della cella
$(input)
.find("option:selected")
.removeProp("selected")
.end()
.find("option:contains(" + cellText + ")")
.prop("selected", "selected");
break;
case "text":
// gestisce i campi input di testo come prima:
input.value = cellText;
break;

// ignora i restanti tipi
}
}

> come modifico il tutto?

Un po' di iniziativa, suvvia. :)

[nixs]

>Puoi quindi proseguire con il ciclo, aggiungendo un controllo del `type`:

sei grande, grande, grande...
come te sei grande solamente tuuuu...
:-)))

> Un po' di iniziativa, suvvia. :)

eh! Fai presto a parlare tu che conosci così bene tutto!

ciao
Nicola

[ZER0]

On 04/04/12 13:41 , nixs wrote:

>> Un po' di iniziativa, suvvia. :)

> eh! Fai presto a parlare tu che conosci così bene tutto!

Non so bene tutto, grazie a Dio in questo ambiente c'è sempre qualcosa
di nuovo da scoprire o da imparare – sarebbe una barba, altrimenti.

E quel che so, l'ho imparato facendo prove, leggendo la documentazione
online, essendo curioso e sperimentando qua e la. :)

[nixs]

>E quel che so, l'ho imparato facendo prove, leggendo la documentazione
>online, essendo curioso e sperimentando qua e la. :)

certo, anche io faccio prove, è da qualche settimana che ho deciso di
utilizzare jquery
e ora sto sperimentando le sue potenzialità.
Grazie ai tuoi insegnamenti apprendo velocemente.
Ad esempio, ora ho aggiunto alla tua funzione questa:

$("a[href=#out]").click(function(event) {
editable.hide();
current.show();
});

sul link nella parte nascosta dell'editing:
<a href="#out" title="Annulla" class="link-command out"></a>

che consente di uscire dall'edit della riga e tornare ai dati

l'ho fatta bene? :-)

Se hai tempo... guardati anche l'altro mio thread recente

ciao
Nicola

[ZER0]

On 04/04/12 20:32 PM, nixs wrote:

> $("a[href=#out]")

Nota che io ho usato l'attributo `href`, ma tu puoi anche farne a meno,
soprattutto se devi associare degli stili: nel caso in cui vi sia un
solo elemento puoi utilizzare un ID, nel caso in cui ve ne siano diversi
puoi usare una classe CSS.

> <a href="#out" title="Annulla" class="link-command out"></a>

> che consente di uscire dall'edit della riga e tornare ai dati

> l'ho fatta bene? :-)

A livello di JS direi di si, a livello di HTML dipende dal CSS e dalle
classi `link-command` e `out`.

[nixs]

>Nota che io ho usato l'attributo `href`, ma tu puoi anche farne a meno,
>soprattutto se devi associare degli stili: nel caso in cui vi sia un
>solo elemento puoi utilizzare un ID, nel caso in cui ve ne siano diversi
>puoi usare una classe CSS.

ok... me lo scrivo! :-))

>A livello di JS direi di si, a livello di HTML dipende dal CSS e dalle
>classi `link-command` e `out`.

.link-command {display: inline-block; width: 30px; height: 19px;
background-repeat: no-repeat;}
.out {background-image: url(../images/esci.gif);}

la prima è la classe generica che ho applicato a tutti i link usati come
pulsante per fare qualcosa
la seconda aggiunge una freccia in background per uscire dall'edit (in altri
sarà un'altra immagine).


-- ciao!

...nixs.................................................................
nixs.lucchetto.@lagirandola.it
togli la ".SERRATURA." per scrivermi
........................................................................
L'uomo non smette di giocare perché invecchia,
ma invecchia perché smette di giocare.
(George Bernard Shaw)

[ZER0]

On 04/11/12 18:14 PM, nixs wrote:

>> A livello di JS direi di si, a livello di HTML dipende dal CSS e dalle
>> classi `link-command` e `out`.

> .link-command {display: inline-block; width: 30px; height: 19px;
> background-repeat: no-repeat;}
> .out {background-image: url(../images/esci.gif);}

Ok, va benissimo. Visto che out è univoco direi di usare un id e di
dargli un nome più esplicativo. Qualcosa tipo:

.link-command { ... }
#command-close { ... }

E quindi avere:

<a id="command-close" class="link-command" href="#">..</a>

Oppure:

.link-command { ... }
#close-editable { ... }

Etc.

Comunque vedi tu. L'id, a prescindere dal valore, è sicuramente più
indicato.