jQuery: reagire a qualsiasi selezione sulla select

[Alessandro Pellizzari]

Ciao,

sto usando jQuery per fare un calendario un po' particolare.

Il calendario e` una table con tot caselle (td). Cliccando sul td (jQuery
('td').click(...) infilo un form con una select dentro il td, e l'utente
puo` scegliere una delle voci (jQuery('select').change(...)).
Alla selezione viene inviata via .ajax() la selezione al server, che
restituisce un pezzo di HTML da mettere nel td.

Tale "pezzo di HTML" puo` essere cambiato con lo stesso sistema,
cliccandoci sopra e facendo riapparire la select.

Il problema e` che change() rileva solo il cambiamento rispetto al
default, mentre se io riselezioni la stessa voce, nel td mi rimane la
select e non il "pezzo di HTML" che ci andrebbe.

Come posso fare a rilevare qualsiasi selezione invece che solo il
cambiamento?

Grazie.

[ZER0]

Post by Alessandro Pellizzari
Il problema e` che change() rileva solo il cambiamento rispetto al
default, mentre se io riselezioni la stessa voce, nel td mi rimane la
select e non il "pezzo di HTML" che ci andrebbe.

Esatto, perché è già selezionata. A livello di usabilità, si presuppone
che lo stato attuale sia il risultato delle scelte fatte dall'utente.
Quindi, se la select ha già una voce selezionata, quello che vede
l'utente in quel momento, dovrebbe essere esattamente quello che
vedrebbe se riselezionasse nuovamente la medesima voce selezionata.

Se questo non è il comportamento del proprio applicativo, probabilmente
c'è un errore di design di fondo e andrebbe rivisto.

Se per qualche motivo si desidera proprio che funzioni in questo modo...
Beh, ti posso suggerire di usare |onclick| al posto di |onchange|,
oppure di azzerare a livello di script il valore della select, prima di
visualizzarla nuovamente:

select.selectedIndex = -1;

[Alessandro Pellizzari]

Post by ZER0
Esatto, perché è già selezionata. A livello di usabilità, si presuppone
che lo stato attuale sia il risultato delle scelte fatte dall'utente.

Eh, lo so, ma ci si mette "AJAX" a rompere. :)

Post by ZER0
Quindi, se la select ha già una voce selezionata, quello che vede
l'utente in quel momento, dovrebbe essere esattamente quello che
vedrebbe se riselezionasse nuovamente la medesima voce selezionata.
Se questo non è il comportamento del proprio applicativo, probabilmente
c'è un errore di design di fondo e andrebbe rivisto.

Il punto e` che la select non e` sempre visibile. Diventa visibile solo
quando si clicca sulla cella, e poi scompare quando si seleziona qualcosa.

E` un po' come i contentEditable "inline".

E` una scelta di design (sia tecnico che estetico) che dovrei mantenere.

Post by ZER0
Se per qualche motivo si desidera proprio che funzioni in questo modo...
Beh, ti posso suggerire di usare |onclick| al posto di |onchange|,
oppure di azzerare a livello di script il valore della select, prima di
select.selectedIndex = -1;

Ho fatto i salti mortali per mettergli il selected per mostrare la scelta
dell'utente! :)
Faro` qualche esperimento con il click (ma devo gestirmi da solo lo stato
dei vari click e dove vengono fatti, select o option), altrimenti
passero` a togliere il selectedIndex come mi consigli.

L'alternativa sarebbe aprire un "fumetto" come GoogleCalendar, ma volevo
tenere il tutto leggero.

Grazie per l'aiuto.

Bye.

[ZER0]

On 07/28/10 18:22 PM, Alessandro Pellizzari wrote:

[cut]

Post by Alessandro Pellizzari
Ho fatto i salti mortali per mettergli il selected per mostrare la scelta
dell'utente! :)

Okay, senza avere il quadro della situazione sottomano, eviterò di
cercare di capire il design e lo darò per buono. :)

Post by Alessandro Pellizzari
Faro` qualche esperimento con il click (ma devo gestirmi da solo lo stato
dei vari click e dove vengono fatti, select o option),

Ti dovrebbe bastare associare l'onclick sull'elemento select, senza
aggiungere logica addizionale rispetto al change che hai adesso.

Post by Alessandro Pellizzari
L'alternativa sarebbe aprire un "fumetto" come GoogleCalendar, ma volevo
tenere il tutto leggero.

Non ho idea di quello che vuoi ottenere alla fine, quindi non posso
darti suggerimenti in merito. Ma ricordati che a volte una maggiore
usabilità vale la spesa di un poco di codice in più.

Post by Alessandro Pellizzari
Grazie per l'aiuto.

De nada il NG è qui apposta, vediamo di usarlo. :)

[Alessandro Pellizzari]

Post by ZER0

Post by Alessandro Pellizzari
Faro` qualche esperimento con il click (ma devo gestirmi da solo lo
stato dei vari click e dove vengono fatti, select o option),

Ti dovrebbe bastare associare l'onclick sull'elemento select, senza
aggiungere logica addizionale rispetto al change che hai adesso.

Ho associato il click a ogni option:

$('select').children('option').click(function blablabla);

Funziona. Adesso lo testo su IE, so gia` che non funzionera` :)

Avevo provato anche a mettere $('select').val(-1) che dovrebbe
corrispondere a select.selectedIndex = -1, ma mi ignorava completamente
la prima voce (la <option value="0">).

Appena va online vi dico dov'e` cosi` mi dite se "usabilitamente" si
poteva fare meglio. :)

Grazie ancora.
Bye.

[Oreste]

Post by Alessandro Pellizzari
$('select').children('option').click(function blablabla);
Funziona. Adesso lo testo su IE, so gia` che non funzionera` :)

dai un'occhiata qui può esserti utile:
http://stackoverflow.com/questions/149573/check-if-option-is-selected-with-jquery-if-not-select-a-default

[Alessandro Pellizzari]

Post by Oreste

$('select').children('option').click(function blablabla); Funziona.
Adesso lo testo su IE, so gia` che non funzionera` :)

http://stackoverflow.com/questions/149573/check-if-option-is-selected-

with-jquery-if-not-select-a-default

Grazie, ma non era quello il problema. :)

L'impostazione dell'opzione selezionata ero gia` riuscito a farla. Il
problema era proprio sull'onChange della select, che non veniva scatenato
quando si riselezionava la stessa opzione.

Comunque, come previsto, IE non gradisce l'onClick sull'option (o almeno
l'evento click di jQuery).

Ho aggirato lasciando sia l'onClick (per Firefox e gli altri) che
l'onChange (per IE), che pero` reagisce solo ai cambiamenti. Pazienza,
aggiorneranno il browser. ;)
Quando avro` piu` tempo (dopo il 21 dicembre 2012) magari lo sistemo.

Bye.

[ZER0]

Post by Alessandro Pellizzari

Post by ZER0
Ti dovrebbe bastare associare l'onclick sull'elemento select, senza
aggiungere logica addizionale rispetto al change che hai adesso.

$('select').children('option').click(function blablabla);

Quello che ti suggerivo io era:

$("select").onclick(function(){});

Che, a memoria, su IE funziona.

Post by Alessandro Pellizzari
Avevo provato anche a mettere $('select').val(-1) che dovrebbe
corrispondere a select.selectedIndex = -1,

Per esserne sicuri basta fare:

$('select')[0].selectedIndex = -1;

E vederne il risultato.

Post by Alessandro Pellizzari
ma mi ignorava completamente
la prima voce (la <option value="0">).

Beh, se ho capito cosa intendi con "ignorava completamente la prima
voce" è quello che dovrebbe fare: dovrebbe darti la select senza alcuna
selezione preimpostata.

Post by Alessandro Pellizzari
Appena va online vi dico dov'e` cosi` mi dite se "usabilitamente" si
poteva fare meglio. :)

Meglio, si. Con il contesto sott'occhio si può parlare con più
cognizione di causa. :)

Post by Alessandro Pellizzari
Grazie ancora.

De nada.

[Alessandro Pellizzari]

Post by ZER0
$("select").onclick(function(){});
Che, a memoria, su IE funziona.

Il mio timore era che facendo cosi`, mi avrebbe chiamato la callback
anche quando avessi cliccato per far apparire le options.
Ora faccio un esperimento. :)

Post by ZER0

Post by Alessandro Pellizzari
Appena va online vi dico dov'e` cosi` mi dite se "usabilitamente" si
poteva fare meglio. :)

Meglio, si. Con il contesto sott'occhio si può parlare con più
cognizione di causa. :)

OK, spero non ci siano troppi bug esposti:

http://pulirefacile.donnad.it/planner

Non massacratemi troppo, ma le critiche costruttive sono ben accette. :)
Grazie.

Bye.

[Oreste]

Post by Alessandro Pellizzari
Il mio timore era che facendo cosi`, mi avrebbe chiamato la callback
anche quando avessi cliccato per far apparire le options.
Ora faccio un esperimento. :)

stavo facendo anch'io degli esperimenti vedi:
http://oreste.parlatano.org/prove_js/select/

click option funziona bene solo su FF, adesso capisco che il problema
è intrigante e mi piacerebbe risolverlo, ci provo nei prossimi giorni.
Se hai tempo da un'occhiata all'esperimento così com'è adesso.

[ZER0]

Post by Oreste
click option funziona bene solo su FF, adesso capisco che il problema
è intrigante e mi piacerebbe risolverlo,

Come ho detto, basta usare il click sulla select. A memoria, sono
abbastanza certo che funzioni su IE - cosa che al momento non posso testare.
Nel caso in cui certi browser preferiscano il click sulle option, invece
che sulle select, dovrebbe bastare filtrare l'event target, ignorando la
select come target e prendendo invece le option.

[Oreste]

Post by ZER0
Come ho detto, basta usare il click sulla select. A memoria, sono
abbastanza certo che funzioni su IE - cosa che al momento non posso testare.

Puoi osservare la comparazione, il click select funziona su IE, FF ma
non con Chrome, quest'ultimo fa il brutto scherzo di scatenare il
click immediatamente prima della scelta del valore option. L'insieme
dei tre esempi ( http://oreste.parlatano.org/prove_js/select/ ) mostra
un comportamento diverso a seconda del browser. Sono sorpreso da tali
differenze, non mi era ancora capitato di notarlo.

[ZER0]

Post by Oreste

Post by ZER0
Come ho detto, basta usare il click sulla select. A memoria, sono
abbastanza certo che funzioni su IE - cosa che al momento non posso testare.

Puoi osservare la comparazione, il click select funziona su IE, FF ma
non con Chrome, quest'ultimo fa il brutto scherzo di scatenare il
click immediatamente prima della scelta del valore option.

Chrome l'avevo tirato fuori dai giochi a priori: su Mac non scatena
nulla eccetto l'onchange.

Post by Oreste
Sono sorpreso da tali differenze, non mi era ancora capitato di notarlo.

Probabilmente perché ti sei perso l'epoca IE4/NS4, queste cose erano
all'ordine del giorno. ;)

[Oreste]

Post by Alessandro Pellizzari
Come posso fare a rilevare qualsiasi selezione invece che solo il
cambiamento?

devi evitare di usare il tag <form> ed inviare i dati via ajax
acquisendo singolarmente ogni valore, in questo modo eviti che si
scatenino eventi conflittuali contemporaneamente.