Q&A
どちらかというと、JavaScript, jQueryの話題なのでそちらのタグをつけておいた方がいいでしょう。
題名の通りです。
現在はAJAXでデータはとばせているのですが、
HTML側の切り替えができません。
非同期でボタンの部分とカウント数字を切り替えるようにしたいです。
.doneの部分で処理するものと考えております。
どなたかよろしくお願いします。
<div class="detail-point-box"> <div class="detail-point-heart"> <?php if ( $auth_id !== $val['user_id']) { if( isset( $auth_id ) ) { $score_user = $val->id; $liked_flg = false; foreach($val->points as $val2 ) { if ( $val2->user_id === $auth_id ) { $liked_flg = true; break; } else { $liked_flg = false; } } if( $liked_flg === false ) { echo $this->Form->create( '',['url' => [ 'controller' => 'points', 'action' => 'add']]); echo $this->Form->hidden('writer_id', ['value' => $val[ 'user_id' ], 'id' => 'writer_id' ]); echo $this->Form->hidden('score_id',[ 'value' => $val[ 'id' ], 'id' => 'score_id']); echo $this->Form->hidden('user_id', ['value' => $user_login, 'id' =>'user_id' ]); echo $this->Form->hidden('item_id', ['value' => $val['item_id'], 'id' =>'item_id' ]); echo $this->Html->link('<i class="far fa-heart btn-like"></i>',['action' => 'add'],['escape' => false]); echo $this->Form->end(); } else { ?></div> <div id="yaho" class="yaho"><?php echo $this->Form->create( '',['url' => [ 'controller' => 'points', 'action' => 'delete']]); echo $this->Form->hidden('writer_id', ['value' => $val[ 'user_id' ], 'id' => 'writer_id' ]); echo $this->Form->hidden('score_id',[ 'value' => $val[ 'id' ], 'id' => 'score_id']); echo $this->Form->hidden('point_id',[ 'value' => $val2[ 'id' ], 'id' => 'point_id']); echo $this->Form->hidden('user_id', ['value' => $user_login, 'id' =>'user_id' ]); echo $this->Form->hidden('item_id', ['value' => $val['item_id'], 'id' =>'item_id' ]); echo $this->Html->link('<i class="fas fa-heart btn-unlike"></i>',['action' => 'delete'],['escape' => false]); echo $this->Form->end(); } } } ?> </div> <div class="detail-point-count"> <?php if ( $val[ 'count_point' ] > 0 ) { <div class="detail-point-count"> <?php if ( $val[ 'count_point' ] > 0 ) { echo $val[ 'count_point' ]; } else { echo 0; } ?> </div> </div>
$(function(){ var csrf = $('input[name=_csrfToken]').val(); var $this = $(this); $('.btn-like').on("click", function(event) { event.preventDefault(); var val = $(this).val(); var user_id = $('#user_id').val(); var item_id = $('#item_id').val(); var score_id = $('#score_id').val(); var writer_id = $('#writer_id').val(); data= { 'user_id': user_id, 'writer_id': writer_id, 'score_id': score_id }; $.ajax ({ type: 'POST', beforeSend: function(xhr){ xhr.setRequestHeader('X-CSRF-Token', csrf); }, datatype: 'json', url: "/items/ajax_point_add/" + item_id, data: data, }) .done(function (data) { var res = $('#yaho').find('a'); $this.find().toggleClass(res); $this.find().toggleClass('fas'); $this.find().toggleClass('active'); $this.toggleClass('active'); $('detail-point-heart').html(data.count_point); }); return false; }); $('.btn-unlike').on("click", function(event) { event.preventDefault(); var val = $(this).val(); var user_id = $('#user_id').val(); var item_id = $('#item_id').val(); var score_id = $('#score_id').val(); var point_id = $('#point_id').val(); var writer_id = $('#writer_id').val(); data= { 'user_id': user_id, 'writer_id': writer_id, 'point_id': point_id, }; $.ajax ({ type: 'POST', beforeSend: function(xhr){ xhr.setRequestHeader('X-CSRF-Token', csrf); }, datatype: 'json', url: "/items/ajax_point_delete/" + item_id, data: data, }) .done(function (data) { }); return false; }); })
.done(function (data) { $this.empty(); $this.append('<i class="fas fa-heart">').val(data); });
これで表示は切り替えれるのですが、データが反映されないので、再度押しても反応を得られません！
回答1件
0
DOM操作を行えば表示の切替を行うことができます。
いろいろとあるので普段私が使うことが多いやつを例として書きます。
【削除系】
<remove()の場合>
<div id="dom"> <<button type="button" id="test" value="1"> テストです。 </botton> </div> $("#test").on("click", function(){ $("#test").remove(); });
例えばremove()を使うと下記のようになります
<div id="dom"> </div> $("#test").on("click", function(){ $("#test").remove(); });
≪empty()の場合≫
<div id="dom"> <button type="button" id="test" value="1"> テストです。 </botton> </div> $("#test").on("click", function(){ $("#test").empty(); });
クリック後
<div id="dom"> <button type="button" id="test" value="1"> </botton> </div> $("#test").on("click", function(){ $("#test").empty(); });
【追加・変更系】
≪append()の場合≫
<div id="dom"> <button type="button" id="test" value="1"> テストです。 </botton> </div> $("#dom").on("click", function(){ $("#dom").append('<p>ボタンのした<p>'); });
クリック後
<div id="dom"> <button type="button" id="test" value="1"> 切り替わるテスト </botton> <p>ボタンのした<p> </div> $("#dom").on("click", function(){ $("#dom").append('<p>ボタンのした<p>'); });
≪text()の場合≫
<div id="dom"> <button type="button" id="test" value="1"> テストです。 </botton> </div> $("#test").on("click", function(){ $("#test").text('切り替わるテスト'); });
クリック後
<div id="dom"> <button type="button" id="test" value="1"> 切り替わるテスト </botton> </div> $("#test").on("click", function(){ $("#test").text('切り替わるテスト'); });
ざっくり、4つほど例をあげましたが上記に書かれているクリックファンクションの中に書かれているコードをdoneのあとに書けば操作できるようになります。
もっといろいろと知りたい場合は[jquery dom操作]やそのあとに「削除」「追加」など足して検索してみるといいと思います。
投稿2020/11/13 05:57
総合スコア233
返事が遅くなりすみません！
ご回答ありがとうございます。
上のやり方で色々模索してみます！
うーん、上のやり方でもいまだにできない
改めてソースコード読んでみました。
$this = $(this);
をクリックファンクションの中に入れてローカル変数で定義し直せばいけそうですね。
最初の読み込みでグローバル変数として定義していますが、なにも設定されていないので「$this」はundfindになっている状態でクリックファンクションを押しても定義されないので反映されないような気がします。
ありがとうございます。
一から書き直しも含めて模索してみます。
あなたの回答
tips
プレビュー
