...siguiendo con la investigacion...
estuve estudiando sobre ajax, prototype y jquery y pronto voy a empezar a implementar jquery en mi proyecto ( por lo q investigue jquery es mas robusto q prototype, menos lineas de codigo y mas aplicaciones :) )
pero por el momento quiero implementarlo a la antiguita ...estuve viendo lo del famoso XMLHttpRequest y viendo un ejem en internet trate de implementarlo pero sin buenos resultados
Mi objetivo es q llenado el combobox cbxCategoria desde una BD (ya lo logre) al escoger una de sus opciones se llene el otro combobox cbxTalla (tb desde la BD) con las tallas correspondientes a la categoria seleccionada (esto es lo q aun no puedo hacer con el ajax)
en el struts-config.xml
Código:
<action path="/CategoriaAction" type="actions.categoriaAction">
en el jsp
Código:
...
<script type="text/javascript">
function cbxCategoria_Click()
{
firstBox = document.getElementById('cbxCategoria');
//Nothing selected
//if(firstBox.selectedIndex==0){
// return;
//}
selectedOption = firstBox.options[firstBox.selectedIndex].value;
//get the (form based) params to push up as part of the get request
url="CategoriaAction.do?selectedOption="+selectedOption;
//Do the Ajax call
if (window.XMLHttpRequest){ // Non-IE browsers
req = new XMLHttpRequest();
//A call-back function is define so the browser knows which function to call after the server gives a reponse back
req.onreadystatechange = populateSecondBox;
try {
req.open("GET", url, true); //was get
} catch (e) {
alert("Cannot connect to server");
}
req.send(null);
} else if (window.ActiveXObject) { // IE
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req) {
req.onreadystatechange = populateSecondBox;
req.open("GET", url, true);
req.send(null);
}
}
//Callback function
function populateSecondBox(){
document.getElementById('cbxTalla').options.length = 0;
if (req.readyState == 4) { // Complete
if (req.status == 200) { // OK response
textToSplit = req.responseText
//Split the document
returnElements=textToSplit.split("||")
//Process each of the elements
for ( var i=0; i < returnelements.length; i++ ){
valueLabelPair = returnElements[i].split(";")
document.getElementById('cbxTalla').options[i] = new Option(valueLabelPair[0], valueLabelPair[1]);
}
}
}
else {
alert("Bad response by the server");
}
}
}
</script>
...
<html:form action="/nuevoProducto" >
<table border="0" align="center" cellpadding="5" cellspacing="4" width="650">
<tbody>
<tr>
<td align="right" valign="middle">
Categoria:
</td>
<td valign="middle">
<html:select property="cbxCategoria" onchange="cbxCategoria_Click();" >
<c:forEach var="row" items="${rsCategoria.rows}">
<html:option value="${row.categoria_id}">${row.descripcion}</html:option>
</c:forEach>
</html:select>
</td>
</tr>
<tr>
<td align="right" valign="middle">
Talla:
</td>
<td valign="middle">
<html:select property="cbxTalla" >
</html:select>
</td>
</tr>
<tr>
<td colspan="2" align="center" valign="middle">
<html:submit property="method" >
<bean:message key="buttons.btnNuevoProducto"/>
</html:submit>
</td>
</tr>
</tbody>
</table>
</html:form>
en el action
Código:
public class categoriaAction extends org.apache.struts.action.Action {
public ActionForward execute(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response)
throws Exception {
String optionSelected = request.getParameter("optionSelected");
// List options = getSecondOptions(optionSelected);
// //Make a String representation where each option is seperated by '||' and a value and a label by ';'
// String outLine = makeOutputString(options);
// out.print(outLine);
return null;
}
}
El problema es q cada vez q escojo un elemento del cbxCategoria me sale el msg "Bad response by the server" 4 veces... (xq 4vcs si no hay ningun bucle????)
Siguiendo el error, este aparece en la funcion populateSecondBox() debido (...creo...) a q no se esta mandando corectamente la URL
Se podran dar cuenta de q parte del codigo del Action esta comentado debido a 2 cosas:
1. como lo baje el ejem de internet no tengo implementadas las funciones q estan comentadas
2. como no se aun mucho de ajax no se como el Action devuelve la cadena q sera interpretada por la funcion populateSecondBox()... xq out.print(outLine); ?? ... Pero a simple vista es ovbio q no devuelve los datos como XML (q es otro forma de devolver los datos del server al ajax) Tb es obvio q el Action devuelve null debido a q solo pasara datos mas no hara un redireccionamiento ;)
Al parecer dentro de la funcion populateSecondBox() deberia procesar una cadena (req.responseText devuelta por el server con ayuda del Action) algo como textToSplit = "talla1;1||talla2;2||talla3;3..." y teniendo esta cadena se procesaria y se llenaria el cbxTalla
Pero nose como implementar bien el Action para lograr lo q deseo (devolver los valores q tendra el cbxTalla por medio de una consulta con parametro a la BD)
Otra cosa curiosa es q poniendole un breakpoint al Action (y despues de escoger un elemento del cbxCategoria) veo q el valor q toma String optionSelected = request.getParameter("optionSelected") es null ... es decir no esta recibiendo el dato pasado como parametro por la URL del ajax ... xq no pasa el valor optionSelected pero si se llama al Action???
Ojo q el breakpoint es llamado despues de q me salen 2 vcs el msg "Bad response by the server" ... curioso ¿?¿?¿?
Salu2