Ventana Modal
144 views
Skip to first unread message
TheFore
Sep 19, 2011, 8:41:29 AM9/19/11
to Yupp Framework PHP
Aqui les dejo el demo de la ventana modal con ajax
http://publicanet.com.mx/yupp_cms/
esta se ejecuta con una funcion
accion(pagina,titulo,metodo,variables,anchura,altura);
Argumentos
Pagina: Url que ara la llamada AJAX
Titulo: Encabezado que tendra la ventana modal
Metodo: Metodo de envio de datos puede ser POST o GET
Variables:Datos que enviaremos este debe ser un vector separado por
pipen "|"
Anchura: Anchura de la ventana modal
Altura: Altura de la ventana modal
http://publicanet.com.mx/yupp_cms/
esta se ejecuta con una funcion
accion(pagina,titulo,metodo,variables,anchura,altura);
Argumentos
Pagina: Url que ara la llamada AJAX
Titulo: Encabezado que tendra la ventana modal
Metodo: Metodo de envio de datos puede ser POST o GET
Variables:Datos que enviaremos este debe ser un vector separado por
pipen "|"
Anchura: Anchura de la ventana modal
Altura: Altura de la ventana modal
Pablo Pazos
Sep 20, 2011, 12:21:36 PM9/20/11
to yuppfram...@googlegroups.com
Hola Francisco,
Estuve analizando el código de tu ejemplo y quería pasarte comentarios para seguir avanzando en este tema.
Si entendí bien, la acción lo que hace es:
¿Qué les parece?
Saludos,
Pablo.
--
Atte.
Ing. Pablo Pazos Gutiérrez
LinkedIn: http://uy.linkedin.com/in/pablopazosgutierrez
Blog: http://informatica-medica.blogspot.com/
Sígueme en twitter: http://twitter.com/ppazos
Estuve analizando el código de tu ejemplo y quería pasarte comentarios para seguir avanzando en este tema.
Si entendí bien, la acción lo que hace es:
- Llamada por ajax al servidor, a la URL, con parámetros Variables.
- Se sustituyen los "|" por un caracter vacío.
- Si no hay Variables, la llamada por ajax no se hace.
- Si hay variables, se hace la llamada, y muestra la ventana modal con la respuesta (datos) como contenido.
- La ventana modal se muestra con ancho y alto que se le pasó por parámetros.
- En el punto 2 creo que sería más efectivo pasarle un array y no tener que procesar el string. Además en "data" de la llamada ajax se le puede pasar un array, o también se puede convertir a un string de params: var1=val1&var2=val2...
- En el punto 3 no me queda claro porqué no se hace la llamada si no se pasan Variables, creo que la llamada puede hacerse igual sin parámetros.
- En el punto 4 creo que pasa lo que comenté en otro hilo: si la respuesta tiene javascript, este no se ejecutará. En el mismo hilo puse algunas alternativas para solucionarlo, así que no sería mucho problema.
- En el punto 5, la ventana se muestra con el tamaño que se le pasó como parámetro, pero a priori quien llama no sabe el tamaño del contenido (porque el contenido todavía no se cargó), así que puede quedar una ventana más grande o más chica de lo que se necesita. Ahora este tema está solucionado en el código del CMS usando iframe para la ventana modal y llamadas por javascript desde el contenido luego de cargarse, y ahí ya se tiene el tamaño real del contenido. Con esto se logra adaptar la ventana al tamaño de su contenido. Igualmente creo que con divs y un poco de CSS este efecto se podría lograr de todas formas sin necesidad de javascript, pero en ese caso, no se le debería pasar por parámetro el tamaño.
¿Qué les parece?
Saludos,
Pablo.
2011/9/19 TheFore <fcoes...@gmail.com>
--
Has recibido este mensaje porque estás suscrito al grupo "Yupp Framework PHP" de Grupos de Google.
Para publicar una entrada en este grupo, envía un correo electrónico a yuppfram...@googlegroups.com.
Para anular tu suscripción a este grupo, envía un correo electrónico a yuppframeworkp...@googlegroups.com
Para tener acceso a más opciones, visita el grupo en http://groups.google.com/group/yuppframeworkphp?hl=es.
--
Atte.
Ing. Pablo Pazos Gutiérrez
LinkedIn: http://uy.linkedin.com/in/pablopazosgutierrez
Blog: http://informatica-medica.blogspot.com/
Sígueme en twitter: http://twitter.com/ppazos
TheFore
Sep 21, 2011, 12:49:15 AM9/21/11
to Yupp Framework PHP
> - En el punto 2 creo que sería más efectivo pasarle un array y no tener
> que procesar el string. Además en "data" de la llamada ajax se le puede
> pasar un array, o también se puede convertir a un string de params:
> var1=val1&var2=val2...
lo que pasa que en el controlador lo podrias pasar con un array
> pasar un array, o también se puede convertir a un string de params:
> var1=val1&var2=val2...
ejemplo:
$agrega=new Usuarios;
$consulta->agrega->agrega_user(array);
> - En el punto 3 no me queda claro porqué no se hace la llamada si no se
> pasan Variables, creo que la llamada puede hacerse igual sin parámetros.
No pasa por que estoy validando que no esten vacia la consulta
> - En el punto 4 creo que pasa lo que comenté en otro hilo: si la
> respuesta tiene javascript, este no se ejecutará. En el mismo hilo puse
> algunas alternativas para solucionarlo, así que no sería mucho problema.
solo las llamadas se hacen con javascript, la respuesta y
> algunas alternativas para solucionarlo, así que no sería mucho problema.
almacenamiento es en php
> - En el punto 5, la ventana se muestra con el tamaño que se le pasó como
> parámetro, pero a priori quien llama no sabe el tamaño del contenido (porque
> el contenido todavía no se cargó), así que puede quedar una ventana más
> grande o más chica de lo que se necesita. Ahora este tema está solucionado
> en el código del CMS usando iframe para la ventana modal y llamadas por
> javascript desde el contenido luego de cargarse, y ahí ya se tiene el tamaño
> real del contenido. Con esto se logra adaptar la ventana al tamaño de su
> contenido. Igualmente creo que con divs y un poco de CSS este efecto se
> podría lograr de todas formas sin necesidad de javascript, pero en ese caso,
> no se le debería pasar por parámetro el tamaño.
Ha este codigo solo es creado por si quieres formularios que nosotros
> el contenido todavía no se cargó), así que puede quedar una ventana más
> grande o más chica de lo que se necesita. Ahora este tema está solucionado
> en el código del CMS usando iframe para la ventana modal y llamadas por
> javascript desde el contenido luego de cargarse, y ahí ya se tiene el tamaño
> real del contenido. Con esto se logra adaptar la ventana al tamaño de su
> contenido. Igualmente creo que con divs y un poco de CSS este efecto se
> podría lograr de todas formas sin necesidad de javascript, pero en ese caso,
> no se le debería pasar por parámetro el tamaño.
usaremos para el usuario final debemos acondicionarlo
pabl...@gmail.com
Sep 21, 2011, 1:15:56 AM9/21/11
to Yupp Framework PHP
Hola Francisco,
Te respondo entre líneas.
Saludos!
On Sep 21, 1:49 am, TheFore <fcoestra...@gmail.com> wrote:
> > - En el punto 2 creo que sería más efectivo pasarle un array y no tener
> > que procesar el string. Además en "data" de la llamada ajax se le puede
> > pasar un array, o también se puede convertir a un string de params:
> > var1=val1&var2=val2...
>
> lo que pasa que en el controlador lo podrias pasar con un array
> ejemplo:
>
> $agrega=new Usuarios;
> $consulta->agrega->agrega_user(array);
Estoy de acuerdo, yo estaba comentando el código en el cliente
(javascript) no el php en el servidor.
He buscado info acerca de lo que te comentaba, aquí puedes encontrar a
lo que me refería:
http://api.jquery.com/jQuery.ajax/
$.ajax({
url: "script.php",
global: false,
type: "POST",
data: {id : this.getAttribute('id')},
dataType: "html",
async:false,
success: function(msg){
alert(msg);
}
}
)
otra opción con el query string:
$.ajax({
type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function(msg){
alert( "Data Saved: " + msg );
}
});
Y en esta se ve como pasar de un array a un query string:
http://api.jquery.com/jQuery.param/
// <=1.3.2:
$.param({ a: [2,3,4] }) // "a=2&a=3&a=4"
// >=1.4:
$.param({ a: [2,3,4] }) // "a[]=2&a[]=3&a[]=4"
No se si se entiende a lo que me refería, quería decir que no es
necesario que pongas los params entre pipes, jquery ya soporta pasar
objetos o query string.
>
> > - En el punto 3 no me queda claro porqué no se hace la llamada si no se
> > pasan Variables, creo que la llamada puede hacerse igual sin parámetros.
>
> No pasa por que estoy validando que no esten vacia la consulta
>
Ok. Solo para agregar: para el CMS pueden haber consultas sin params
que abran correctamente una ventana modal, por ejemplo pasa cuando
queremos crear un nuevo módulo, solo se necesita la url y no se envía
ningún parámetro.
> > - En el punto 4 creo que pasa lo que comenté en otro hilo: si la
> > respuesta tiene javascript, este no se ejecutará. En el mismo hilo puse
> > algunas alternativas para solucionarlo, así que no sería mucho problema.
>
> solo las llamadas se hacen con javascript, la respuesta y
> almacenamiento es en php
>
Cuando envías el pedido por ajax, eso se procesa en php y devuelve una
respuesta. La respuesta es lo que se muestra en el contenido de la
ventana. Ese contenido no siempre es html estático, y puede incluir
javascript que debe ejecutarse del lado del cliente. En el código
actual del CMS se muestra ese comportamiento. ¿Se entiende la idea?
Es lo mismo que puedes ver en facebook: las ventanas modales tienen
comportamiento implementado en javascript que se carga por ajax para
ejecutarse en el cliente (no en el servidor).
Aparte, esto nos da gran flexibilidad. Por ejemplo, si uno muestra un
formulario en una ventana modal, cuando esta ser carga, también se
puede cargar un javascript de validación, entonces si el usuario pone
valores erróneos, el javascript le muestra dinámicamente los errores,
todo sin ir al servidor.
> > - En el punto 5, la ventana se muestra con el tamaño que se le pasó como
> > parámetro, pero a priori quien llama no sabe el tamaño del contenido (porque
> > el contenido todavía no se cargó), así que puede quedar una ventana más
> > grande o más chica de lo que se necesita. Ahora este tema está solucionado
> > en el código del CMS usando iframe para la ventana modal y llamadas por
> > javascript desde el contenido luego de cargarse, y ahí ya se tiene el tamaño
> > real del contenido. Con esto se logra adaptar la ventana al tamaño de su
> > contenido. Igualmente creo que con divs y un poco de CSS este efecto se
> > podría lograr de todas formas sin necesidad de javascript, pero en ese caso,
> > no se le debería pasar por parámetro el tamaño.
>
> Ha este codigo solo es creado por si quieres formularios que nosotros
> usaremos para el usuario final debemos acondicionarlo
No me refería al formulario que se cargua, sino al poder adaptar el
tamaño de la ventana al tamaño del contenido (sea cual sea), y este
tamaño no se tiene al crear la ventana, se tiene luego de obtener el
resultado de la llamada ajax al servidor. En el ejemplo que mostraste,
el tamaño se debe especificar antes de hacer la llamada ajax.
Igual creo que quienes sepan más de CSS que yo pueden solucionar ese
problema sin javascript, solo poniendo reglas con min-width, min-
height, overflow y algo más. Habría que probarlo bien...
Te respondo entre líneas.
Saludos!
On Sep 21, 1:49 am, TheFore <fcoestra...@gmail.com> wrote:
> > - En el punto 2 creo que sería más efectivo pasarle un array y no tener
> > que procesar el string. Además en "data" de la llamada ajax se le puede
> > pasar un array, o también se puede convertir a un string de params:
> > var1=val1&var2=val2...
>
> lo que pasa que en el controlador lo podrias pasar con un array
> ejemplo:
>
> $agrega=new Usuarios;
> $consulta->agrega->agrega_user(array);
(javascript) no el php en el servidor.
He buscado info acerca de lo que te comentaba, aquí puedes encontrar a
lo que me refería:
http://api.jquery.com/jQuery.ajax/
$.ajax({
url: "script.php",
global: false,
type: "POST",
data: {id : this.getAttribute('id')},
dataType: "html",
async:false,
success: function(msg){
alert(msg);
}
}
)
otra opción con el query string:
$.ajax({
type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function(msg){
alert( "Data Saved: " + msg );
}
});
Y en esta se ve como pasar de un array a un query string:
http://api.jquery.com/jQuery.param/
// <=1.3.2:
$.param({ a: [2,3,4] }) // "a=2&a=3&a=4"
// >=1.4:
$.param({ a: [2,3,4] }) // "a[]=2&a[]=3&a[]=4"
No se si se entiende a lo que me refería, quería decir que no es
necesario que pongas los params entre pipes, jquery ya soporta pasar
objetos o query string.
>
> > - En el punto 3 no me queda claro porqué no se hace la llamada si no se
> > pasan Variables, creo que la llamada puede hacerse igual sin parámetros.
>
> No pasa por que estoy validando que no esten vacia la consulta
>
que abran correctamente una ventana modal, por ejemplo pasa cuando
queremos crear un nuevo módulo, solo se necesita la url y no se envía
ningún parámetro.
> > - En el punto 4 creo que pasa lo que comenté en otro hilo: si la
> > respuesta tiene javascript, este no se ejecutará. En el mismo hilo puse
> > algunas alternativas para solucionarlo, así que no sería mucho problema.
>
> solo las llamadas se hacen con javascript, la respuesta y
> almacenamiento es en php
>
respuesta. La respuesta es lo que se muestra en el contenido de la
ventana. Ese contenido no siempre es html estático, y puede incluir
javascript que debe ejecutarse del lado del cliente. En el código
actual del CMS se muestra ese comportamiento. ¿Se entiende la idea?
Es lo mismo que puedes ver en facebook: las ventanas modales tienen
comportamiento implementado en javascript que se carga por ajax para
ejecutarse en el cliente (no en el servidor).
Aparte, esto nos da gran flexibilidad. Por ejemplo, si uno muestra un
formulario en una ventana modal, cuando esta ser carga, también se
puede cargar un javascript de validación, entonces si el usuario pone
valores erróneos, el javascript le muestra dinámicamente los errores,
todo sin ir al servidor.
> > - En el punto 5, la ventana se muestra con el tamaño que se le pasó como
> > parámetro, pero a priori quien llama no sabe el tamaño del contenido (porque
> > el contenido todavía no se cargó), así que puede quedar una ventana más
> > grande o más chica de lo que se necesita. Ahora este tema está solucionado
> > en el código del CMS usando iframe para la ventana modal y llamadas por
> > javascript desde el contenido luego de cargarse, y ahí ya se tiene el tamaño
> > real del contenido. Con esto se logra adaptar la ventana al tamaño de su
> > contenido. Igualmente creo que con divs y un poco de CSS este efecto se
> > podría lograr de todas formas sin necesidad de javascript, pero en ese caso,
> > no se le debería pasar por parámetro el tamaño.
>
> Ha este codigo solo es creado por si quieres formularios que nosotros
> usaremos para el usuario final debemos acondicionarlo
tamaño de la ventana al tamaño del contenido (sea cual sea), y este
tamaño no se tiene al crear la ventana, se tiene luego de obtener el
resultado de la llamada ajax al servidor. En el ejemplo que mostraste,
el tamaño se debe especificar antes de hacer la llamada ajax.
Igual creo que quienes sepan más de CSS que yo pueden solucionar ese
problema sin javascript, solo poniendo reglas con min-width, min-
height, overflow y algo más. Habría que probarlo bien...
Reply all
Reply to author
Forward
0 new messages