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;
?>
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>
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();
The dataString value should be a JavaScript object like this
{Key:value, key : value .....}