Sto realizzando un sito web che permette di uplodare degli 'oggetti' e di catalogarli.
Le categorie sono organizzate in 5 categorie principali ed ognuna di questa ha delle sottocategorie e così via.
Voglio realizzare nell'html delle select in successione a seconda delle scelte fatte dall'utente.
Ho utilizzato javascript e una servlet java per ottenere questo effetto, ma mi sono resa conto che non è proprio quello che desideravo. Ho notato che su Firefox l'evento si scatena solo al secondo click, mentre su IE funziona correttamente, ma solo sulla prima select.
Posto di seguito parte del codice realizzato.
Questa è la servlet java che scrive il codice html per la select (da visualizzare dinamicamente)
Questo è il file javascript che sull'evento change della prima select visualizzata prende il risultato della servlete
e infine la pagina .jsp di visualizzazione
il metogo getCategorieFiglie() serve a prendere le figlie di una categoria conoscendo il suo id.
Ho creato anche un oggetto Categoria che ha come attributi il nome da visualizzare e l'id.
Al primo caricamento della pagina si visualizzano le 5 categorie principali, il div sottostante viene poi popolato con la funzione js visualizzacategorie()
Ringrazio chiunque voglia aiutarmi, sto sbattendo la testa contro google da giorni ma non ho trovato niente che faccia al mio caso!
Le categorie sono organizzate in 5 categorie principali ed ognuna di questa ha delle sottocategorie e così via.
Voglio realizzare nell'html delle select in successione a seconda delle scelte fatte dall'utente.
Ho utilizzato javascript e una servlet java per ottenere questo effetto, ma mi sono resa conto che non è proprio quello che desideravo. Ho notato che su Firefox l'evento si scatena solo al secondo click, mentre su IE funziona correttamente, ma solo sulla prima select.
Posto di seguito parte del codice realizzato.
Questa è la servlet java che scrive il codice html per la select (da visualizzare dinamicamente)
Codice:
//prendere il valore della select, che sappiamo essere l'id di una categoria
int id = Integer.parseInt(request.getParameter("idcategoria"));
//controllo se esiste già dbcategorie se no lo creo
DatabaseCategorie DBcategorie = (DatabaseCategorie) getServletContext().getAttribute("DBcategorie");
if(DBcategorie==null){
DBcategorie = new DatabaseCategorie();
getServletContext().setAttribute("DBcategorie", DBcategorie);
}
//l'id che arriva alla servlet deve essere != 0. Se è = 0, significa che ho il valore select category e tutto questo ambaradam non lo faccio
if(id!=0){
if(DBcategorie.getCategorieFiglie(id).size()>0){
int numero = DBcategorie.getCategorieFiglie(id).get(0).getIdcategoria();
//stampo il codice html(la mia select)
out.print("<p>");
out.print("<select name='idcategoria' id='idcategoria' onchange='javascript:visualizzaselect("+numero+")'>");
out.print("<option value='0' selected='selected'>Select category </option>");
for(Categoria c : DBcategorie.getCategorieFiglie(id)){
out.println("<option value='"+c.getIdcategoria()+"'>"+c.getNome()+"</option>");
}
out.print("</select>");
out.print("</p>");
//out.print("<input type='hidden' name='numero' value='"+numero+"'>");
out.print("<div id='idcategoria"+numero+"'/>");
}Questo è il file javascript che sull'evento change della prima select visualizzata prende il risultato della servlete
Codice:
function visualizzaselect(numeroid){
//chiamo il metodo della servlet
//metto un div per inserire la seconda select, subito dopo la prima
//$("#idcategoria").after(" <div id='idcategoria'/>") ;
$("select#idcategoria").change(function(){
// gestore evento change della select
//prendo il valore della select
var input = $(this) ;
$("div#idcategoria"+numeroid).load(
"selectcascata?idcategoria="+input.val(),
null,
function(){}) ;
}) ;
}
$(document).ready(visualizzaselect($("selec#idcategoria").val()));e infine la pagina .jsp di visualizzazione
Codice:
if(DBcategorie.getCategorieFiglie(0).size()>0){
numero = DBcategorie.getCategorieFiglie(0).get(0).getIdcategoria();
}%>
<td><select id="idcategoria" name="idcategoria" onchange="javascript:visualizzaselect(<%=numero%>)">
<!-- la prima voce è 'select a category' con value 0, cosi l'utente fa per forza il click. se la value è 0 io non faccio l'upload-->
<option value="0" selected="selected">Select category</option>
<%
for(Categoria c : DBcategorie.getCategorieFiglie(0)){
//sul click prendo il valore e visualizzo le sottocategorie.
%><option value="<%=c.getIdcategoria()%>"><%=c.getNome()%></option> <%
}
%>
<!-- <option value="0">Other...</option>-->
</select>
<div id="idcategoria<%=numero%>"/>
</td>il metogo getCategorieFiglie() serve a prendere le figlie di una categoria conoscendo il suo id.
Ho creato anche un oggetto Categoria che ha come attributi il nome da visualizzare e l'id.
Al primo caricamento della pagina si visualizzano le 5 categorie principali, il div sottostante viene poi popolato con la funzione js visualizzacategorie()
Ringrazio chiunque voglia aiutarmi, sto sbattendo la testa contro google da giorni ma non ho trovato niente che faccia al mio caso!