• Publicidad

Select dependiente con CGI::Ajax

¿Ya sabes lo que es una referencia? Has progresado, el nível básico es cosa del pasado y ahora estás listo para el siguiente nivel.

Notapor zozo666 » 2007-10-03 14:33 @648

Ahora estoy usando eso el dynamicoptionlist pero igualmente me gustaría saber cómo pasar los parámetros al TMPL desde el script Ajax, yo intenté haciendo que en el onChange se comunique con una función del script y me genere un select con los valores correspondientes. Pero el problema es que al estar dentro de div, no funcionan los values para utilizarlos en el form.

¿No hay ninguna otra forma de hacer esto, algo sencillo, en Ajax, alguna idea?
zozo666
Perlero nuevo
Perlero nuevo
 
Mensajes: 139
Registrado: 2007-05-26 10:36 @483

Publicidad

Notapor kidd » 2007-10-03 16:51 @744

Lo primero que debes de hacer es crear o buscar un JavaScript que te permite hacer update de un select box, ya con eso, entonces lo puedes modificar para que en vez de poner lo valores con variables dentro de JavaScript, tome los valores de una respuesta con Ajax.
Uriel Lizama Perl programmer fundador de Perl en Español
Perl Programming Language
Avatar de Usuario
kidd
Creador de Perl en Español
Creador de Perl en Español
 
Mensajes: 1166
Registrado: 2003-10-15 16:52 @744
Ubicación: México

Notapor zozo666 » 2007-10-03 18:03 @794

Estuve viendo el "dynamicoptionlist" y lo usé, pero tenía el presentimiento de que tampoco me iba a funcionar, el problema es que como no aparece el código de los option en la página cuando mando los datos a la función Ajax: {notificacion_enviar( ['evento_fecha','evento_titulo','evento_hora','cnlhorario','email','empresa'], ['mensaje_noti'] );} no me los toma, por lo tanto no me realiza la operación que yo quiero.

El tema es que el div "empresa" no aparece en la página, eso es todo código javascript que se encarga de listar todos los option, por lo tanto no puedo extraer el empresa = document.form1.empresa.value" porque el id empresa no existe ya que al ser código javascript el que lo genera, no aparece en la página, solamente veo que aparece cuando hago un submit con un GET pero no me sirve de esa manera.

¿Qué solución hay a esto? Hace horas que vengo con esto y la verdad no lo puedo solucionar.
zozo666
Perlero nuevo
Perlero nuevo
 
Mensajes: 139
Registrado: 2007-05-26 10:36 @483

Notapor explorer » 2007-10-03 19:31 @854

La solución del problema de crear select actualizados en cascada con Ajax... en puro Perl:
Sintáxis: [ Descargar ] [ Ocultar ]
Using perl Syntax Highlighting
  1. #!/usr/bin/perl -w
  2. #
  3. # Ejemplo de CGI::Ajax, extraído del ejemplo
  4. # 'pjx_combo.pl' de la distribución CGI::Ajax
  5. #
  6. # Joaquín Ferrero. 20071004
  7. #
  8. # INSTALACIÓN: en algún lugar donde el servidor web pueda ejecutarlo
  9. #
  10. # este script muestra un conjunto dinámico de cajas select, donde la
  11. # selección en una caja cambia los contenidos de la otra, o los valores
  12. # html de un div. Los datos de cada select provienen de un hash, pero
  13. # puede ser también de una conexión con una base de datos, etc.
  14. #
  15. # Nota, se requiere una versión de CGI::Ajax >= 0.49
  16. #
  17.  
  18. use CGI ':standard';
  19. use CGI::Ajax 0.49;
  20.  
  21. use strict;
  22.  
  23. # Nuestra base de datos
  24. my %datos = (
  25.     tipo_1 => {
  26.                 nombre    => 'Homer Simpson',
  27.                 direccion => 'Evergreen Terrace',
  28.     },
  29.     tipo_2 => {
  30.                 apodo     => 'Sean Connery',
  31.                 objetivo  => 'Downtown Street',
  32.     },
  33.     tipo_3 => {
  34.                 empresa   => 'Aprosi',
  35.                 calle     => 'Fanega, 1',
  36.     },
  37.     tipo_4 => {
  38.                 usuario     => 'zozo666',
  39.                 procedencia => 'Desconocida',
  40.     },
  41. );
  42.  
  43. # Lista de funciones a exportar al JavaScript
  44. my %funciones = (
  45.     Select1   => \&select1,
  46.     Select2   => \&select2,
  47.     Resultado => \&resultado,
  48. );
  49.  
  50. # Nuestros objetos CGI y CGI::Ajax
  51. my $cgi  = CGI->new();
  52. my $ajax = CGI::Ajax->new( %funciones );
  53.  
  54. # Inicializa algunos parámetros del comportamiento CGI::Ajax
  55. $ajax->JSDEBUG(1); # activa el depurado javascript, que colocará un
  56.                    #  nuevo elemento div al final de nuestra página mostrando
  57.                    #  el URL de la petición asíncrona
  58.  
  59. # Salida de nuestra página web
  60. print $ajax->build_html( $cgi, \&muestra_html );
  61.  
  62.  
  63. ### Subrutinas
  64.  
  65. # Salida del HTML.
  66. # He añadido una función javascript para borrar los contenidos.
  67. # Esto evitará efectos extraños al sobreescribir un div sin antes
  68. # vaciarlo.
  69. # P.D.: para ser completamente puristas, este código debería ser
  70. # generado con funciones del propio módulo CGI
  71. sub muestra_html {
  72.     my $html = <<EOT;
  73. <HTML>
  74. <HEAD><title>Ejemplo CGI::Ajax de select en cascada</title>
  75. <SCRIPT>
  76. // define una funcion para limpiar adecuadamente los div
  77. function reinicia_div( ) {
  78.     if ( arguments.length ) {
  79.         // reinicia un div especifico
  80.         for(var i = 0; i < arguments.length; i++ ) {
  81.             document.getElementById(arguments[i]).innerHTML = "";
  82.         }
  83.     }
  84.     else {
  85.         // reinicia todos los div
  86.         document.getElementById("div_lista1").innerHTML = "";
  87.         document.getElementById("div_lista2").innerHTML = "";
  88.         document.getElementById("div_resultado").innerHTML = "";
  89.     }
  90. }
  91. </SCRIPT>
  92.  
  93. </HEAD>
  94. <BODY onload="reinicia_div(); Select1([],['div_lista1']); return true;" >
  95. <form><table border="3">
  96. <tr>
  97.     <td><div id="div_lista1"></div></td>
  98.     <td><div id="div_lista2"></div></td>
  99.     <td><div id="div_resultado" style="border: 1px solid black; width: 240px; height: 80px; overflow: auto"></div></td>
  100. </tr>
  101. <tr>
  102.     <td colspan="2"><input type="text" name="textfield"></td>
  103.     <td><input type="submit" name="Submit" value="Submit"></td>
  104. </table></form>
  105. </BODY>
  106. </HTML>
  107. EOT
  108.  
  109.     return $html;
  110. }
  111.  
  112. # Estas son las funciones exportadas - notar que Select1 y Select2
  113. # solo están devolviendo el html que es insertado en sus correspondientes
  114. # elementos div
  115. sub select1 {
  116.  
  117.     # Creamos un select, cuyo Onclick activa la petición Ajax
  118.     # En la petición Ajax Select2 pasamos el valor elegido en select_1 e
  119.     # indicamos que el resultado debe quedarse en el div_lista2
  120.     # Aquí usamos las facilidades del módulo CGI para crear código HTML
  121.     # sin verlo:
  122.     my $html
  123.         = Select(
  124.             {
  125.                 -id      =>  'select_1',
  126.                 -name    =>  'lista_1_nombre',
  127.                 -size    =>   4,
  128.                 -OnClick => q{reinicia_div('div_resultado'); Select2( ['select_1'], ['div_lista2'] ); return true;},
  129.             },
  130.  
  131.             # Obtener los valores desde nuestros %datos.
  132.             # Podría ser también una consulta a una base de datos
  133.             # Por cada uno de ellos, lo map()eamos a una <option>
  134.             map { option($_) } sort keys %datos,
  135.     );
  136.  
  137.     return $html;
  138. }
  139.  
  140. sub select2 {
  141.  
  142.     # Recibimos como argumento el valor activado en el select_1
  143.     my $valor_select_1 = shift;
  144.  
  145.     # Igual que antes, creamos el html a mostrar en el div
  146.     # Es un select que, al activarse un valor, hace otra llamada Ajax,
  147.     # esta vez a la función Resultado pasándole los valores de los dos select,
  148.     # y dejando la respuesta en div_resultado
  149.     # En esta ocasión armamos el select creando el código HTML directamente,
  150.     # para compararlo con la forma anterior
  151.     my $html
  152.         = q{<select multiple id="select_2" name="lista_2_nombre" size=3 }
  153.         . q{onclick="Resultado( ['select_1','select_2'], ['div_resultado'] ); return true;">}
  154.         ;
  155.  
  156.     # Mostramos los valores desde %datos
  157.     foreach my $valor ( keys %{ $datos{ $valor_select_1 } } ) {
  158.         $html .= '<option value=' . $valor . '>' . $valor . "</option>";
  159.     }
  160.  
  161.     $html .= "</select>";
  162.  
  163.     return $html;
  164. }
  165.  
  166. sub resultado {
  167.  
  168.     # Recibimos varios argumentos.
  169.     # El primero es el valor de select_1
  170.     my $valor_select_1 = shift;
  171.  
  172.     # Lo que vamos a devolver es el texto dentro del div
  173.     my $html = "";
  174.  
  175.     # El segundo argumento puede ser un conjunto de valores,
  176.     # porque el select_2 tiene el atributo 'multiple'.
  177.     while ( @_ ) {
  178.         my $valor_select_2 = shift;
  179.         $html .= $datos{ $valor_select_1 }{ $valor_select_2 } . "<br>";
  180.   }
  181.  
  182.   return $html;
  183. }
  184.  
  185. __END__
Coloreado en 0.007 segundos, usando GeSHi 1.0.8.4
Última edición por explorer el 2008-04-25 14:00 @625, editado 1 vez en total
JF^D Perl programming & Raku programming. Grupo en Telegram: https://t.me/Perl_ES
Avatar de Usuario
explorer
Administrador
Administrador
 
Mensajes: 14480
Registrado: 2005-07-24 18:12 @800
Ubicación: Valladolid, España

Notapor zozo666 » 2007-10-04 07:37 @359

Muchas gracias ya lo estoy probando...
zozo666
Perlero nuevo
Perlero nuevo
 
Mensajes: 139
Registrado: 2007-05-26 10:36 @483

Anterior

Volver a Intermedio

¿Quién está conectado?

Usuarios navegando por este Foro: No hay usuarios registrados visitando el Foro y 6 invitados

cron