renaming file with jquery and php from modal window

Question

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.

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.

the html code:

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

the ajax/jquery code:

    <script type="text/javascript">
     $(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 + '&titulo=' + titulo + '&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('<img id="loader" src="images/loading.gif"/>');
                },
                //cache: false, // Indicamos que no se guarde en cache
                type: 'post', // Variables GET
                url:'rename_img.php', // srcript a ejecutar
                 data: dataString,
                 
                 //'titulo=titulo&descripcion=descripcion&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;
          });
          });
                   
        </script>

php code:

    <?php 

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

     //unlink ($img);
      rename($img, $imagen);
      echo $imagen;
      ?>

---

solved

finally all works with this code:

          <script type="text/javascript">
        
         $(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('<img id="loader" src="images/loading.gif"/>');
                    },
                    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');
        });
        });
                   
        </script>

Answer 1

The code looks fine as far as sending itself is considered. I mean it probably does send the request it's just the query that is wrong. (You can check in the firebug's console if the request is really send or not).

What you need to change is the place where you build the dataString. You build it once the page is loaded (in the $(document).ready function) so it's never rebuild after you change the values in your modal window.

You should move the code responsible for building dataString to the click handler of a.ico-resize.

Also I can't see where the titulo and Alt variables are set and, as you can see in your Firebug, they're set wrong.

Try this:

var dataString = 'descripcion='+ $('#descripcion').val() + '&titulo=' + $('#titulo').val() + '&Alt=' + $('#Alt').val();