renaming file with jquery and php from modal window (solved and updated)
<p>Please consider if this is a really useful post before answering. We ask to learn. Thanks in advance</p>

<p>I am trying to rename a file from a modal window. The modal window runs fine and so does the php code for renaming the file. I have tried many different ways to send the data whithout exiting. </p>

<p>The form gets the value of a link image: name, directory and diferent actions: delete, update and resize. So when I click the link it opens the modal window with these values (I have also noticed that the value is the same when I click other image links each time) 
The problem is that is not sending any value. I supose that there is a problem getting values:  for example val() is a jQuery method. .value is the DOM Element's property, I would like to know how can I solve this.</p>

<p>the html code:</p>

<pre><code>   &lt;div id="dialogo" title="Editar Imagen"&gt;
&lt;p class="validateTips"&gt;Campo titulo requerido.&lt;/p&gt;
    &lt;!--action="" method="post"--&gt;
&lt;form id="update" &gt;
&lt;fieldset&gt;
    &lt;label for="titulo"&gt;Titulo&lt;/label&gt;
    &lt;input type="text" name="titulo" id="titulo" class="text ui-widget-content ui-corner-all" /&gt;
    &lt;label for="Alt"&gt;Alt&lt;/label&gt;
    &lt;input type="text" name="Alt" id="Alt"  class="text ui-widget-content ui-corner-all" /&gt;
    &lt;label for="descripcion"&gt;Descripcion&lt;/label&gt;
    &lt;input type="text" name="descripcion" id="descripcion"  class="text ui-widget-content ui-corner-all" /&gt;
&lt;/fieldset&gt;
&lt;/form&gt;
   &lt;/div&gt;
</code></pre>

<p>the ajax/jquery code:</p>

<pre><code>    &lt;script type="text/javascript"&gt;
     $(document).ready(function(){
     var fname=$('a.ico-resize').attr("id");
     var directory=$('a.ico-resize').attr("rel");
     var deletecount=$('a.ico-resize').attr("value");
     $('#titulo').val(fname);
     $('#Alt').val(directory);
     var descripcion = $("input#descripcion").val();
     var dataString = 'descripcion='+ descripcion + '&amp;titulo=' + titulo + '&amp;Alt=' + Alt;
     // var data_string = $("#update").serialize();


// Damos formato a la Ventana de Diálogo
var dialog = $("#dialogo").dialog({
    // Indica si la ventana se abre de forma automática
    autoOpen: false,
    // Indica si la ventana es modal
    modal: true,
    // Largo
    //width: 400,
    // Alto
    //height: 280,
    // Creamos los botones      
    height: 300,
    width: 350,
    buttons: {

        'Rename Image': function() {
            // Mostrar Versión de PHP
            $.ajax({
                // Antes de realizar la llamada mostramos el ajax load
                beforeSend: function(){
                    $('#respuestaAjax').html('&lt;img id="loader" src="images/loading.gif"/&gt;');
                },
                //cache: false, // Indicamos que no se guarde en cache
                type: 'post', // Variables GET
                url:'rename_img.php', // srcript a ejecutar
                 data: dataString,

                 //'titulo=titulo&amp;descripcion=descripcion&amp;Alt=Alt',

                 //$("form#update").serialize(),

                 //{"file":fname,"directory":directory, "descripcion":descripcion},  // paso de datos
                // cuando es exitoso el llamado
                    success: function(response){
                     $('#respuestaAjax').html(response);
                    $('#' + deletecount).remove();
                        dialog.dialog( "close" );

                }
            });
        },
        Cerrar: function() {
            // Cerrar ventana de diálogo
            dialog.dialog( "close" );
        }

    }
});

     $("a.ico-resize").click( function(e) {
         e.preventDefault();
         // dialog.dialog("open");
           dialog.dialog('open');
    // prevent the default action, e.g., following a link
    return false;
          });

          });

        &lt;/script&gt;
</code></pre>

<p>php code:</p>

<pre><code>    &lt;?php 

     $dir = $_POST['Alt'];
     $file = $_POST['titulo'];
      $nuevo= $_POST['descripcion'];
     $img  = $dir."/".$file;
     $imagen =  $dir."/".$nuevo;

     //unlink ($img);
      rename($img, $imagen);
      echo $imagen;
      ?&gt;
</code></pre>

<p>finally all works with this code:</p>

<pre><code>          &lt;script type="text/javascript"&gt;

         $(function(){
          var fname=$('a.ico-resize').attr("id");
          var directory=$('a.ico-resize').attr("rel");
          var deletecount=$('a.ico-resize').attr("value");
          $('#titulo').val(fname);
          $('#Alt').val(directory);
          var descripcion = $('#descripcion').val(); 
          var data_string = $("#update").serialize();
          var dialog = $("#dialogo").dialog({

        autoOpen: false,    
        modal: true,    
        height: 300,
        width: 350,
        buttons: {

            Send: function(){

            str = $("#update").serialize();

                $.ajax({

                    beforeSend: function(){
                        $('#respuestaAjax').html('&lt;img id="loader" src="images/loading.gif"/&gt;');
                    },
                    cache: false, 
                    type: 'POST', 
                    url:'rename_img.php', 
                    data: str,
                    contentType: "application/x-www-form-urlencoded", 
                    success: function(response){

                         $('#respuestaAjax').html(response);
                         $('#' + deletecount).remove();
                         dialog.dialog( "close" );
                    }
                });
                },
                Cerrar: function() {
                    dialog.dialog( "close" );
                }

            }
        });

            $("a.ico-resize").click( function(e) {

              var id = $(this).attr('data-id');
              var rel = $(this).attr('data-rel');
              var value = $(this).attr('data-value');
             $("#update").find("#titulo").val(id);
             $("#update").find("#Alt").val(rel);

            dialog.dialog('open');

        });
        });

        &lt;/script&gt;
</code></pre>
