PDA

View Full Version : [javascriot] Dubbio su come procedere con controlli javascript


Guybrush1989
26-09-2011, 20:46
Salve a tutti,
volevo un consiglio (non il codice, naturalmente) su come proseguire per fare quanto segue.
Praticamente, arrivo in una pagina jsp da una servlet in cui popolo un menù a tendina con dei valori ottenuti da query.
Ora, ogni qualvolta cambio il valore contenuto in tale menù a tendina, altri 2 menù a tendina dovranno essere popolati in base ad una query su DB.

Il primo menù a tendina non si trova in un form.

Il mio pensiero era praticamente questo:
creo un form fittizio, sfrutto l'evento javascript "onchange" sul primo menù a tendina per invocare un metodo javascript che fa il submit del form fittizio;
sul form fittizio imposto l'evento "onsubmit" in modo che faccia il redirect sulla servlet passandogli un parametro nascosto (chiamiamolo OP) e, utilizzando un if sul "request.getParameter("OP")", invoco un metodo "slave" che effettua la query e mi ritorna un array di resultset (che è stato precedentemente definito).
Dopodichè effettuo il forward sulla pagina jsp.
A questo punto il mio dubbio è questo: da dove riprenderà il programma l'esecuzione? Dalla testa della pagina o dal form fittizio?
Immagino che al 99% sia la seconda soluzione, ed a quel punto popolerei, con uno scriptlet, i menù a tendina che mi servono.

E' corretto come ragionamento?
Ah, dimenticavo...come potrei fare a tenere nascosti i 2 menù a tendina fino a quando non viene effettuata la scelta dal primo?

Vi ringrazio molto, Fabio.

Kenger
26-09-2011, 21:32
il metodo più semplice per fare quello che chiedi è ajax. Con jQuery:


$("#select1").change(function() {
var selectedVal = $(this).val();

$("#select2").load('urlDellaJSP', 'val=' + selectedVal);
})


Questo è un pezzo di codice che al cambio selezione su un select con id select1 esegue una chiamata ajax alla pagina "urlDellaJsp" passando in get il parametro val che contiene l'elemento selezionato.

La JSP in questo caso deve tornarti direttamente il codice html contenuto nella select, cioè una cosa tipo

<option value="1">1</option>
<option value="2">2</option>

che verrà sostituito al contenuto attuale. Qui (http://api.jquery.com/load/) trovi la documentazione del metodo load. Se guardi bene puoi passare anche un terzo parametro che rappresenta la funzione che verrà chiamata dopo che il contenuto del tuo select è stato sostituito. All'inizio select2 sarà nascosto e in quella funzione lo fai apparire.

Questi sono i mattoncini(è praticamente tutto fatto :)) che ti servono per fare quello che chiedi. Se servono altre spiegazioni chiedi pure.

EDIT: Quella che segue è la mia opinione: Javascript liscio va bene giusto per fare le prime cose, poi serve per forza un framework per poter fare le cose con una certa velocità e assenza di bug. Javascript purtroppo è molto soggetto alle differenze tra i diversi browser.

Guybrush1989
27-09-2011, 08:14
ciao,
ti ringrazio per la risposta esauriente, però purtroppo ho dimenticato di dire che framework non ne posso usare :(
Deve essere tutto javascript/jsp/servlet

Kenger
27-09-2011, 17:42
E non puoi nemmeno mettere un form intorno al select? In quel caso diventerebbe semplice.

Al limite puoi crearti un form in un altro punto della pagina con dentro un campo nascosto che all'evento onchange valorizzi. Poi fai submit sul form e via.

Sennò puoi usare ajax anche senza framework, usando l'oggetto XMLHttpRequest. Su questo passo però, non l'ho mai usato.

Guybrush1989
28-09-2011, 20:21
E non puoi nemmeno mettere un form intorno al select? In quel caso diventerebbe semplice.

Al limite puoi crearti un form in un altro punto della pagina con dentro un campo nascosto che all'evento onchange valorizzi. Poi fai submit sul form e via.

Sennò puoi usare ajax anche senza framework, usando l'oggetto XMLHttpRequest. Su questo passo però, non l'ho mai usato.

eh ma così facendo non comporta il refresh della pagina?
io avrei bisogno di una cosa "dinamica", quindi ajax sarebbe ottimo...difatti ho usato gli iframe per simulare un comportamneto "pseudo-ajax"