モーダル ウィンドウからファイルの名前を変更しようとしています。モーダル ウィンドウは正常に動作し、ファイルの名前を変更するための php コードも正常に動作します。終了せずにデータを送信するために、さまざまな方法を試しました。
フォームは、名前、ディレクトリ、およびさまざまなアクション (削除、更新、サイズ変更) のリンク イメージの値を取得します。したがって、リンクをクリックすると、これらの値でモーダル ウィンドウが開きます (毎回他の画像リンクをクリックしても値が同じであることに気付きました)。問題は、値を送信していないことです。値の取得に問題があると思います。たとえば、val() は jQuery メソッドです。.value は DOM 要素のプロパティです。これを解決する方法を知りたいです。
HTMLコード：
<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>
ajax/jquery コード:
<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コード:
<?php
$dir = $_POST['Alt'];
$file = $_POST['titulo'];
$nuevo= $_POST['descripcion'];
$img = $dir."/".$file;
$imagen = $dir."/".$nuevo;
//unlink ($img);
rename($img, $imagen);
echo $imagen;
?>
解決した
最後に、すべてこのコードで動作します:
<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>