Ajaxで画像の削除

質問

Ajaxで画像を削除しようといろいろ試行錯誤しているのですが、
最終的なところで詰まっています。
$(function(){
$("input:button").click(function(){
//クリックされた画像のidを取得
var id = $(this).attr("id");
　　alert(id);
//削除ボタンの無効化
$(this).attr("disabled",true);
//idをサーバに送信（PHP側で削除処理）して結果を受け取る
$.ajax({
url : "/test/delete_image",
dataType : "json",
data : {id:id},
type : "post",
success : function(data){
if(data.id){
alert(data.id);
$("#tblh img#image"+data.id).attr("src","/images/noimage.gif");
}
},
error : function(){
alert("通信に失敗しました。");
}
});
});
});

codeigniterというフレームワークを利用しPHP側では画像をディレクトリから削除しています。(こちらの動作は問題なし)
<?php
class Delete_image extends CI_Controller {

function __construct(){
// Model クラスのコンストラクタを呼び出す
parent::__construct();
$this->load->model('array_constant');
$this->load->helper(array('form', 'url'));
$this->load->library('form_validation');
$this->load->library('form_ex');
}

function index(){
if(!$this->input->post("id")){
return false;
}else{
　　　　　　　　　　　//画像の削除とDBの画像名称を更新

$arr = array('id' => $this->input->post("id"));
}
echo json_encode($arr);
}
}

としています。
画像の削除とDBの画像名称は更新されてるのでPHP側は問題ないようです。
jsonの値を受け取って画像を置き換えようとしているのですが、エラー側のほうに
判断されてしまいます。「alert("通信に失敗しました。");」となります。
なぜか分からず困っています。
教えてください。

回答No.5

6cc70ef9d187 · ベストアンサー

success : function(data){
if(data.id){
alert(data.id);
$("#tblh img#image"+data.id).attr("src","/images/noimage.gif");
}

の「alert(data.id);」は実行されて、送信したidがアラート表示されていますでしょうか？ (1)

また、ブラウザから直接 ｈttp://***.***.***/images/noimage.gif で「noimage.gif」画像が表示されますか？(2)

$("#tblh img#image"+data.id).css("display", "none");
とするとどうなりますでしょうか。(3)

chromeの「F12」開発ツールやFireFoxの「FireBug」などは利用していますか。
利用していれば、実際に「<img>」タグの「src=」属性が変更されているか確認できるはずです。
src属性が変更されているにもかかわらず画像が変わらないのか、
そもそもsrc属性が変更されないのか・・・
success : のfunctionでエラーなどが起きてないかも開発ツールで確認してみてください。

.htaccessの設定は多分問題ないと思います。
RewriteEngine on
RewriteCond $1 !^(index\.php|images|css|js|robots\.txt|favicon\.ico)
RewriteRule ^(.*)$ /index.php/$1 [L]

回答No.4

6cc70ef9d187

追加質問のJQueryの部分ですが・・・
FireFoxとChromeでは問題なく動作しました。
IEは最初動かなかったのですが、何度か試しているうちに動作し始めました？？(原因不明

JQueryの1.6で「attr」の問題があったみたいなので、
今利用しているバージョンが分かりませんが、
バージョンを変えてみてはいかがでしょう。

1.7.2が最新のようです。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

補足

ご返答ありがとうございます。
JQueryのバージョンは1.72です。
xampp環境下で試しているんですが、firefox、chromeともにダメな状況です。
これはxamppが悪いんですかね？更新ボタンを押すと削除されていることが確認できnoimageに変わります。
でも意味ないですよね・・・。
それにしてもIEは相変わらずのダメブラウザですね・・・。呆れます。
フォルダパスの指定が悪いんですかね？？
ディレクトリの配置は

htdocs
|---application(controllers,models,view,configなど)
|---js(javascriptファイル)
|--images(画像ファイル)
|--css(cssファイル)

としています。
/images/noimage.gif　の指定方法ではダメなんですかね？
htaccessで
RewriteCond $1 !^(index\.php|images|css|js|robots\.txt)
としています。おかしいですか？？
いや～何がなんだか？？？？
すみませんがよろしくお願いします。

回答No.3

6cc70ef9d187

error : function(){
alert("通信に失敗しました。");
}

の個所を以下に書き換えて実行するとどのようなメッセージが出力されますか。

error : function(data){
alert(data.responseText);
}

補足

ご回答ありがとうございました。
ご指摘の変更を行ったところ、PHPの側のエラーと見られる内容が表示されました。
そこを修正したら
成功側に判定されました。
試行錯誤しているうちにPHPの処理も乱れたみたいです。
あと、最後の
success : function(data){
if(data.id != ""){
alert("true"+data.id);
$("#tblh img#image"+data.id).attr("src","/images/noimage.gif");
}
},
部分でnoimage.gifに切り替えようとしていますが、
うまくいきません。
tableにid="tblh" としてそのtdのimgタグにid="image1"からid="image20"まで割り振っています。
すみませんが、この部分について教えてください。
よろしくお願いします。

回答No.2

6cc70ef9d187

application/logs/ディレクトリにあるログを確認してみてください。

おそらく、PHPの ERROR , WARNING , NOTICE などが Jsonデータ文字列の前に出力されていると思われます。

Ajaxではなく、ブラウザから通常のPOSTをしてみて、ブラウザで出力を確認してみるのも良いと思います。
<form method="POST" action="/test/delete_image">
<input type="text" name="id" value="10">
<input type="submit" value="submit">
</form>

また、通信エラーとは関係ありませんが、下記の様なコードの方が
２度 「input 」インスタンスの「 post() 」メソッドをコールすることなく効率が良いし見た目も良いと思います。(^0^
if(! $id = $this->input->post("id")){
return false;
}
//画像の削除とDBの画像名称を更新
$arr=array('id' => $id);
$this->output->set_content_type('application/json');
$this->output->set_output(json_encode($arr));

補足

エラーログを設定してみたんですが、favicon.icoが無いというエラー以外出ていません。
構文的には間違っていないんですかね？
初心者で探り探りやっていて自信がありません。
よろしくお願いします。

回答No.1

6cc70ef9d187

echo json_encode($arr); の個所を以下のように書き換えるとどうでしょうか。

$this->output->set_content_type('application/json');
$this->output->set_output(json_encode($arr));
return TRUE;

こちらも参考にしてみてください。
http://www.ci-guide.info/practical/core/output/

参考URL：

http://www.ci-guide.info/

補足

ご返答ありがとうございます。
ご教授いただいたとおり、修正したのですが、いまだに
「alert("通信に失敗しました。");」となります。
どこが悪いのかまったく分からないです・・・