{"id":3963,"date":"2020-09-15T18:04:44","date_gmt":"2020-09-15T18:04:44","guid":{"rendered":"https:\/\/programmingfields.com\/?p=3963"},"modified":"2026-05-02T06:30:38","modified_gmt":"2026-05-02T06:30:38","slug":"laravel-8-ajax-crud-application-tutorial","status":"publish","type":"post","link":"https:\/\/programmingfields.com\/laravel-8-ajax-crud-application-tutorial\/","title":{"rendered":"Laravel 8 Ajax CRUD Application Tutorial For Beginners"},"content":{"rendered":"\n<p>We can use Ajax in Laravel 8 for creating any application. Ajax will make an asynchronous execution of the webpage. So, if you want to create a webpage in PHP. And you don&#8217;t want to reload it, you will have to use the Ajax. In this post, I will show you how to create a <strong>Laravel 8 Ajax CRUD<\/strong> application. I have already shared a post for the <a rel=\"noreferrer noopener\" href=\"https:\/\/programmingfields.com\/laravel-8-crud-application-tutorial-from-scratch\/\" target=\"_blank\">Laravel 8 CRUD application<\/a>. But, in that project, the webpage is reloading on the form submit. That&#8217;s why, through this post, I will implement it using the Ajax. Hence, let&#8217;s create a project and start diving into it.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-light-blue ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/programmingfields.com\/laravel-8-ajax-crud-application-tutorial\/#Prerequisites\" >Prerequisites<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/programmingfields.com\/laravel-8-ajax-crud-application-tutorial\/#Create_Project_For_Laravel_8_Ajax_CRUD\" >Create Project For Laravel 8 Ajax CRUD<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/programmingfields.com\/laravel-8-ajax-crud-application-tutorial\/#Create_and_Configure_Database\" >Create and Configure Database<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/programmingfields.com\/laravel-8-ajax-crud-application-tutorial\/#Create_a_Model_Migration_and_Controller\" >Create a Model, Migration, and Controller<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/programmingfields.com\/laravel-8-ajax-crud-application-tutorial\/#Add_Fillable_Data_in_Model\" >Add Fillable Data in Model<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/programmingfields.com\/laravel-8-ajax-crud-application-tutorial\/#Create_Views_For_Ajax_CRUD_Application\" >Create Views For Ajax CRUD Application<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/programmingfields.com\/laravel-8-ajax-crud-application-tutorial\/#Add_Javascript_For_Laravel_8\" >Add Javascript For Laravel 8<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/programmingfields.com\/laravel-8-ajax-crud-application-tutorial\/#Check_the_Result_of_Ajax_CRUD_Application\" >Check the Result of Ajax CRUD Application<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/programmingfields.com\/laravel-8-ajax-crud-application-tutorial\/#Conclusion\" >Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Prerequisites\"><\/span><strong>Prerequisites<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>For creating a new project in Laravel 8 for ajax crud, your system must required the following tools.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>PHP &gt;= 7.3<\/strong><\/li><li><strong>MySQL (version &gt; 5)<\/strong><\/li><li><strong>Apache\/Nginx Server<\/strong><\/li><li><strong>VS Code Editor<\/strong><\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Create_Project_For_Laravel_8_Ajax_CRUD\"><\/span><strong>Create Project For Laravel 8 Ajax CRUD <\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>We will use composer to create the project. So, in the terminal or command prompt hit the belwo command.<\/p>\n\n\n\n<pre title=\"create-project\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">composer create-project --prefer-dist laravel\/laravel ajax-crud<\/code><\/pre>\n\n\n\n<p>This will take a couple of minutes for creating this project. <\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"898\" height=\"455\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/09\/1.-Create-new-project-in-laravel-8-1.png?resize=898%2C455&#038;ssl=1\" alt=\"Laravel 8 Create New Project\" class=\"wp-image-3968\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/09\/1.-Create-new-project-in-laravel-8-1.png?w=898&amp;ssl=1 898w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/09\/1.-Create-new-project-in-laravel-8-1.png?resize=300%2C152&amp;ssl=1 300w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/09\/1.-Create-new-project-in-laravel-8-1.png?resize=768%2C389&amp;ssl=1 768w\" sizes=\"auto, (max-width: 898px) 100vw, 898px\" \/><figcaption><strong>Laravel 8 Create New Project<\/strong><\/figcaption><\/figure><\/div>\n\n\n\n<p>After completing the installation of the above project, let&#8217;s create and configure the database.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><a href=\"https:\/\/programmingfields.com\/laravel-8-multiple-images-upload-with-validation\/\" target=\"_blank\" rel=\"noreferrer noopener\">Laravel 8 Multiple Images Upload with Validation<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Create_and_Configure_Database\"><\/span><strong>Create and Configure Database<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>For the database, I will be using the MySQL. So, just create a database by giving the name there.<\/p>\n\n\n\n<pre title=\"create-database\" class=\"wp-block-code\"><code lang=\"sql\" class=\"language-sql\">CREATE DATABASE ajax_crud;<\/code><\/pre>\n\n\n\n<p>Now, we have the database ready. Therefore, let&#8217;s configure it for the project. This will establish a database connection.<\/p>\n\n\n\n<pre title=\".env file\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">DB_CONNECTION=mysql\nDB_HOST=127.0.0.1\nDB_PORT=3306\nDB_DATABASE=ajax_crud\nDB_USERNAME=root\nDB_PASSWORD=root<\/code><\/pre>\n\n\n\n<p>After configuring the database, let&#8217;s create a model and migration.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Create_a_Model_Migration_and_Controller\"><\/span><strong>Create a Model, Migration, and Controller<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>For implementing the ajax crud operation, it will require the model and migration. Hence, I will be creating these all by a single command. Larvel provides the facility to create the model, migration, and controller in one line of command.<\/p>\n\n\n\n<pre title=\"create model, migration, and controller\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">php artisan make:model Post -mcr<\/code><\/pre>\n\n\n\n<p>The above command will generate these three files.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"898\" height=\"128\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/09\/4.-Creat-model-migration-and-controller.png?resize=898%2C128&#038;ssl=1\" alt=\"Create Model, Migration, Controller with Resource\" class=\"wp-image-3977\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/09\/4.-Creat-model-migration-and-controller.png?w=898&amp;ssl=1 898w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/09\/4.-Creat-model-migration-and-controller.png?resize=300%2C43&amp;ssl=1 300w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/09\/4.-Creat-model-migration-and-controller.png?resize=768%2C109&amp;ssl=1 768w\" sizes=\"auto, (max-width: 898px) 100vw, 898px\" \/><figcaption><strong>Create Model, Migration, Controller with Resource<\/strong><\/figcaption><\/figure><\/div>\n\n\n\n<p>Once, these files created, firstly open the migration file. You can find it the <strong>create_posts_table.php<\/strong> migration file inside the database.<\/p>\n\n\n\n<pre title=\"create_posts_table.php\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">&lt;?php\n\nuse Illuminate\\Database\\Migrations\\Migration;\nuse Illuminate\\Database\\Schema\\Blueprint;\nuse Illuminate\\Support\\Facades\\Schema;\n\nclass CreatePostsTable extends Migration\n{\n    \/**\n     * Run the migrations.\n     *\n     * @return void\n     *\/\n    public function up()\n    {\n        Schema::create('posts', function (Blueprint $table) {\n            $table-&gt;id();\n            $table-&gt;string('title');\n            $table-&gt;string('description');\n            $table-&gt;timestamps();\n        });\n    }\n\n    \/**\n     * Reverse the migrations.\n     *\n     * @return void\n     *\/\n    public function down()\n    {\n        Schema::dropIfExists('posts');\n    }\n}\n<\/code><\/pre>\n\n\n\n<p>So, here, I have added the migration file as well. Now, let&#8217;s migrate the table.<\/p>\n\n\n\n<pre title=\"migrate table\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">php artisan migrate<\/code><\/pre>\n\n\n\n<p>The above command will migrate the tables.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"897\" height=\"228\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/09\/3.-migrate-tables-2.png?resize=897%2C228&#038;ssl=1\" alt=\"Migrate Tables\" class=\"wp-image-3975\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/09\/3.-migrate-tables-2.png?w=897&amp;ssl=1 897w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/09\/3.-migrate-tables-2.png?resize=300%2C76&amp;ssl=1 300w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/09\/3.-migrate-tables-2.png?resize=768%2C195&amp;ssl=1 768w\" sizes=\"auto, (max-width: 897px) 100vw, 897px\" \/><figcaption><strong>Migrate Tables<\/strong><\/figcaption><\/figure><\/div>\n\n\n\n<p class=\"has-text-align-center\"><a href=\"https:\/\/programmingfields.com\/laravel-8-image-upload-with-validation\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to Upload Image in Laravel 8 with Validation<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Add_Fillable_Data_in_Model\"><\/span><strong>Add Fillable Data in Model<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>For the model, we will have to add the fillable data. So, in the <strong>Post.php<\/strong> add the below fillable data as a mass assignment.<\/p>\n\n\n\n<pre title=\"Post.php\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">&lt;?php\n\nnamespace App\\Models;\n\nuse Illuminate\\Database\\Eloquent\\Factories\\HasFactory;\nuse Illuminate\\Database\\Eloquent\\Model;\n\nclass Post extends Model\n{\n    use HasFactory;\n\n    protected $fillable = [\n        \"title\", \"description\"\n    ];\n}\n<\/code><\/pre>\n\n\n\n<p>So, we have the tables ready and added the mass assignment. Now, let&#8217;s move to the functionality for creating the ajax crud application.<\/p>\n\n\n\n<p>In the <strong>PostController.php<\/strong> we have the resource for the CRUD operation. Now, we will be putting out the functionalities inside these functions.<\/p>\n\n\n\n<p>Add the below code snippet in the <strong>PostController.php<\/strong> file.<\/p>\n\n\n\n<pre title=\"PostController.php\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">&lt;?php\n\nnamespace App\\Http\\Controllers;\n\nuse App\\Models\\Post;\nuse Illuminate\\Http\\Request;\n\nclass PostController extends Controller\n{\n    \/\/ ----------- [ post listing ] -------------\n    public function index()\n    {\n        $posts      =       Post::latest()-&gt;paginate(5);\n        return view('index', compact('posts'));\n    }\n\n\/\/ ------------- [ store post ] -----------------\n    public function store(Request $request)\n    {\n        $request-&gt;validate([\n            'title'         =&gt;      'required',\n            'description'   =&gt;      'required',\n        ]);\n\n       $post            =           Post::create($request-&gt;all());\n\n       if(!is_null($post)) {\n            return response()-&gt;json([\"status\" =&gt; \"success\", \"message\" =&gt; \"Success! post created.\", \"data\" =&gt; $post]);\n       }\n\n       else {\n           return response()-&gt;json([\"status\" =&gt; \"failed\", \"message\" =&gt; \"Alert! post not created\"]);\n       }\n    }\n\n\/\/ ---------------- [ Update post ] -------------\n    public function update(Request $request)\n    {\n        $post_id        =       $request-&gt;id;\n        $post           =       Post::where(\"id\", $post_id)-&gt;update($request-&gt;all());\n\n        if($post == 1) {\n            return response()-&gt;json([\"status\" =&gt; \"success\", \"message\" =&gt; \"Success! post updated\"]);\n        }\n\n        else {\n            return response()-&gt;json([\"status\" =&gt; \"failed\", \"message\" =&gt; \"Alert! post not updated\"]);\n        }\n    }\n\n\/\/ -------------- [ Delete post ] ---------------\n    public function destroy($post_id) {\n        $post       =       Post::where(\"id\", $post_id)-&gt;delete();\n        if($post == 1) {\n            return response()-&gt;json([\"status\" =&gt; \"success\", \"message\" =&gt; \"Success! post deleted\"]);\n        }\n\n        else {\n            return response()-&gt;json([\"status\" =&gt; \"failed\", \"message\" =&gt; \"Alert! post not deleted\"]);\n        }\n    }\n}\n<\/code><\/pre>\n\n\n\n<p>After adding the above snippet, we&#8217;ll require adding the routes. Here, add these routes in the <strong>web.php<\/strong>.<\/p>\n\n\n\n<pre title=\"web.php\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">&lt;?php\n\nuse App\\Http\\Controllers\\PostController;\nuse Illuminate\\Support\\Facades\\Route;\n\n\nRoute::get('posts', [PostController::class, 'index']);\n\nRoute::post('post', [PostController::class, 'store']);\n\nRoute::put('post', [PostController::class, 'update']);\n\nRoute::delete('post\/{post_id}', [PostController::class, 'destroy']);\n<\/code><\/pre>\n\n\n\n<p class=\"has-text-align-center\"><a href=\"https:\/\/programmingfields.com\/laravel-8-form-validation-tutorial-for-beginners\/\" target=\"_blank\" rel=\"noreferrer noopener\">Laravel 8 Form Validation Tutorial For Beginners<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Create_Views_For_Ajax_CRUD_Application\"><\/span><strong>Create Views For Ajax CRUD Application<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Now, the functionality part has been done. So, let&#8217;s read and render the data in the view side.<\/p>\n\n\n\n<p>For the Ajax CRUD application, I will be creating the following views &#8211;<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li><strong>master.blade.php<\/strong><\/li><li><strong>index.blade.php<\/strong><\/li><\/ol>\n\n\n\n<p>I will perform the CRUD operation through the Bootstrap 4 Modal. So, it will not require the views for all the operations. <\/p>\n\n\n\n<p>In the master blade, I will include the bootstrap and js file. Then all the activities will gonna perform from the index blade.<\/p>\n\n\n\n<pre title=\"index.blade.php\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">&lt;!doctype html&gt;\n&lt;html lang=\"en\"&gt;\n  &lt;head&gt;\n    &lt;title&gt; @yield('title') | Laravel 8 Ajax CRUD | Programming Fields &lt;\/title&gt;\n    &lt;meta charset=\"utf-8\"&gt;\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\"&gt;\n    &lt;link rel=\"stylesheet\" href=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.3.1\/css\/bootstrap.min.css\" integrity=\"sha384-ggOyR0iXCbMQv3Xipma34MD+dH\/1fQ784\/j6cY\/iJTQUOhcWr7x9JvoRxT2MZw1T\" crossorigin=\"anonymous\"&gt;\n    &lt;meta name=\"csrf-token\" content=\"{{ csrf_token() }}\" \/&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;div class=\"container mt-5\"&gt;\n        &lt;h4 class=\"text-center font-weight-bold\"&gt; Laravel 8 Ajax CRUD Application - Programming Fields &lt;\/h4&gt;\n\n        @yield('content')\n    &lt;\/div&gt;\n\n    &lt;script src=\"https:\/\/code.jquery.com\/jquery-3.5.1.js\" integrity=\"sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH\/C8ycbRAkjPDc=\"\n  crossorigin=\"anonymous\"&gt;&lt;\/script&gt;\n    &lt;script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/popper.js\/1.14.7\/umd\/popper.min.js\" integrity=\"sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1\" crossorigin=\"anonymous\"&gt;&lt;\/script&gt;\n    &lt;script src=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.3.1\/js\/bootstrap.min.js\" integrity=\"sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf\/nJGzIxFDsf4x0xIM+B07jRM\" crossorigin=\"anonymous\"&gt;&lt;\/script&gt;\n    &lt;script src=\"{{asset('js\/script.js')}}\"&gt;&lt;\/script&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<p>After adding the above snippet in the master blade, add the next snippet.<\/p>\n\n\n\n<pre title=\"index.blade.php\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">@extends('master')\n@section('title') Posts Listing @endsection\n@section('content')\n\n&lt;style&gt;\n    svg.w-5.h-5{\n        width: 25px !important;\n    }\n    span.relative.z-0.inline-flex.shadow-sm.rounded-md{\n        float: right !important;\n    }\n&lt;\/style&gt;\n\n&lt;div class=\"row\"&gt;\n    &lt;div class=\"col-xl-6\"&gt;\n        &lt;div id=\"result\"&gt;&lt;\/div&gt;\n    &lt;\/div&gt;\n\n    &lt;div class=\"col-xl-6 text-right\"&gt;\n        &lt;a href=\"javascript:void(0);\" data-target=\"#addPostModal\" data-toggle=\"modal\" class=\"btn btn-success\"&gt; Add New &lt;\/a&gt;\n    &lt;\/div&gt;\n&lt;\/div&gt;\n\n&lt;table class=\"table table-striped mt-4\"&gt;\n    &lt;thead&gt;\n        &lt;th&gt; Post Id &lt;\/th&gt;\n        &lt;th&gt; Title &lt;\/th&gt;\n        &lt;th&gt; Description &lt;\/th&gt;\n        &lt;th&gt; Action &lt;\/th&gt;\n    &lt;\/thead&gt;\n\n    &lt;tbody&gt;\n        @foreach ($posts as $post)\n            &lt;tr&gt;\n                &lt;td&gt; {{$post-&gt;id}} &lt;\/td&gt;\n                &lt;td&gt; {{$post-&gt;title}} &lt;\/td&gt;\n                &lt;td&gt; {{$post-&gt;description}} &lt;\/td&gt;\n                &lt;td&gt;\n                    &lt;a href=\"javascript:void(0);\" data-toggle=\"modal\" data-target=\"#addPostModal\" data-id=\"{{$post-&gt;id}}\" data-title=\"{{$post-&gt;title}}\" data-description=\"{{$post-&gt;description}}\" data-action=\"view\" class=\"btn btn-info btn-sm\"&gt; View &lt;\/a&gt;\n                    &lt;a href=\"javascript:void(0);\" data-toggle=\"modal\" data-target=\"#addPostModal\" data-id=\"{{$post-&gt;id}}\" data-title=\"{{$post-&gt;title}}\" data-description=\"{{$post-&gt;description}}\" data-action=\"edit\" class=\"btn btn-success btn-sm\"&gt; Edit &lt;\/a&gt;\n                    &lt;a href=\"javascript:void(0);\" onclick=\"deletePost({{$post-&gt;id}})\" class=\"btn btn-danger btn-sm\"&gt; Delete &lt;\/a&gt;\n                &lt;\/td&gt;\n            &lt;\/tr&gt;\n        @endforeach\n    &lt;\/tbody&gt;\n&lt;\/table&gt;\n\n\n&lt;!-- Create post modal --&gt;\n&lt;div class=\"modal fade\" id=\"addPostModal\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"addPostModalLabel\" aria-hidden=\"true\"&gt;\n    &lt;div class=\"modal-dialog\" role=\"document\"&gt;\n\n      &lt;div class=\"modal-content\"&gt;\n        &lt;div class=\"modal-header\"&gt;\n          &lt;h5 class=\"modal-title\" id=\"addPostModalLabel\"&gt; Create Post &lt;\/h5&gt;\n          &lt;button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\"&gt;\n            &lt;span aria-hidden=\"true\"&gt; \u00d7 &lt;\/span&gt;\n          &lt;\/button&gt;\n        &lt;\/div&gt;\n\n        &lt;div class=\"modal-body\"&gt;\n            &lt;form method=\"POST\" id=\"postForm\"&gt;\n                {{-- @csrf --}}\n                &lt;input type=\"hidden\" id=\"id_hidden\" name=\"id\" \/&gt;\n                &lt;div class=\"form-group\"&gt;\n                    &lt;label for=\"title\"&gt; Title &lt;span class=\"text-danger\"&gt;*&lt;\/span&gt;&lt;\/label&gt;\n                    &lt;input type=\"text\" name=\"title\" id=\"title\" class=\"form-control\"&gt;\n                &lt;\/div&gt;\n\n                &lt;div class=\"form-group\"&gt;\n                    &lt;label for=\"title\"&gt; Description &lt;span class=\"text-danger\"&gt;*&lt;\/span&gt;&lt;\/label&gt;\n                    &lt;textarea name=\"description\" id=\"description\" class=\"form-control\"&gt;&lt;\/textarea&gt;\n                &lt;\/div&gt;\n            &lt;\/form&gt;\n        &lt;\/div&gt;\n\n        &lt;div class=\"modal-footer\"&gt;\n          &lt;button type=\"submit\" id=\"createBtn\" class=\"btn btn-primary\"&gt; Save &lt;\/button&gt;\n        &lt;\/div&gt;\n\n        &lt;div class=\"result\"&gt;&lt;\/div&gt;\n\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n&lt;\/div&gt;\n\n{!! $posts-&gt;links() !!}\n\n@endsection\n<\/code><\/pre>\n\n\n\n<p class=\"has-text-align-center\"><a href=\"https:\/\/programmingfields.com\/implement-datatable-column-filter-in-laravel-7\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to Implement Column Filter in Laravel 7 Yajra Datatable<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Add_Javascript_For_Laravel_8\"><\/span><strong>Add Javascript For Laravel 8<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>For completing the entire events and action, you will have to add some script. So, create a folder named <strong>js <\/strong>inside the public folder. Then inside the <strong>js <\/strong>folder create a file named <strong>script.js<\/strong> At last, add the below script there.<\/p>\n\n\n\n<pre title=\"script.js\" class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">\n     \/\/ Pass csrf token in ajax header\n    $.ajaxSetup({\n        headers: {\n            'X-CSRF-TOKEN': $('meta[name=\"csrf-token\"]').attr('content')\n        }\n    });\n\n\n\/\/----- [ button click function ] ----------\n    $(\"#createBtn\").click(function(event) {\n        event.preventDefault();\n        $(\".error\").remove();\n        $(\".alert\").remove();\n\n        var title       =       $(\"#title\").val();\n        var description =       $(\"#description\").val();\n\n        if(title == \"\") {\n            $(\"#title\").after('&lt;span class=\"text-danger error\"&gt; Title is required &lt;\/span&gt;');\n\n        }\n\n        if(description == \"\") {\n            $(\"#description\").after('&lt;span class=\"text-danger error\"&gt; Description is required &lt;\/span&gt;');\n            return false;\n        }\n\n        var form_data   =       $(\"#postForm\").serialize();\n\n        \/\/ if post id exist\n        if($(\"#id_hidden\").val() !=\"\") {\n            updatePost(form_data);\n        }\n\n        \/\/ else create post\n        else {\n            createPost(form_data);\n        }\n    });\n\n\n    \/\/ create new post\n    function createPost(form_data) {\n        $.ajax({\n            url: 'post',\n            method: 'post',\n            data: form_data,\n            dataType: 'json',\n\n            beforeSend:function() {\n                $(\"#createBtn\").addClass(\"disabled\");\n                $(\"#createBtn\").text(\"Processing..\");\n            },\n\n            success:function(res) {\n                $(\"#createBtn\").removeClass(\"disabled\");\n                $(\"#createBtn\").text(\"Save\");\n\n                if(res.status == \"success\") {\n                    $(\".result\").html(\"&lt;div class='alert alert-success alert-dismissible'&gt;&lt;button type='button' class='close' data-dismiss='alert'&gt;\u00d7&lt;\/button&gt;\" + res.message+ \"&lt;\/div&gt;\");\n                }\n\n                else if(res.status == \"failed\") {\n                    $(\".result\").html(\"&lt;div class='alert alert-danger alert-dismissible'&gt;&lt;button type='button' class='close' data-dismiss='alert'&gt;\u00d7&lt;\/button&gt;\" + res.message+ \"&lt;\/div&gt;\");\n                }\n            }\n        });\n    }\n\n    \/\/ update post\n    function updatePost(form_data) {\n        $.ajax({\n            url: 'post',\n            method: 'put',\n            data: form_data,\n            dataType: 'json',\n\n            beforeSend:function() {\n                $(\"#createBtn\").addClass(\"disabled\");\n                $(\"#createBtn\").text(\"Processing..\");\n            },\n\n            success:function(res) {\n                $(\"#createBtn\").removeClass(\"disabled\");\n                $(\"#createBtn\").text(\"Update\");\n\n                if(res.status == \"success\") {\n                    $(\".result\").html(\"&lt;div class='alert alert-success alert-dismissible'&gt;&lt;button type='button' class='close' data-dismiss='alert'&gt;\u00d7&lt;\/button&gt;\" + res.message+ \"&lt;\/div&gt;\");\n                }\n\n                else if(res.status == \"failed\") {\n                    $(\".result\").html(\"&lt;div class='alert alert-danger alert-dismissible'&gt;&lt;button type='button' class='close' data-dismiss='alert'&gt;\u00d7&lt;\/button&gt;\" + res.message+ \"&lt;\/div&gt;\");\n                }\n            }\n        });\n    }\n\n    \/\/ ---------- [ Delete post ] ----------------\n    function deletePost(post_id) {\n        var status = confirm(\"Do you want to delete this post?\");\n        if(status == true) {\n            $.ajax({\n                url: \"post\/\"+post_id,\n                method: 'delete',\n                dataType: 'json',\n\n                success:function(res) {\n                    if(res.status == \"success\") {\n                        $(\"#result\").html(\"&lt;div class='alert alert-success alert-dismissible'&gt;&lt;button type='button' class='close' data-dismiss='alert'&gt;\u00d7&lt;\/button&gt;\" + res.message + \"&lt;\/div&gt;\");\n                    }\n                    else if(res.status == \"failed\") {\n                        $(\"#result\").html(\"&lt;div class='alert alert-success alert-dismissible'&gt;&lt;button type='button' class='close' data-dismiss='alert'&gt;\u00d7&lt;\/button&gt;\" + res.message + \"&lt;\/div&gt;\");\n                    }\n                }\n            });\n        }\n    }\n\n$('#addPostModal').on('shown.bs.modal', function (e) {\n   var id           =   $(e.relatedTarget).data('id');\n   var title        =   $(e.relatedTarget).data('title');\n   var description  =   $(e.relatedTarget).data('description');\n   var action       =   $(e.relatedTarget).data('action');\n\n   if(action !== undefined) {\n        if(action === \"view\") {\n\n            \/\/ set modal title\n            $(\".modal-title\").html(\"Post Detail\");\n\n            \/\/ pass data to input fields\n            $(\"#title\").attr(\"readonly\", \"true\");\n            $(\"#title\").val(title);\n\n            $(\"#description\").attr(\"readonly\", \"true\");\n            $(\"#description\").val(description);\n\n            \/\/ hide button\n            $(\"#createBtn\").addClass(\"d-none\");\n        }\n\n\n        if(action === \"edit\") {\n            $(\"#title\").removeAttr(\"readonly\");\n            $(\"#description\").removeAttr(\"readonly\");\n\n            \/\/ set modal title\n            $(\".modal-title\").html(\"Update Post\");\n\n            $(\"#createBtn\").text(\"Update\");\n\n             \/\/ pass data to input fields\n             $(\"#id_hidden\").val(id);\n             $(\"#title\").val(title);\n             $(\"#description\").val(description);\n\n             \/\/ hide button\n            $(\"#createBtn\").removeClass(\"d-none\");\n        }\n   }\n\n   else {\n        $(\".modal-title\").html(\"Create Post\");\n\n        \/\/ pass data to input fields\n        $(\"#title\").removeAttr(\"readonly\");\n        $(\"#title\").val(\"\");\n\n        $(\"#description\").removeAttr(\"readonly\");\n        $(\"#description\").val(\"\");\n\n        \/\/ hide button\n        $(\"#createBtn\").removeClass(\"d-none\");\n   }\n});\n<\/code><\/pre>\n\n\n\n<p>After adding the above views, we will have to <\/p>\n\n\n\n<p>Save and run the application on the specified endpoint.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><a href=\"https:\/\/programmingfields.com\/laravel-7-rest-api-for-todo-app-with-passport-auth\/\" target=\"_blank\" rel=\"noreferrer noopener\">Laravel 7 RESTful APIs For Todo App with Passport Auth<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Check_the_Result_of_Ajax_CRUD_Application\"><\/span><strong>Check the Result of Ajax CRUD Application<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Firstly, when you will run the application, the index blade will be opened.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1320\" height=\"585\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/09\/6.-Post-Listing.png?resize=1320%2C585&#038;ssl=1\" alt=\"Post listing in laravel 8 ajax\" class=\"wp-image-3981\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/09\/6.-Post-Listing.png?w=1320&amp;ssl=1 1320w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/09\/6.-Post-Listing.png?resize=300%2C133&amp;ssl=1 300w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/09\/6.-Post-Listing.png?resize=1024%2C454&amp;ssl=1 1024w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/09\/6.-Post-Listing.png?resize=768%2C340&amp;ssl=1 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><figcaption><strong>Post Listing with Create Post Option<\/strong><\/figcaption><\/figure><\/div>\n\n\n\n<p>Currently, we have not any posts. So, create post by clicking on <strong>Add New<\/strong> button. A modal will open with the form. <\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"579\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/09\/7.-Create-post.png?resize=1280%2C579&#038;ssl=1\" alt=\"Create Post on Modal\" class=\"wp-image-3982\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/09\/7.-Create-post.png?w=1280&amp;ssl=1 1280w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/09\/7.-Create-post.png?resize=300%2C136&amp;ssl=1 300w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/09\/7.-Create-post.png?resize=1024%2C463&amp;ssl=1 1024w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/09\/7.-Create-post.png?resize=768%2C347&amp;ssl=1 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><figcaption><strong>Create Post on Modal<\/strong><\/figcaption><\/figure><\/div>\n\n\n\n<p>In this form, I have set the form validation using the jQuery. So, when you will try to create post without filling the detail, it will show you the validation errors.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1020\" height=\"596\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/09\/8.-Create-post-validation.png?resize=1020%2C596&#038;ssl=1\" alt=\"Form Validation using jQuery\" class=\"wp-image-3983\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/09\/8.-Create-post-validation.png?w=1020&amp;ssl=1 1020w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/09\/8.-Create-post-validation.png?resize=300%2C175&amp;ssl=1 300w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/09\/8.-Create-post-validation.png?resize=768%2C449&amp;ssl=1 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><figcaption><strong>Form Validation using jQuery<\/strong><\/figcaption><\/figure><\/div>\n\n\n\n<p>Enter the post detail and click on the <strong>Save <\/strong>button. You will have the success message as showing below.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full is-resized\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/09\/9.-Post-created.png?resize=580%2C315&#038;ssl=1\" alt=\"Post Created Successfully\" class=\"wp-image-3984\" width=\"580\" height=\"315\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/09\/9.-Post-created.png?w=1028&amp;ssl=1 1028w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/09\/9.-Post-created.png?resize=300%2C163&amp;ssl=1 300w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/09\/9.-Post-created.png?resize=1024%2C558&amp;ssl=1 1024w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/09\/9.-Post-created.png?resize=768%2C418&amp;ssl=1 768w\" sizes=\"auto, (max-width: 580px) 100vw, 580px\" \/><figcaption><strong>Post Created Successfully<\/strong><\/figcaption><\/figure><\/div>\n\n\n\n<p>I have added few posts here. Now, in the action, we have the <strong>View<\/strong>, <strong>Edit <\/strong>and <strong>Delete<\/strong>.<\/p>\n\n\n\n<p>When you will click on the <strong>View<\/strong>, the post detail will be passed on the modal form. In the View action, the inputs are in <strong>readonly<\/strong> mode. Also, the button is hidden.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1311\" height=\"533\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/09\/12.-Post-detail.png?resize=1311%2C533&#038;ssl=1\" alt=\"Post detail on Bootstrap Modal\" class=\"wp-image-3985\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/09\/12.-Post-detail.png?w=1311&amp;ssl=1 1311w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/09\/12.-Post-detail.png?resize=300%2C122&amp;ssl=1 300w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/09\/12.-Post-detail.png?resize=1024%2C416&amp;ssl=1 1024w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/09\/12.-Post-detail.png?resize=768%2C312&amp;ssl=1 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><figcaption><strong>Post detail on Bootstrap Modal<\/strong><\/figcaption><\/figure><\/div>\n\n\n\n<p>Similarly, when you click on the <strong>Edit <\/strong>button, it will again open the same modal. But this time, you will have the inputs enabled with the write option, The button is visible as well.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><a href=\"https:\/\/programmingfields.com\/laravel-8-jetstream-create-auth-with-livewire\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to Create Auth with Jetstream and Livewire in Laravel 8<\/a><\/p>\n\n\n\n<p>Now, update the post and you will have the success message as showing below.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1272\" height=\"574\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/09\/13.-Post-updated.png?resize=1272%2C574&#038;ssl=1\" alt=\"Post Updated in Bootstrap Modal\" class=\"wp-image-3986\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/09\/13.-Post-updated.png?w=1272&amp;ssl=1 1272w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/09\/13.-Post-updated.png?resize=300%2C135&amp;ssl=1 300w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/09\/13.-Post-updated.png?resize=1024%2C462&amp;ssl=1 1024w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/09\/13.-Post-updated.png?resize=768%2C347&amp;ssl=1 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><figcaption><strong>Post Updated in Bootstrap Modal<\/strong><\/figcaption><\/figure><\/div>\n\n\n\n<p>At last, when you will try to delete the post, you will have a confirmation.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1363\" height=\"652\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/09\/10.-Post-Delete-confirmation.png?resize=1363%2C652&#038;ssl=1\" alt=\"Delete Confirmation - Laravel 8 Ajax Crud\" class=\"wp-image-3988\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/09\/10.-Post-Delete-confirmation.png?w=1363&amp;ssl=1 1363w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/09\/10.-Post-Delete-confirmation.png?resize=300%2C144&amp;ssl=1 300w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/09\/10.-Post-Delete-confirmation.png?resize=1024%2C490&amp;ssl=1 1024w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/09\/10.-Post-Delete-confirmation.png?resize=768%2C367&amp;ssl=1 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><figcaption><strong>Delete Confirmation<\/strong><\/figcaption><\/figure><\/div>\n\n\n\n<p>When you will confirm the delete then it will delete the post. Also, you will have the success message as showing below.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1329\" height=\"562\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/09\/11.-Post-deleted.png?resize=1329%2C562&#038;ssl=1\" alt=\"Post Deleted after Confirmation -Laravel 8 Ajax Crud\" class=\"wp-image-3989\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/09\/11.-Post-deleted.png?w=1329&amp;ssl=1 1329w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/09\/11.-Post-deleted.png?resize=300%2C127&amp;ssl=1 300w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/09\/11.-Post-deleted.png?resize=1024%2C433&amp;ssl=1 1024w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/09\/11.-Post-deleted.png?resize=768%2C325&amp;ssl=1 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><figcaption><strong>Post Deleted after Confirmation<\/strong><\/figcaption><\/figure><\/div>\n\n\n\n<p class=\"has-text-align-center\"><a href=\"https:\/\/programmingfields.com\/laravel-7-yajra-datatable-with-server-side-processing\/\" target=\"_blank\" rel=\"noreferrer noopener\">Laravel 7 Yajra DataTable with Server Side Processing<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span><strong>Conclusion<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>The Laravel 8 Ajax CRUD application performed on the Bootstrap modal. So, it doesn&#8217;t require more views to perform a certain form of actions. Also, it reduces the code snippet that a normal CRUD operations. So, finally, we have implemented the AJAX in Laravel 8. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>We can use Ajax in Laravel 8 for creating any application. Ajax will make an asynchronous execution of the webpage. So, if you want to create a webpage in PHP. And you don&#8217;t want to reload it, you will have to use the Ajax. In this post, I will show you how to create a [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":3991,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[2564],"tags":[1877,1879,1880,11,1881,1878],"yst_prominent_words":[1505,21,134,1827,513,512,456,1504,1503,105],"class_list":{"0":"post-3963","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-laravel","8":"tag-ajax-crud","9":"tag-ajax-form-handling","10":"tag-form-handling-in-laravel-8","11":"tag-jquery-ajax-form-handling","12":"tag-jquery-form-validation","13":"tag-laravel-8-ajax","14":"entry"},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/09\/Laravel-8-Ajax-CRUD.png?fit=2240%2C1260&ssl=1","jetpack_likes_enabled":true,"jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/posts\/3963","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/comments?post=3963"}],"version-history":[{"count":1,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/posts\/3963\/revisions"}],"predecessor-version":[{"id":8816,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/posts\/3963\/revisions\/8816"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/media\/3991"}],"wp:attachment":[{"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/media?parent=3963"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/categories?post=3963"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/tags?post=3963"},{"taxonomy":"yst_prominent_words","embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/yst_prominent_words?post=3963"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}