Problema de acceso a elementos en una web con mvc hecha con ajax anidado
Estoy siguiendo un tutorial avanzado de como hacer un sistema crud en mvc y que todo funcione bajo ajax.
El mvc y el crud no es que sea demasiado complejo en si(EN ESTE EJERCICIO), el problema esta en que todo esta hecho en ajax
Intentaré explicarlo para que se me pueda entender.
Tengo una web con todo un codigo generico mas o menos asi
Head
Body
Div ajax contenedor de todo nivel 1
Div ajax para crud de seleccion para mostrar productos y posibilidad de agregar productos nivel 2
Div ajax que muestra formulario para agregar el producto seleccionado nivel 3
Submit con onclick que inserta una validacion si la pasa iria al siguiente div nivel 3
{
DIV AJAX INSERTA PRODUCTOS NIVEL 4
}
FooterSI LE PONGO NOMBRE UNICAMENTE A LOS DIV AJAX SERIA ALGO ASI
DIV RESULTADOS NIVEL 1
Div seleccionproductos nivel 2
Div validacion nivel 3
Submit nivel 3
{
DIV INSERCCION NIVEL 4
}Y EL CODIGO FUENTE DE LA PAGINA MUESTRA ESTO.
Head Body Div ajax contenedor de todo Footer
Es decir, todas las paginas escritas en ajax debajo del primer nivel son completamente invisibles, lo cual es normal debido a que toda la funcionalidad la cargamos en ese div y vamos bajando, pero eso hace que no puedas ver errores en el codigo fuente por lo que es mas complejo aun.
Al escribir este mensaje en todoexpertos no se si me guardará las tabulaciones por eso he preferido nombrar los divs por niveles, siendo el nivel 1 el de mas arriba del todo y el nivel 4 el ultimo y el nivel 1 contendria todos los demas niveles, el nivel 2 contendria el 3 y el 4 y el nivel 3 contendria el nivel 4
Como veis toda la funcionalidad de la web esta en el div resultados y de hecho es el unico que se ve en el codigo fuente, permaneciendo todo el codigo anidado despues completamente oculto, esto no esta mal del todo, el problema es cuando quiero subir niveles hacia arriba, me da error en todo, ya sea javascript, estilos css, en todo. La mayor parte de los estilos css se corrigen con rutas absolutas pero aun asi hay algunos estilos y funciones que no "llegan" a niveles algo mas profundos
Desde el nivel de la validacion (ver esquema de arriba) estaba intentando usar un getElementbyId para acceder a un div que estaba en el nivel del formulario para que en el caso de que no pasara la validacion, mostrara un error, el div existe pero me es imposible acceder a el, me da este error
Concretamente problemas de este tipo
Uncaught TypeError: document.formulariox.getElementById is not a function
at <anonymous>:2:22
at Object.InjectedScript._evaluateOn (<anonymous>:895:140)
at Object.InjectedScript._evaluateAndWrap (<anonymous>:828:34)
at Object.InjectedScript.evaluate (<anonymous>:694:21)
Yo queria hacer algo asi(ESTO ESTA EN EL NIVEL DE LA VALIDACION) y en vez de usar el alert usar el getElementById
if( document.formulariox.nombre.value == "")
{
alert('El nombre esta vacio'); ----este funciona
document.formulariox.getElementById("validator").value = 'El nombre esta vacio'; --preferiria usar este pero me da el error de arriba
document.formulariox.nombre.value="";
document.formulariox.nombre.focus();
return false;
}En el nivel 3 tengo un input submit con un onclick que te lleva a una funcion javacript que contiene la validacion anterior y debajo de ese input hay un div con un id validator vacio
Salvo la parte de ajax el resto de la pagina esta en php.
Me gustaria poner todo el codigo pero es demasiado extenso.
Como veis diria que hay una doble dificultad, por un lado tenemos un patron mvc, que como digo es sencillo pero complica un poco lo referente a las rutas, y luego que toda la pagina es ajax.
Sé que es algo compleja la explicacion, pero me gustaria saber si existe algún modo de trabajo con el que evitar errores de acceso a elementos como por ejemplo en el div.
