jQuery AJAX Inline CRUD using Laravel MySQL

Today, We want to share with you jQuery AJAX Inline CRUD using Laravel MySQL.In this post we will show you jQuery AJAX Inline CRUD using Laravel, hear for Inline Editing using Laravel MySQL and jQuery Ajax we will give you demo and example for implement.In this post, we will learn about Simple Laravel Jquery Ajax CRUD(insert update delete) tutorial example with source code with an example.

jQuery AJAX Inline CRUD using Laravel MySQL

There are the Following The simple About jQuery AJAX Inline CRUD using Laravel MySQL Full Information With Example and source code.

As I will cover this Post with live Working example to develop Laravel MySQL Inline Editing using jQuery Ajax, so the some Live Add Edit Delete Datatables Records using Laravel Ajax for this example is following below.

Step : 1 Laravel Routes

Define a Laravel routes:

Route::get('Product', ['uses' => '[email protected]']);
Route::post('Product/update/{id}', ['as' => 'Product/update', 'uses' => '[email protected]']);
Route::post('Product/multiple_update', ['as' => 'Product/multiple_update', 'uses' => '[email protected]_update']);

Step : 2 Laravel Migration

Make A Simple Laravel migration.

use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateproductsTable extends Migration
    public function up()
        Schema::create('products', function (Blueprint $table) {
    public function down()

Laravel Run migration using below command:

Read Also:  AngularJS Remove specific value from array

php artisan migrate

Add some data to Database.

Step : 3 Laravel Model

Make a Laravel model Product.php

namespace App;
use Illuminate\Database\Eloquent\Model;
class Product extends Model
    protected $fillable = [

Step : 4 Laravel controller

4. Make a Laravel controller (ProductCpntroller):

namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Requests;
use App\Http\Controllers\Controller;
use App\Product;
use Input;
use Schema;
use Redirect;
class ProductController extends Controller
    public function index()
        $Product = Product::select()
        // $Product_columns = Schema::getColumnListing('products');
        $Product_model = new Product();
        $fillable_columns = $Product_model->getFillable();
        foreach ($fillable_columns as $key => $value) {
            $Product_columns[$value] = $value;
        return view('Product.index')
            ->with('Product', $Product)
            ->with('Product_columns', $Product_columns)
    public function update(Request $request, $id)
        $Product = Product::find($id);
        $column_name = Input::get('name');
        $column_value = Input::get('value');
        if( Input::has('name') && Input::has('value')) {
            $Product = Product::select()
                ->where('id', '=', $id)
                ->update([$column_name => $column_value]);
            return response()->json([ 'code'=>200], 200);
        return response()->json([ 'error'=> 400, 'message'=> 'Sorry, Not enought params' ], 400);
    public function multiple_update(Request $request)
        if (Input::has('products_id_edit') && Input::has('bulk_name') && Input::has('multiple_data_val')) {
            $ids = Input::get('products_id_edit');
            $bulk_name = Input::get('bulk_name');
            $multiple_data_val = Input::get('multiple_data_val');
            foreach ($ids as $id) {
                $Product = Product::select()
                    ->where('id', '=', $id)
                    ->update([$bulk_name => $multiple_data_val]);
            $message = "Done";
        } else {
            $message = "Error. Empty or Wrong data provided.";
            return Redirect::back()->withErrors(array('message' => $message))->withInput();
        return Redirect::back()->with('message', $message);

Step : 5 Laravel View File

Make a Laravel view file in resources/views/Product/index.blade.php

Read Also:  How to Integrate Google No CAPTCHA reCAPTCHA using VueJS

<div class="container">
    <div class="row">
        <div class="col-md-12">
            @if (count($errors) > 0)
                <div class="alert alert-danger">
                    Sorry! We have some erros
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                <div class="alert alert-success">
    <div class="row">
        <div class="col-md-12">
            <h2>Multiple edit</h2>
            {!! Form::open(['action' => '[email protected]_update', 'method' => "POST", "class"=>"form-inline"]) !!}
            <div class="form-group">
                <label for="lead_status">For selected rows change filed </label>
                {!! Form::select('bulk_name', $Product_columns, [], ['class' => 'form-control']) !!}
            <div class="form-group">
                <label for="lead_status">equal to</label>
                {!! Form::text('multiple_data_val', null, ['class' => 'form-control'])!!}
            <button class="btn btn-default">Save</button>
            <table class="table table-striped">
            @foreach($Product as $t)
                    <td><td width="10px"><input type="checkbox" name="products_id_edit[]" value="{{$t->id}}" /></td></td>
                    <td><a href="#" class="ProductEdit" data-type="text" data-column="name" data-url="{{route('Product/update', ['id'=>$t->id])}}" data-pk="{{$t->id}}" data-title="change" data-name="name">{{$t->name}}</a></td>
                    <td><a href="#" class="ProductEdit" data-type="text" data-column="value"  data-url="{{route('Product/update', ['id'=>$t->id])}}" data-pk="{{$t->id}}" data-title="change" data-name="value">{{$t->value}}</a></td>
                    <td><a href="#" class="ProductEdit" data-type="text" data-column="date"  data-url="{{route('Product/update', ['id'=>$t->id])}}" data-pk="{{$t->id}}" data-title="change" data-name="date">{{$t->date}}</a></td>
            {!! Form::close() !!}
$.fn.editable.defaults.mode = 'inline';
$(document).ready(function() {
        params: function(params) {
            // add additional params from data-attributes of trigger element
            params.name = $(this).editable().data('name');
            return params;
        error: function(response, newValue) {
            if(response.status === 500) {
                return 'Server error. Check entered data.';
            } else {
                return response.responseText;
                // return "Error.";

Step : 6 Laravel Main Layout

6. Make Main Application Layout view file in

Read Also:  Get Selected Radio Button value using jQuery


<!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Inline Editing using PHP Laravel MySQL and jQuery Ajax</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <link href='//fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
        <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script>

Angular 6 CRUD Operations Application Tutorials

Read :


You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about jQuery AJAX Inline CRUD using Laravel MySQL.
I would like to have feedback on my Pakainfo.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  How to display pdf file in HTML - PDF Viewer HTML5 Example
  2. Read Also:  jquery radio button checked
  3. Read Also:  Custom Radio Button in Vue.js Examples
  4. Read Also:  How to find the Json Object Length in Javascript?
  5. Read Also:  How to Import and Export CSV Files Using Codeigniter and MySQL
  6. Read Also:  Angularjs Show Hide Password in Password TextBox with CheckBox
  7. Read Also:  how to get textarea value in jquery?
  8. Read Also:  How to Integrate Google No CAPTCHA reCAPTCHA using VueJS
  9. Read Also:  Custom Radio Button in Vue.js Examples
  10. Read Also:  Angularjs Show Hide Password in Password TextBox with CheckBox