Foros del Web » Programando para Internet » Javascript » Frameworks JS »

pasar variables a ventana modal

Estas en el tema de pasar variables a ventana modal en el foro de Frameworks JS en Foros del Web. Necesito aprender a pasar datos a ventanas modales. En concreto de esta manera: dispongo de diferentes links que son imagenes con un link que abre ...
  #1 (permalink)  
Antiguo 06/10/2012, 05:19
 
Fecha de Ingreso: junio-2008
Mensajes: 291
Antigüedad: 15 años, 9 meses
Puntos: 9
pasar variables a ventana modal

Necesito aprender a pasar datos a ventanas modales.

En concreto de esta manera: dispongo de diferentes links que son imagenes con un link que abre una ventana modal con un formulario para renombrar la imagen, etc..
El único problema que tengo es que siempre me pasa el valor de la misma imagen.

Código Javascript:
Ver original
  1. <script type="text/javascript">
  2. //$(document).ready(function(){
  3.                              $(function(){
  4.   var fname=$('a.ico-resize').attr("id");
  5.   var directory=$('a.ico-resize').attr("rel");
  6.   var deletecount=$('a.ico-resize').attr("value");
  7.   $('#titulo').val(fname);
  8.   $('#Alt').val(directory);
  9.   var descripcion = $('#descripcion').val();
  10.  // var descripcion=$('input#descripcion').attr("value");
  11.  
  12.   var dataString = 'descripcion='+ $('#descripcion').val() + '&titulo=' + $('#titulo').val() + '&Alt=' + $('#Alt').val();
  13.   //var data_string = $("#update").serialize();
  14.  
  15.  
  16.     // Damos formato a la Ventana de Diálogo
  17.     var dialog = $("#dialogo").dialog({
  18.         // Indica si la ventana se abre de forma automática
  19.         autoOpen: false,
  20.         // Indica si la ventana es modal
  21.         modal: true,
  22.         // Largo
  23.         //width: 400,
  24.         // Alto
  25.         //height: 280,
  26.         // Creamos los botones     
  27.         height: 300,
  28.         width: 350,
  29.         buttons: {
  30.            
  31.             submitHandler: function(){
  32.             // Serializamos el formulario
  33.             str = $("#update").serialize();
  34.                 // Mostrar Versión de PHP
  35.                 $.ajax({
  36.                        
  37.                     // Antes de realizar la llamada mostramos el ajax load
  38.                     beforeSend: function(){
  39.                         $('#respuestaAjax').html('<img id="loader" src="images/loading.gif"/>');
  40.                     },
  41.                     cache: false, // Indicamos que no se guarde en cache
  42.                     type: 'POST', // Variables GET
  43.                     url:'rename_img.php', // srcript a ejecutar
  44.                      data: str,
  45.                      //data_string,
  46.                      //dataString,
  47.                        contentType: "application/x-www-form-urlencoded", //Tipo de contenido que se enviara
  48.                      
  49.                      //'titulo=titulo&descripcion=descripcion&Alt=Alt',
  50.                      
  51.                      //$("form#update").serialize(),
  52.  
  53.                      //{"file":fname,"directory":directory, "descripcion":descripcion},  // paso de datos
  54.                     // cuando es exitoso el llamado
  55.                         success: function(response){
  56.                          $('#respuestaAjax').html(response);
  57.                         $('#' + deletecount).remove();
  58.                             dialog.dialog( "close" );
  59.                            
  60.                     }
  61.                 });
  62.             },
  63.             Cerrar: function() {
  64.                 // Cerrar ventana de diálogo
  65.                 dialog.dialog( "close" );
  66.             }
  67.  
  68.         }
  69.     });
  70.    
  71.     //$("a.ico-resize").click( function(e) {
  72.  /// e.preventDefault();
  73.  
  74.   // dialog.dialog("open");
  75.   //dialog.dialog('open');
  76.         // prevent the default action, e.g., following a link
  77.         //return false;
  78. //});
  79. });
  80.                        
  81. </script>



dialogo:

Código HTML:
Ver original
  1. <div id="dialogo" title="Editar Imagen">
  2.     <p class="validateTips">Campo titulo requerido.</p>
  3.  
  4.     <form id="update" action="" method="post" name="update">
  5.     <fieldset>
  6.         <label for="titulo">Titulo</label>
  7.         <input type="text" name="titulo" id="titulo"  class="text ui-widget-content ui-corner-all" />
  8.         <label for="Alt">Alt</label>
  9.         <input type="text" name="Alt" id="Alt"  class="text ui-widget-content ui-corner-all" />
  10.         <label for="descripcion">Descripcion</label>
  11.         <input type="text" name="descripcion" id="descripcion"  class="text ui-widget-content ui-corner-all" />
  12.         <input id="envioFormulario" class="boton" type="submit" value="Continuar" name="envioFormulario">
  13.     </fieldset>
  14.     </form></div>



link:
Código PHP:
Ver original
  1. <a class='ico ico-resize'  rel='$directory' href='#'  id='$file' value='delete$count'><span></span></a>
  #2 (permalink)  
Antiguo 06/10/2012, 10:20
 
Fecha de Ingreso: junio-2008
Mensajes: 291
Antigüedad: 15 años, 9 meses
Puntos: 9
Respuesta: pasar variables a ventana modal

Solucionado. Gracias
  #3 (permalink)  
Antiguo 26/12/2012, 20:23
 
Fecha de Ingreso: diciembre-2012
Mensajes: 1
Antigüedad: 11 años, 3 meses
Puntos: 0
Respuesta: pasar variables a ventana modal

Hola Charlyta!

Podiras decirme como lo solucionaste porque yo estoy atorado con lo mismo!! gracias de antemano :D

Etiquetas: ajax, formulario, html, input, javascript, modal, php, variables, ventanas
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 18:21.