Ajax CRUD operations in laravel

05. August 2016 Intermediate, Laravel 30

Hello readers, am back with another tutorial to discuss about performing Create Read Update Delete(CRUD) operations in laravel using ajax.

In previous tutorials like integrating bootgrid plugin there are CRUD operations but they are without ajax, every time the operation is performed the page may reload and show the information. But here all the CRUD operations are performed without any page reload by using ajax and some handy jquery.

Working Demo:

Working Demo      Project on Github

Here we will go through a simple example to cover all the CRUD operations.

Create Operation using ajax :

A simple text field with add button which is an ajax call to a controller.

The controller validates the input and throws an error if input is empty else it adds a new record in database.

The ajax success function updates the view by appending the newly added data to the existing data.

View for the text field and button,

When add button is clicked, an ajax call is made to the controller for adding an item.

the route for /addItem,

The controller logic for addItem function,

Read Operation using ajax :

A table which displays all the records in the database with edit and delete action buttons, and also updates the data when a new item is added.

the route,

The controller logic for readItems function,

The view for displaying data,

ajax CRUD operations in laravel – justlaravel.com

Working Demo      Project on Github

Update Operation using ajax :

When edit button is clicked, then a modal pops up, enabling to edit the name and update button calls a controller with edit operation performed.

Here we use same modal for edit and delete operations by changing the content in it with respect to what button is clicked.

When edit button is clicked, the following jQuery is executed,

Above code opens up a modal with id and a name which can be edited with update and close buttons. When update button is clicked the logic for updation is performed.

the controller logic when /editItem is called,

ajax CRUD operations in laravel – justlaravel.com

Delete Operation using ajax :

Similar to edit operation. when delete button is clicked with its respected row, a modal pops up, and the delete button in the modal deletes the item from database and finally updating the view using jQuery.

When delete button is clicked, the following jQuery executes,

When delete button in the modal is clicked,

the controller logic for deletion,

ajax CRUD operations in laravel – justlaravel.com

 

Working Demo      Project on Github

Code Explanation Video:



30 thoughts on “Ajax CRUD operations in laravel”

  • 18
    rental car coupon codes avis on August 16, 2016 Reply

    You can certainly see your skills in the work you write. The arena hopes for even more passionate writers like you who are not afraid to say how they believe. Always follow your heart.

  • 19
    Moataz Mohammady on August 19, 2016 Reply

    Hi , Thanks for this simple and useful article ,it helped me a lot but i noticed there are two issues in this awesome article
    1.you should delete or comment this line of code from deleteItem function dd ( $req->id );
    2.fix html error from the topic end

    • 20
      avinash on August 19, 2016 Reply

      Yea, Thanks for figuring the the issues.I overlooked them. Fixed now.

      Cheers 🙂

  • 21

    Thanks a lot for clear and helpful info!

    • 22
      avinash on August 27, 2016 Reply

      Cheers, keep browsing the site for more cool stuff and also feel free to subscribe to justlaravel.com so that you won’t miss any of the posts.

  • 23
    niki on August 31, 2016 Reply

    Keep Going !!

    • 24
      avinash on August 31, 2016 Reply

      Sure niki 🙂

  • 25
    AoNeko on September 11, 2016 Reply

    I still getting Error 500 even though there is _token . any solution? 🙂

    • 26
      avinash on September 11, 2016 Reply

      If passing _token through data in ajax is a problem, then set up token in meta like this,

      headers: { ‘X-CSRF-TOKEN’: $(‘meta[name=”_token”]’).attr(‘content’) }

  • 27
    AoNeko on September 14, 2016 Reply

    id return ‘unidentified’. but after refresh, it shows the correct id. Any solution for that too. 🙂

    • 28
      avinash on September 14, 2016 Reply

      Does it happen always or just once,

      if it happens always, make sure you are getting the correct value for id here, 'id': $("#fid").val(),
      and in the edit form you are setting this as $('#fid').val($(this).data('id')); and also check you are passing data object to button here,
      data-id="{{$item->id}}"

  • 31
    David Halasz on January 29, 2017 Reply

    Can you help me please, how can I use textarea instead of input text? when I change the input type=”text” to and I would like to add a data, it says that “The name field is required.”

    • 32
      avinash on January 31, 2017 Reply

      You can change its input type from text and can replace with

  • 33
    abdo ali on March 4, 2017 Reply

    your syntax highlighter is terrible. can you change that theme and use prism syntax highlighter. other than this your website will look awesome

    • 34
      avinash on March 4, 2017 Reply

      Yea will change it. The current syntax highlighter works well in desktop, looks messy when seen in mobile.

  • 35
    zayboo on April 6, 2017 Reply

    Hi,need help! curd operations not working.how to fix it?

  • 37
    zayboo on April 7, 2017 Reply

    I download it from github and install it by as instruction given on github,but still not woking!
    (update,add and delete) not working

  • 38
    Akhmad Yudha on May 8, 2017 Reply

    Please add pagination section in this post, Thank You.

  • 39
    sapnapowar777 on June 20, 2017 Reply

    where is your modal code

    • 40
      avinash on June 20, 2017 Reply

      Ah! I explained the modal code in parts,

      Here is the modal code.

      Also you can follow the code on this tutorial at github: https://github.com/avinashn/Ajax-CRUD-example-in-laravel

  • 41
    Nathan Siafa on June 23, 2017 Reply

    Thanks for the nice post, I have almost everthing working but whenever I edit a row the changes are not reflected on the table. Can you please take a look at the thread I posted on stackoverflow: https://stackoverflow.com/questions/44709620/jquery-not-replacing-table-row-after-edit Thanks!!

  • 42
    mokhtar on July 1, 2017 Reply

    hello please i have question if i need to add more input and an image how i can do that

  • 43
    gegejosper on October 10, 2017 Reply

    I tried to edit my crud but add, read and delete is working only the edit is not working.. I tried to trace it but still not working

    $(document).on(‘click’, ‘.edit-modal’, function() {
    $(‘#footer_action_button’).text(“Update”);
    $(‘#footer_action_button’).addClass(‘glyphicon-check’);
    $(‘#footer_action_button’).removeClass(‘glyphicon-trash’);
    $(‘.actionBtn’).addClass(‘btn-success’);
    $(‘.actionBtn’).removeClass(‘btn-danger’);
    $(‘.actionBtn’).addClass(‘edit’);
    $(‘.modal-title’).text(‘Edit’);
    $(‘.deleteContent’).hide();
    $(‘.form-horizontal’).show();
    $(‘#fid’).val($(this).data(‘id’));
    $(‘#cat_name’).val($(this).data(‘name’));
    $(‘#points’).val($(this).data(‘points’));
    $(‘#myModal’).modal(‘show’);
    //console.log($(this).data(‘name’) + $(this).data(‘points’));
    });

    I added

    $(‘#cat_name’).val($(this).data(‘name’));
    $(‘#points’).val($(this).data(‘points’)); but it does not display in the modal.. can you help?

  • 44
    avinash on October 15, 2017 Reply

    Are you sure you added data-name and data-points attributes to edit button and in modal you have elements with cat_name and points as id’s and also check for console for any errors.

  • 45
    avinash on October 15, 2017 Reply

    Its same as adding name field, just add as many fields you want in the edit form

Leave a Reply