javascrip y modelo vista controlador

[rodrigow]

Hola que tal, mi consulta es la siguiente:

Mi página web la estoy diseñando como bien dice el título bajo el patrón de diseño de modelo, vista controlador. Ahora bien lo que deseo hacer y no lo puedo razonar es que dentro de una caja de texto donde el usuario ingresará algo, este texto ser enviado a un controlador.php (dentro de la carpeta controller) y este controlador procesará lo que el usuario ingresó. Espero haberme explicado bien.

Lo que tengo es lo siguiente:

Mi vista muestra la caja de texto, y encontré por la web el siguiente script:

<script>
function showUser(str)
{
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("nombre").innerHTML=xmlhtt p.responseText;
}
}
xmlhttp.open("GET","?controlador=sugerenciaUsuario &accion=paginaWebArtista?paginaWeb="+str,true)
xmlhttp.send();
}
</script>


y mi html es el siguiente:

<form id="detalles" style="display:none">
<input type="text" size="20" maxlength="" value="" name="nombre">
<input type="button" value="Enviar" onclick="showUser(nombre.value)"/>
</form>


Varias dudas:
* "xmlhttp.open("GET","?controlador=sugerenciaUsuari o&accion=paginaWebArtista?paginaWeb="+str,true); " dentro del script, lo que yo entiendo en esa línea es que llama al archivo .php y envía lo capturado dentro de la caja de texto. Es así? Si es así, cómo escribo la url del controlador que procesará lo que escribió el usuario en la caja de texto? (a todos los controladores los llamo de esa manera ?controller=nombreDelControlador&accion=nombreDeLa Accion)

* En el input type="button", está correcto el valor que le paso al script, o sea: nombre.value (donde "nombre" es el name de la caja de texto)?

* Está mal cómo estoy armando esta parte de mi página? Cómo debería hacerlo?

Espero puedan ayudarme y haberme explicado bien, desde ya muchas gracias

[rodrigo791]

xmlhttp.open("GET","?controlador=sugerenciaUsuario &accion=paginaWebArtista?paginaWeb="+str,true)

para enviar la variable str y las demas te esta faltando poner la extension del archivo controlador.

ejemplo

xmlhttp.open("GET","?controlador.php?sugerenciaUsuario=DATO&accion=paginaWebArtista&pag inaWeb="+str,true)

las variables que van por url van separadas por "&" y seguido del nombre de la variable el signo de = y su valor, como acá:

xmlhttp.open...accion=paginaWebArtista....etc..

la variable se llama acción y su valor es paginaWebArtista.

si queres pasar el valor de la variable str hace algo como esto

xmlhttp.open("GET","controlador.php?variable="+str ,true);

y listo.

[rodrigow]

Claro, entiendo lo que me decis, lo que pasa que yo todas las url de mi página las manejo de esa manera que escribí en el código, por eso mi duda si se puede usar ese código de javascript con el patrón de diseño que estoy utilizando.

Las url las formo de esa manera porque yo tengo un controlador principal (frontController) que se encarga de llamar al controlador y acción que se está llamando, y mediante esos controladores que se llaman muestro las distintas vistas. El tema es que eso funciona cada vez que se refleja la página, no se si funciona en este caso que la página no recarga

[rodrigo791]

esto es ajax, de lo que estamos hablando cuando decimos xmlhttprequest.
la forma en como manejes las urls es un tema a parte, para enviar datos hacia el servidor con el metodo open tenes que pasarle la extension siempre, sino nunca se sabra a que archivo van dirigidos los datos, controller.php te puse como ejemplo si es que mandas las variables hacia el.

No tiene mucha ciencia, si queres mandar datos hacia un script de servidor, pone el metodo como pusiste ahí que esta bien, que es GET uno de ellos, luego la url con su extension ( a cada archivo que le mandas datos siempre va la extension ) y sus variables, y luego true.

cualquier cosa te dejo un ejemplo acá http://librosweb.es/ajax/capitulo7/l...plicacion.html

te digo no es muy complicado, te estas quemando mucho la cabeza con el tema de urls y eso no interesa mucho para hacer estas cosas

[rodrigow]

Muchas gracias por la respuesta. Estoy probando aunque sin buen resultado, pero debe ser una pavada que no me estoy dando cuenta

[rodrigo791]

Hey pero pone tu código a ver que estas haciendo mal.

[rodrigow]

Es que ya probé poniendo: xmlhttp.open('GET','prueba.php&paginaWeb='+str,tru e);

y creando un simple archivo "prueba.php" en la carpeta de mi página que lo único que hace es un simple echo "hola";

Y no me funcionó.

Y después colocando la url completa de dónde está mi controlador, o sea, sería algo así: http://127.0.0.1:8080/musicaPagina/i...aWeb='+str

Y nada :(

En esta página:
http://onwebdev.blogspot.com.ar/2011...c-pattern.html
Entiendo que dice que hay que redireccionar a las url de AJAX para que funcione con el modelo vista controlador. Pero no se si es así, ni cómo hacerlo.


Sin ánimos de ofender, pero sabes cómo funciona el modelo vista controlador? Porque vos me decis que no me preocupe por la url (y quizas tengas razón) pero no entiendo como para mostrar una página yo utilizo mi "FrontController" que captura mediante url el nombre del controlador, y de la acción (o sea la public function dentro del controlador) y me arma la url completa y accede al controlador. Lo que no logro comprender es como decirle a AJAX que la url que le paso sea la del controlador al que quiero que acceda. Me explico? Si es localhost/musicaPagina/index.php?controlador=...&accion=...&otrasvariable s=...
o
como armo todas mis url y se las paso a mi front controler para que las procese, por ejemplo este código que uso en un link: <a href="?controlador=buscar&accion=buscarCentro">Bus car</a>

[rodrigo791]

Che no es complicado, si manejas el MVC entonces una peticion ajax tiene que funcionar, depende de 2 cosas el resultado de tu peticion.
1 - de como armes la petición, si la armas bien, creando el objeto xmlhttprequest
2 - la otra es el archivo al cual le envias la petición, los datos, en este caso ese prueba.php, si tenes algo mal ahí entonces hay posibilidades de que no tengas el resultado esperado.

El tema de las urls es solo para el controlador, que asi se maneja, pero cuando queres hacer una peticion ajax tenes que poner el nombre COMPLETO del archivo y eso incluye extensión.

Porque no publicas el codigo donde creas el objeto xmlhttprequest y la petición y también el archivo quien recibe esa petición y devuelve los datos.

[rodrigow]

Antes que nada muchísimas gracias por la respuesta y predisposición, voy a tratar de poner todo lo que tengo a ver si encuentras algo raro:

Por las dudas empiezo por las carpetas donde tengo los archivo:
musicaPagina
prueba.php
-controllers
--sugerenciaUsuarioController.php
-views
--canciones.php

Creo que eso es solo lo que uso para este caso.

En la "view" canciones.php es lo que puse arriba, script y html:

<script>
function showUser(str)
{
if (str=="")
{
document.getElementById("nombre").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("nombre").innerHTML=xmlhtt p.responseText;
}
}
xmlhttp.open('GET','http://127.0.0.1:8080/musicaPagina/index.php?controlador=sugerenciaUsuario&accion=pag inaWebArtista&paginaWeb='+str,true);
xmlhttp.send();
}
</script>


<form id="detalles" style="display:none">
<input type="text" size="20" maxlength="" value="" id="nombre" />
<input type="button" value="Enviar" onclick="showUser(this.value)"/>
</form>

Yo probe un simple "alert" dentro de ese script y me lo mostró, así que en el llamado no estaría el problema.

sugerenciaUsuarioController.php:
<?php
class sugerenciaUsuarioController extends ControllerBase
{
public function paginaWebArtista()
{

echo "Entró al controlador";
}
}
?>

Lo otro que te comentaba antes que probé es:

xmlhttp.open('GET','http://127.0.0.1:8080/musicaPagina/prueba.php?paginaWeb='+str,true);

Y lo único que tiene "prueba.php" es:

<?php
$variable = $_GET["paginaWeb"];
echo "Entró a prueba.php";
?>

[Carloosolrac]

Mira, lo que estás haciendo acá es:

Aquí estás llamando a tu función que tendrá el valor "Enviar". La variable "src" de la función tendrá el valor de enviar, y no el valor que se ponga en el formulario.

Código HTML:

<input type="button" value="Enviar" onclick="showUser(this.value)"/>
 

Aquí estás haciendo una comparación absurda, ya que "str" siempre tendrá el valor "Enviar".
Y a la vez, le estás poniendo HTML al elemento nombre, lo cual, como es un INPUT, NO funcionará.

Código Javascript:

if (str=="")
{
document.getElementById("nombre").innerHTML="";
return;
}
 

Acá intentas que si todo está bien, que se muestre en el input #name el valor que se recibe desde el .open(). Pero como está con innerHTML, tampoco funcionará

Código Javascript:

document.getElementById("nombre").innerHTML=xmlhttp.responseText;
 

************************************************** ***********

Ahora si quieres que entre a otra página, y a la vez muestre el contenido que puso en el input, tienes que poner lo siguiente:

Primero le pones un nombre a tu formulario para identificarlo:
<form id="detalles" name="form" style="display:none">
(No entiendo el display :3)

Luego cambiamos el this.value desde el submit:
<input type="button" value="Enviar" onclick="showUser(this.form.nombre.value)"/>
Con this.form.nombre.value tomará el valor del input nombre.
this: Este formulario
form: nombre del formulario
nombre: id/nombre del input
value: rescatar el valor

Creamos un div de prueba, para ver dónde mostrar el valor:
<div id="mostrar"></div>

Modificamos la siguiente línea:
document.getElementById("mostrar").innerHTML=xmlht tp.responseText;

Y ahí mostrará en el div#mostrar lo que tengamos dentro de nuestro input. Y podrás manejarlo a tu modo.


************************************************** **************

Aquí un ejemplo:

Index.html

Código HTML:

<html>
    <head>
        <script> 
            function showUser(str)
            {
 
            if (str=="")
            {
            document.getElementById("mostrar").innerHTML="";
            return false;
            } 
            if (window.XMLHttpRequest)
            {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
            }
            else
            {// code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange=function()
            {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
            document.getElementById("mostrar").innerHTML=xmlhttp.responseText;
            }
            }
            xmlhttp.open('GET','hola.php?hola='+str,true);
            xmlhttp.send(null);
            }
    </script>
 
    </head>
    <body>
 
            <form id="detalles" name="form">
<input type="text" size="20" maxlength="" value="" id="nombre" />
<input type="button" value="Enviar" onclick="showUser(this.form.nombre.value)"/>
</form>
<div id="mostrar"></div>
    </body>
</html>
 

hola.php

Código PHP:

<?php
$a = $_GET['hola'];
echo $a;
?>
 

Saludos :3

PD: Si quieres datos en un input, tienes que usar:
document.nombreform.nombreinput.value = "Hola";

[rodrigow]

Muchisimas gracias por tu respuesta, en este momento no puedo probarlo para ver si funcionan esas correcciones pero ya estoy ancioso jajaja. Una última consulta, tenes idea cómo puedo hacer para en lugar de llamar a "prueba.php" en el script, llamar a un controlador dentro de una carpeta? Suena tonto, me diras "pone toda la ruta", pero mi duda está (perdón por ser reiterativo con mis otras consultas de mas arriba) en que yo utilizo el modelo vista controlador como patrón de diseño, por ende las url que yo manejo no pongo toda la ruta, sino que un controlador las toma y me las arma colocando el nombre del controlador y la función. Se entiende? A lo mejor como me dijo Rodrigo en otras respuestas, a pesar de esto tenga que poner la ruta completa del controlador. Y ahora pensando, si pongo la ruta completa del controlador y me la toma bien, mi controlador es una clase, por ende hay que instanciarla, cómo hago eso? Si a mi los controladores me los instancia mi "frontController", y si pongo la ruta completa (carpetas y demas) no entra por el frontController. Espero haberme explicado bien

[Carloosolrac]

./carpeta/otracarpeta/controlador.php?hola=mundo&denuevo=hola&atributo=[variable]

si no, saca el ./ y debería funcionar.

[rodrigow]

Que fenomeno la velocidad. Pero insisto, si mi controlador es una clase, cómo sabe AJAX que al mandarle esa ruta va a instanciar esa clase para que funcione. Me explico? Mi controlador no es un simple echo "Hola mundo"; como estaba probando con mi archivo "prueba.php", sino que es un
class sugerenciaUsuarioController(){
public function paginaWeb{
echo "Hola mundo";
}
}

Y esto hay que instanciarlo para que funcione, hasta donde yo se.
Me van a matar jajajaja, gracias por la onda igual

[Carloosolrac]

La instacias al final de la clase

$var = new sugerenciasUsuarioController;
$var->paginaWeb();

:p
Recuerda que AJAX toma el valor que retorna el archivo. Si no hay nada, no retornará nada

[rodrigow]

Noooo locoooo!!!! SOS UN GROSO!!!! Me funcionó perfecto!!!! Que felicidad, jajajaja, perdón que tarde en contestar es que no tuve tiempo de sentarme en la compu estos días. Mil gracias. No tuve necesidad de instanciar el controlador, solo con poner index.php?controlador=sugerenciaUsuario&accion=pag inaWeb mas las otras correcciones que me hiciste me funcionó. Mil gracias de nuevo a los dos por la colaboración. Saludos