"Like" and "Dislike" buttons don’t work without updating the page

Question

I’m developing a post system, where in each post viewed, I put a "Like" button and a "Dislike". I implemented a code that updates the page when one of the buttons is clicked, worked perfectly, adding 1, in the total_like or total_nao_gosto. My problem is saving the data dynamically, without updating the page.

Below goes what I’ve tried and doesn’t work:

DB

Controller

 // Adicionar gosto sem actualização da página
public function adicionarGosto()
{
    $id = Input::get('post_id');
    $post = Post::find($id);
    if (Cache::has('voto '.$id)==false)
    {
        Cache::add('voto '.$id,'contador',0.30);
        $post->totalgosto_pt+=1;
        $post->save();
        return \Response::json(array('status'=>'sim','qtde'=>$post->totalgosto_pt));
    }
    else
    {
        return \Response::json(array('status'=>'nao'));
    }
}

// Adicionar não gosto sem actualização da página
public function adicionarNaoGosto()
{
    $id = Input::get('post_id');
    $post = Post::find($id);
    if (Cache::has('voto '.$id)==false)
    {
        Cache::add('voto '.$id,'contador',0.30);
        $post->totalnaogosto_pt+=1;
        $post->save();
        return \Response::json(array('status'=>'sim','qtde'=>$post->totalnaogosto_pt));
    }
    else
    {
        return \Response::json(array('status'=>'nao'));
    }
}

View

{{--Botões like e unlike sem actualização da página--}}
<div classe"row">
                           <a class="btn btn-primary _btnGostei">Gostei <i class="glyphicon glyphicon-thumbs-up">({!! $post->totalgosto_pt !!})</i></a>
                            <a class="btn btn-danger _btnNaoGostei">Não Gostei <i class="glyphicon glyphicon-thumbs-down">({!! $post->totalnaogosto_pt !!})</i></a>


              
                        </div>



                        {!! csrf_field() !!}
                        <input type="hidden" name="post_id" value="{!! $post->id_pt !!}">
                        <script type="text/javascript">
                            $("._btnGostei").click(function () {
                                $.post("/portal/adicionar-gosto",{post_id:$('input[name="post_id"]').attr("value"),_token:$('input[name="_token"]').attr("value")},function (response) {
                                    if(response.status=="sim")
                                    {
                                        $("._btnGostei").html("Gostei ("+response.qtde+")");
                                    }

                                });

                            });

                            $("._btnNaoGostei").click(function () {
                                $.post("/portal/adicionar-naogosto",{post_id:$('input[name="post_id"]').attr("value"),_token:$('input[name="_token"]').attr("value")},function (response) {
                                    if(response.status=="sim")
                                    {
                                        $("._btnNaoGostei").html("Não Gostei ("+response.qtde+")");
                                    }

                                });

                            });
                        </script>

Routes

//Gosto e não gosto sem actualização da página

Route::post('/portal/add-like', 'Postcontroller@addirgosto Panel'); Route::post('/portal/add-naogosto', 'Panel Postcontroller@additionogosto');

GUI

Answer 1

This error is pq "$" not found. Usually it is jQuery. Therefore, missing it as a reference to your page.

For that reason, download it on the official website and add this code to your page: <script src="jquery.min.js"></script>, by changing the src according to the location of *.js downloaded.

As an alternative to downloading, it can also be added from a CDN, such as cloudflare: <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>