mohamedanis
1 week ago

favorite unfavorite button problem laravel

Posted 1 week ago by mohamedanis

I'm working on a Laravel project where user can favorite and unfavorite books, in the two cases the DB changes successfully without page reloading as i used ajax , but i have two problems:

-first problem : if there is no favorite books, favorite button disappears and i need to edit database to add some book to favorites table and show the button again. - second problem is that when more than one book is favorited when i refresh the page, the favorite button is duplicated .

-here is the code in my controller:

class FavoriteController extends Controller { public function bookFavBook(Request $request){ $book_id = $request['bookid'];

    $fav = DB::table('favorites')
    ->where('book_id', $book_id)
    ->where('user_id', Auth::user()->id)
    ->first();
    if(!$fav){
        $newfav = new Favorite;
        $newfav->book_id =$book_id; 
        $newfav->user_id = Auth::user()->id;
        $newfav->fav = 1;
        $newfav->save();
        $is_fav = 1;  
    }
    elseif ($fav->fav == 1){
        DB::table('favorites')
    ->where('book_id', $book_id)
    ->where('user_id', Auth::user()->id)
    ->delete();
    $is_fav = 0;
    }
    elseif ($fav->fav == 0){
        DB::table('favorites')
    ->where('book_id', $book_id)
    ->where('user_id', Auth::user()->id)
    ->update(['fav'=> 1] );
    $is_fav = 1;
    }
    $response = array(
        'is_fav'=>$is_fav,
    );
    return response()->json($response, 200);
} 

-and the code in my view :

@foreach( $books as $book)

        <div class="container-fluid column">
          <div class="row flex-row flex-nowrap">
            <div class="col-md-4">
              <div class="card card-block">
                <div>
                  <img
                    class="card-img-top"
                    src="/images/{{ $book-> book_img}}"
                    alt="Card image cap"
                  />
                </div>

                  <h5 class="card-title"> <a href="/books/{{ $book->id }}">{{ $book ->title}}</a> </h5>
                  <p class="card-text">
                    {{ $book-> description}}
                  </p>
                   <div class="card">

                  <div class="mb-3">
                    <span class="badge badge-pill badge-primary p-2 mr-4">
                      <span class="count_of_book">{{ $book-> amount }}</span>
                      copies available
                    </span>

query books from favorites table @php $getbook = DB::table('books') ->join('favorites','favorites.book_id','=', 'books.id' ) ->where('favorites.user_id','=',Auth::id()) ->get(); @endphp

                    @foreach($getbook as $fbook) 
                    @if($fbook->book_id == $book->id )
                    <i id="favorite" data-bookid="{{ $book-> id }}" class="fas fa-heart fa-2x text-danger"></i>
                    @else
                    <i id="favorite" data-bookid="{{ $book-> id }}" class="fas fa-heart fa-2x text-dark"></i>
                    @endi
                    @endforeach  
              </div>
            </div>
            @endforeach 
            </div>
            {{ $books->links() }}
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
var token = '{{ Session::token()}}';
var urlFav = '{{ route('favor') }}';
</script>

-and the ajax code in js file:

 $(".fa-heart").on("click", function (event){
bookid = $(this).data("bookid");
$.ajax({
    method: 'POST',
    url: urlFav,
    data: {bookid: bookid , _token:token},
    success: function(data){

        if(data.is_fav == 1){
            $(event.target).removeClass("text-dark").addClass("text-danger");

        }
        if(data.is_fav == 0){
            $(event.target).removeClass("text-danger").addClass("text-dark");
        }
    }

})

Please sign in or create an account to participate in this conversation.