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ベストアンサー
- 回答日時:
success : function(data){
if(data.id){
alert(data.id);
$("#tblh img#image"+data.id).attr("src","/images/noimage.gif");
}
の「alert(data.id);」は実行されて、送信したidがアラート表示されていますでしょうか? (1)
また、ブラウザから直接 http://***.***.***/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
- 回答日時:
追加質問のJQueryの部分ですが・・・
FireFoxとChromeでは問題なく動作しました。
IEは最初動かなかったのですが、何度か試しているうちに動作し始めました??(原因不明
JQueryの1.6で「attr」の問題があったみたいなので、
今利用しているバージョンが分かりませんが、
バージョンを変えてみてはいかがでしょう。
1.7.2が最新のようです。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7 …
この回答への補足
ご返答ありがとうございます。
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
- 回答日時:
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
- 回答日時:
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>
また、通信エラーとは関係ありませんが、下記の様なコードの方が
2度 「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
- 回答日時:
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("通信に失敗しました。");」となります。
どこが悪いのかまったく分からないです・・・
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- JavaScript javascriptで移動ボタンを押した際に遷移するボタンを追記したい 1 2022/11/29 03:02
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript javascriptのちょっとした動作不良(原因は突き止めたのですが) 1 2023/06/15 19:58
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
バッチファイル 特定ウインドウ...
-
自作の地図をグーグルマップの...
-
PDFを(htmlのように)無限に縦...
-
GASでスプレッドシートの一番上...
-
php の画面ボダンを押すと、サ...
-
以下のURL入れますか?皆さんは↓
-
RPA(PowerAutomate)の実装について
-
同一ページ移動時ハンバーガー...
-
MMS機能とは
-
正規表現で、特定の文字列を含...
-
時間表示で0:48:17と入力すると...
-
latex文書でのURLの表示
-
グーグルディスカバー ログイン...
-
1枚の画像をクリックすると複数...
-
携帯電話番号だけで、居場所が...
-
画像のドットの部分が抜けてい...
-
webページの特定の部分だけ消し...
-
jQueryを使いformでsubmitした...
-
C言語のflagの使い方が分かりま...
-
どんな職業につきたいのがわか...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
バッチファイル 特定ウインドウ...
-
PDFを(htmlのように)無限に縦...
-
以下のURL入れますか?皆さんは↓
-
入力フォームの値をQRコードで...
-
正規表現で、特定の文字列を含...
-
ワードでA3横の画面にして、文...
-
GASでスプレッドシートの一番上...
-
RPA(PowerAutomate)の実装について
-
要素内を常に一番下を表示させたい
-
jQueryを使いformでsubmitした...
-
非同期通信を使うタイミングが...
-
同一ページ移動時ハンバーガー...
-
Pythonを勉強する道のり
-
b75h2-m2 biosアップデートした...
-
日本語版アンサイクロペディア...
-
PYTHONのtkinterについて
-
C言語のflagの使い方が分かりま...
-
時間表示で0:48:17と入力すると...
-
Pythonのtkinterについて
-
パイソンでのテキストデータの...
おすすめ情報