Ver Mensaje Individual
  #1 (permalink)  
Antiguo 06/10/2012, 05:19
charlyta
 
Fecha de Ingreso: junio-2008
Mensajes: 291
Antigüedad: 16 años, 5 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>