Q&A
##実装内容
現在ajaxを使用してイベントの参加する取り消すのボタンの切り替えを実装しました。
##問題点
$.ajaxでasync: trueを指定しているのにSynchronous XMLHttpRequest がでています。
ネットで検索するとasync:trueに設定するや、.done(function(data)を使用するなどが書いてあり、実際に記述してみたのですが、エラーが直りません。
何が原因で上記エラーがでているのかわかりません。
お手数ですが教えてもらえないでしょうか？
よろしくお願いします。
以下がコードです。
show.php <?php foreach ($event as $value) :?> <script> $( function (){ $('form').click( function(){ var postData = {}; var submit= document.getElementById('submit'); var name = submit.name; postData[name] = submit.value; $('form').html('<button type="button" class="btn btn-success">送信中...</button>'); $.ajax({ type: 'POST', url: 'http://localhost/phptraining/eventManagement/event/show/4', async: true, dataType: 'html', data: postData, timeout: 5000, }).done(function(data){ $('body').load('<?php echo base_url('event/show/'.$value->id); ?>',data); }).fail(function(){ alert('エラーが発生しました。更新をしてください。'); }); } ); } ); </script> <?php endforeach;?> <div id = "k"> <div class="container"> <h1>イベント詳細</h1> <table class="table"> <tbody> <?php foreach ($event as $value) :?> <?php $date_check = $value->end < date('Y-m-d H:i:s'); ?> <tr> <th class="col-xs-2">タイトル</th> <td> <?php if($date_check && $participate ||$date_check && $registered_by): ?> <?php echo $value->title; ?><span class="label label-success spanlabel">参加しました</span> <?php elseif($participate || $registered_by): ?> <?php echo $value->title; ?><span class="label label-info spanlabel">参加</span> <?php elseif($date_check): ?> <?php echo $value->title; ?><span class="label label-danger spanlabel">終了</span> <?php else: ?> <?php echo $value->title; ?> <?php endif; ?> </td> </tr> <tr> <th>開始時間</th> <td><?php echo $value->start;?></td> </tr> <tr> <th>終了時間</th> <td><?php echo $value->end;?></td> </tr> <tr> <th>場所</th> <td><?php echo $value->place;?></td> </tr> <tr> <th>対象グループ</th> <td><?php echo $value->g_name;?></td> </tr> <tr> <th>詳細</th> <td><?php echo $value->detail;?></td> </tr> <tr> <th>登録者</th> <td><?php echo $value->u_name;?></td> </tr> <tr> <th>参加者</th> <td> <?php foreach ($attends as $san):?> <?php echo $san->name;?> <?php endforeach; ?> <?php echo $value->u_name;?> </td> </tr> </tbody> </table> <form> <?php if(!$registered_by && !$date_check && !$participate ): ?> <input type="button" id="submit" name="save" value="参加する" class="btn btn-success" /> <?php else:?> <input type="button" id="submit" name="cancel" value="参加を取り消す" class="btn btn-success" /> <?php endif; ?> </form> <div class="margin-50"> <a href="<?php echo base_url('event/'); ?>"><button type="button" class="btn btn-primary">一覧に戻る</button></a> <?php if($user === '2' || $registered_by ): ?> <a href="<?php echo base_url('event/edit/'. $value->id); ?>" ><button class="btn btn-info">編集</button></a> <button class="btn btn-danger" href="#" role="button" data-toggle="modal" data-target="#myModal">削除</button> <?php endif; ?> </div> <!-- モーダルウィンドウの中身 --> <div class="modal fade" id="myModal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-body">本当に削除してよろしいですか?</div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> <a href="<?php echo base_url('event/delete/'. $value->id); ?>"><button type="button" class="btn btn-success">OK</button></a> </div> </div> </div> </div> </div> <?php endforeach; ?> </div>
eventコントローラのshow function public function show($id){ $this->load->model('Event_model'); $this->load->model('Attend_model'); $event = $this->Event_model->show_find($id); $attends = $this->Event_model->get_attends($id); $user_name = $_SESSION["name"]; $registered_by = $this->Event_model->registered_by($id,$user_name); $data['registered_by'] = $registered_by; $user_id = $_SESSION['id']; $current_user = $_SESSION["type_id"]; $current_user_attends_event = $this->Event_model->user_attend($user_id,$id); if($current_user_attends_event ){ $data["participate"] = true; }else{ $data["participate"] = false; } $data["user"] = $current_user; $data["event"] = $event; $data["attends"] = $attends; $header['title'] = 'イベント詳細'; $this->load->view('header', $header); $this->load->view('event/show',$data); if($this->input->post('save') === "参加する"){ $attend["users_id"] = $_SESSION["id"]; $attend ['events_id'] = $id; $this->Attend_model->insert($attend); } if($this->input->post('cancel') === "参加を取り消す") { $user_id = $_SESSION["id"]; $this->Attend_model->delete($user_id,$id); } }
回答1件
0
ベストアンサー
エラーについては全文書かないとどの行でどういうエラーが発生しているかがつかめません。そのため、JavaScript部分について挙動が思ったように行かないだろうと思われる所を指摘します。
まず show.php 冒頭の foreach ($event as $value) : のループには問題がたくさんあります。
0. $('form').click
show.php 後半を見るとform要素を$eventの数だけ作成していますが、「全てのフォームに個別にクリック要素を割り当てる」ということを$eventの数だけ繰り返しています。10件の要素があったとしたら、各フォームに10件ずつ、ページ内では100件のクリックイベントを登録することになります。これらが全てクリックしたタイミングで動くので、1クリックで（中の .load() 含め）20通信が起こります。
0. var submit= document.getElementById('submit');
HTMLの仕様上、1ページ内に同じid属性は1つだけなので、このコードが返すのは1つ目のinput要素（name='save'）になります。何番目のフォームをクリックしても1番目の'save'をAjaxで送ることになります。
0. $('form').html('<button type="button" class="btn btn-success">送信中...</button>');
これもここまでの話とほぼ同じですが、全部のform要素の中身をこれに書き換えます。
0. $('body').load('<?php echo base_url('event/show/'.$value->id); ?>',data);
こう書いた場合 endforeach より後ろ、HTMLの最後に読み込まれますが、多分想定されている挙動ではないのかなと思います。
0. <?php foreach ($event as $value) :?>
位置がおかしい。endforeach; の位置からして <div class="container"> の前あたりで無いと成立しない。
ざっと見ただけでこれくらい出てきました。どういう実装をしようとしているかはなんとなくわかりますが、小さな機能（Ajax部分だけとか）を順番に作っていくほうが結局早く出来ると思います。がんばってみてください。
投稿2016/05/29 06:54
総合スコア69400
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/05/29 12:17