Question

44

Laravel & Ajax - Insert data into table without refreshing

rated 0 times [ 51] [ 7] / answers: 1 / hits: 17454 / 8 Years ago, thu, february 2, 2017, 12:00:00

First of all, I have to say that I'm beginner with using Ajax... So help me guys.
I want to insert the data into db without refreshing the page. So far, I have following code...
In blade I have a form with an id:

{!! Form::open(['url' => 'addFavorites', 'id' => 'ajax']) !!}



  <a href=# id=favorite class=bookmark><img align=right src={{ asset('/img/icon_add_fav.png')}}></a>

  <input type=hidden name = idUser id=idUser value={{Auth::user()->id}}>

  <input type=hidden name = idArticle id=idArticle value={{$docinfo['attrs']['sid']}}>

  <input type=submit id=test value=Ok>



{!! Form::close() !!}

And in controller I have:

public function addFavorites()

{

    $idUser               = Input::get('idUser');

    $idArticle            = Input::get('idArticle');

    $favorite             = new Favorite;

    $favorite->idUser     = $idUser;

    $favorite->idArticle  = $idArticle;

    $favorite->save();



    if ($favorite) {

        return response()->json([

            'status'     => 'success',

            'idUser'     => $idUser,

            'idArticle'  => $idArticle]);

    } else {

        return response()->json([

            'status' => 'error']);

    }

}

I'm trying with ajax to insert into database:

   $('#ajax').submit(function(event){

      event.preventDefault();



   $.ajax({

      type:post,

      url:{{ url('addFavorites') }},

      dataType=json,

      data:$('#ajax').serialize(),

      success: function(data){

         alert(Data Save:  + data);

      }

      error: function(data){

         alert(Error)

      }

   });

   });

Also in my web.php I have a route for adding favorites. But when I submit the form, it returns me JSON response like this: {status:success,idUser:15,idArticle:343970}... It actually inserts into the db, but I want the page not to reload. Just to display alert box.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

emerymariamm

Add To Favorites

Follow

Total Points: 276

Total Questions: 97

Total Answers: 99

Location: Comoros

Member since Sun, Dec 13, 2020

4 Years ago

emerymariamm questions

1 Next-Auth Signout within jwt callback

Fri, Mar 4, 22, 00:00, 2 Years ago

1 Customizing Date Serialization in Axios

Wed, Jan 12, 22, 00:00, 2 Years ago

1 Base64 to Image File Convertion in JS

Sun, Jul 4, 21, 00:00, 3 Years ago

1 Next JS image centering while screen size increases

Wed, Dec 23, 20, 00:00, 4 Years ago

1 Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source

Thu, Sep 10, 20, 00:00, 4 Years ago

View All

answered 8 Years ago ernest · Accepted Answer

As @sujivasagam says it's performing a regular post action. Try to replace your javascript with this. I also recognized some syntax error but it is corrected here.

$(#ajax).click(function(event) {

    event.preventDefault();



    $.ajax({

        type: post,

        url: {{ url('addFavorites') }},

        dataType: json,

        data: $('#ajax').serialize(),

        success: function(data){

              alert(Data Save:  + data);

        },

        error: function(data){

             alert(Error)

        }

    });

});

You could just replace <input type=submit> with <button>instead and you'll probably won't be needing event.preventDefault() which prevents the form from posting.

EDIT

Here's an example of getting and posting just with javascript as asked for in comments.

(function() {



    // Loads items into html

    var pushItemsToList = function(items) {

        var items = [];



        $.each(items.data, function(i, item) {

            items.push('<li>'+item.title+'</li>');

        });



        $('#the-ul-id').append(items.join(''));

    }



    // Fetching items

    var fetchItems = function() {

        $.ajax({

            type: GET,

            url: /items,

            success: function(items) {

                pushItemsToList(items);

            },

            error: function(error) {

                alert(Error fetching items:  + error);

            }

        });

    }



    // Click event, adding item to favorites

    $(#ajax).click(function(event) {

        event.preventDefault();



        $.ajax({

            type: post,

            url: {{ url('addFavorites') }},

            dataType: json,

            data: $('#ajax').serialize(),

            success: function(data){

                  alert(Data Save:  + data);

            },

            error: function(data){

                 alert(Error)

            }

        });

    });



    // Load items (or whatever) when DOM's loaded

    $(document).ready(function() {

        fetchItems();

    });

})();