jQuery AJAX Inline CRUD using Laravel MySQL – Technology

jQuery AJAX Inline CRUD using Laravel MySQL – Technology

In this post we will give you information about jQuery AJAX Inline CRUD using Laravel MySQL – Technology. Hear we will give you detail about jQuery AJAX Inline CRUD using Laravel MySQL – TechnologyAnd how to use it also give you demo for it if it is necessary.

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.

Another must read:  C# instance For Object Abstract Classes

<?php
use IlluminateDatabaseSchemaBlueprint;
use IlluminateDatabaseMigrationsMigration;
class CreateproductsTable extends Migration
{
    public function up()
    {
        Schema::create('products', function (Blueprint $table) {
            $table->increments('id');
            $table->timestamps();
            $table->string('name')->nullable();
            $table->float('value')->nullable();
            $table->date('date')->nullable();
        });
    }
    public function down()
    {
        Schema::drop('products');
    }
}

Laravel Run migration using below command:

php artisan migrate

Add some data to Database.

Step : 3 Laravel Model

List of all Google Adsense, VueJS, AngularJS, PHP, Laravel Examples.

Make a Laravel model Product.php

<?php
namespace App;
use IlluminateDatabaseEloquentModel;
class Product extends Model
{
    protected $fillable = [
        'name',
        'value',
        'date'
    ];
}

Step : 4 Laravel controller

4. Make a Laravel controller (ProductCpntroller):

<?php
namespace AppHttpControllers;
use IlluminateHttpRequest;
use AppHttpRequests;
use AppHttpControllersController;
use AppProduct;
use Input;
use Schema;
use Redirect;
class ProductController extends Controller
{
    public function index()
    {
        $Product = Product::select()
            ->orderBy('id')
            ->get()
            ;
        
        // $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

Another must read:  Ajax Upload Multiple Images without form submitting

@extends('app')
@section('content')
<div >
    <div >
        <div >
            @if (count($errors) > 0)
                <div >
                    Sorry! We have some erros
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
            @if(Session::has('message'))
                <div >
                  {!!Session::get('message')!!}
                </div>
            @endif
        </div>
    </div>
    
    <div >
        <div >
            
            <h2>Multiple edit</h2>
            {!! Form::open(['action' => '[email protected]_update', 'method' => "POST", "class"=>"form-inline"]) !!}
            <div >
                <label for="lead_status">For selected rows change filed </label>
                {!! Form::select('bulk_name', $Product_columns, [], ['class' => 'form-control']) !!}
            </div>
            <div >
                <label for="lead_status">equal to</label>
                {!! Form::text('multiple_data_val', null, ['class' => 'form-control'])!!}
            </div>
            <button >Save</button>
            <hr>
            <table >
            @foreach($Product as $t)
                <tr>
                    <td><td width="10px"><input type="checkbox" name="products_id_edit[]" value="{{$t->id}}" /></td></td>
                    <td>{{$t->id}}</td>
                    <td><a href="#"  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="#"  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="#"  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>
                </tr>
            @endforeach
            </table>
            {!! Form::close() !!}
            
            
        </div>
    </div>
</div>
@endsection
@section('scripts')
<script>
$.fn.editable.defaults.mode = 'inline';
$(document).ready(function() {
    $('.ProductEdit').editable({
        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.";
            }
        }
    });
});
</script>
@endsection

Step : 6 Laravel Main Layout

6. Make Main Application Layout view file in

Another must read:  How to Generate JavaScript Random Numbers?

resources/views/app.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
    <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>
</head>
<body>
@yield('content')
<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>
@yield('scripts')
</body>
</html>
Angular 6 CRUD Operations Application Tutorials

Read :

Summary

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 onlinecode 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.

Hope this code and post will helped you for implement jQuery AJAX Inline CRUD using Laravel MySQL – Technology. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

Leave a Comment

Your email address will not be published. Required fields are marked *

  +  9  =  14

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US