Like jQueryのAJAXを使用したトグルボタンと違い

Question

目的：私はFacebookのやり方と同様に、ウェブサイト上の投稿を好きにするボタンを作成しようとしています。好きなものはボタンの他​​にもあります

問題： 1つのエッジの場合を除いてすべてがうまく動作します。ユーザーが既に投稿を好きだった場合、ユーザーはそれを気に入ることはできませんが、もうそれを気に入らないことがあります。それはlike/unlike toggleが機能していないように見え、ブラウザはサーバに「違う」要求を送るだけです。ユーザーがこれまでイメージを好きになったことがない場合、like/unlikeの切り替えはうまくいくようです。

ポストのデータ属性を使用して、これらの属性を操作することによって、類似した/違う要求を切り替えることができます。私は現在、Laravelフレームワークを使用してPHPを使用しています.JQueryをフロントエンド操作に使用しています。下は私のコードの例です。私は、このタスクでベストプラクティスにしてください準拠していないと思う場合

favorite.jsは、別に私の問題を解決するから

$(function(){ 

    $('.favorite-button').click(function(){ 
     var $this=$(this); 
     var post_id=$this.data('postId'); 

     $.ajaxSetup({ 
       headers: { 
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') 
       } 
     }); 



     if($this.data('favoriteId')){ 
      //decrement the favorite count 
      count=$this.siblings('.favorite-count'); 
      count.html(parseInt(count.html())-1); 

      //send ajax request 
      var fav_id=$this.data('favoriteId'); 
      $this.removeData('favoriteId'); 
      $.ajax({ 
       url:'/post/'+post_id+'/favorite/'+fav_id, 
       type:'DELETE', 
       success: function(result){ 
        console.log('post was unfavorited'); 
       }, 
       error: function(){ 
        console.log('error: did not favorite the post.'); 
       } 
      }); 
     } 


     else{ 
      //update the favorite count 
      count=$this.siblings('.favorite-count'); 
      count.html(parseInt(count.html())+1); 

      //send ajax post request 
      $.ajax({ 
       url:'/post/'+post_id+'/favorite', 
       type:'POST', 
       success: function(result){ 
        //update the data attributes 
        $this.data('favoriteId',result['id']); 
        console.log(result); 
        console.log('post was favorited'); 

       }, 
       error: function(){ 
        console.log('error: did not favorite the post.'); 
       } 
      }); 
     } 
    }); 
}); 

HTMLファイル

<div class="pull-right"> 
    <span class="marginer"> 
     @if(Auth::guest() || $post->favorites->where('user_id',Auth::user()->id)->isEmpty()) 
      <i data-post-id="{{ $post->id }}" class="fa fa-heart fa-lg favorite-button"></i> 
     @else 
      <i data-favorite-id="{{ Auth::user()->favorites()->where('post_id',$post->id)->first()->id }}" data-post-id="{{ $post->id }}" class="fa fa-heart fa-lg favorite-button"></i> 
     @endif 

     <span class="favorite-count">{{ $post->favorites->count() }}</span> 
    </span> 
</div> 

を提出しますコメントをする。あなたの意見を聞きたい。

Answer 1

$this.data('favoriteId');を$this.attr("data-favourite-id")に置き換えることをお勧めします。それは私にとって違いをもたらしました。私はあなたのソリューションが動作しない理由を

Answer 2

jQueryのdata('favoriteId')が属性data-favouriteを設定しない見当がつかないしかし、このcodepen http://codepen.io/jammer99/pen/PNEMgV

をチェックし、それが唯一の設定ランタイムだ、それは、要素の財産なりattrubutes（それは同じではありません）。

したがって、サーバー側のコードでは、Jqueryデータを設定できません。あなたはそれが.Prop()ためにjqueryのドキュメントで詳細を読むことができます

： http://api.jquery.com/prop/

違いについての説明があります。 編集：大胆な文章を作った！代わりにjQueryを利用するようにしようとの

Answer 3

、のアクションを簡素化してみてください「のような/とは異なり/好きな/回数」ブレード・テンプレートから照会し、ちょうどビューにデータを送信可能

• 避け限りここで

は、私は、レンダリング/代わりにjQueryの

HTMLを持ち上げ重いを行うせるのにこの問題にアプローチする方法をある

<button class='likebutton' data-identifier='1' data-state='liked'>Like</button> 
<button class='favoritebutton' data-identifier='1' data-state='favorited'>Favorite</button> 
<span class='count counts-1'>123</span> 

ブレード

<button class='likebutton' data-identifier='{{!! Post->ID !!}' data-state='{{!! /*<something to see if user liked this>*/?'liked':'unliked' !!}'>{{!! <something to see if user liked>?'liked':'unliked' !!}</button> 
<button class='favoritebutton' data-identifier='{{!! Post->ID !!}' data-state='{{!! /*<something to see if user liked>*/?'favorited':'notfavorited' !!}'>{{!! <something to see if user liked>?'favorited':'notfavorited' !!}</button> 
<span class='count counts-{{!! $Post->ID !!}}'>{!! $Post->totallikes !!}</span> 

JS

$.ajaxSetup({headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}}); 

function UserLike(_event){ 
var state = $(_event.target).data('state'); 
var postID = parseInt($(_event.target).data('identifier')); 
console.log('Status => '+$(_event.target).data('state')); 
    $.post('/posts/metadata/likes',{ 
    'postID':postID 
    },function(res){ 
    $(_event.target).data('state',res.state); 
    $(_event.target).text(res.text); 
    $('.counts-'+postID).text(res.totallikes); 
    }).fail(function(){ 
    /* do something on fail */ 
    }); 
} 
function UserFavorite(_event){ 
var postID = parseInt($(_event.target).data('identifier')); 
    $.post('/user/metadata/favorites',{ 
    'postID':postID 
    },function(res){ 
    $(_event.target).data('state',res.state); 
    $(_event.target).text(res.text); 
    }).fail(function(){ 
    /* do something on fail */ 
    }); 
} 

$("body").on('click','.likebutton',function(_event){ UserLike(_event); }); 
$("body").on('click','.favoritebutton',function(_event){ UserFavorite(_event); }); 

PHP、あなたがAJAX要求を送信した後、あなたのページを更新する場合、私は信じて、適切なケースを処理していないようだ

// Routes 

Route::post('/posts/metadata/likes',function(){ 
    // auth check 
    // handle state/likes 
    // ex. response 
    // response with json {'state':notliked,'text':'<translated string>','postID':1} 
}); 

Route::post('/user/metadata/favorites',function(){ 
    // auth check 
    // handle state/favorites 
    // response with json {'state':favorited,'text':'<translated string>,'postID':1} 
});