Edit Data With Bootstrap Modal Window In Laravel

Hello Artisan

In this i will discuss about how to edit data with Bootstrap modal window in Laravel. In this tutorial i won't do crud, i will just show you how you can edit data using bootstrap modal in Laravel. We will show data in modal laravel with pop up.

If you edit data using bootstrap modal then no need to visit another page or no need to create edit page in Lararvel. So you will learn how to pass data from controller to modal in laravel. You will be clear after completing this how to display data in modal popup laravel tutorial.

Let's start our how to edit data in laravel with modal tutorial.

Step 1 : Create Route

In this step we need to create route for creating edit data with bootstarp modal. So create it.

routes/web.php

Route::get('/', 'TestController@index')->name('root');
Route::get('/color/{id}/edit', 'TestController@update')->name('color.update');
Route::post('/color/{id}', 'TestController@edit')->name('color.edit');

 

Step 2 : Create Controller 

In this step we have to create test controller. So create it and then paste this below code to edit data with modal in laravel.

app/Http/Controllers/TestController.php

namespace App\Http\Controllers;

use App\Category;
use Illuminate\Http\Request;

class TestController extends Controller
{
    public function index()
    {   
    	$category = Category::all();
    	return view('home',compact('lija'));
    }

    public function update($id)
    {
    	$category = Category::find($id);

	    return response()->json([
	      'data' => $category
	    ]);
    }

    public function edit(Request $request, $id)
    {
      Category::updateOrCreate(
       [
        'id' => $id
       ],
       [
        'name' => $request->name,
       ]
      );

      return response()->json([ 'success' => true ]);

    }
}

 

Step 3 : Create View

Now in this final step we have to create our home.blade.php. so create it and paste this below code.

resources/views/home.blade.php

 

Read also : Laravel 7.x Ajax CRUD Example with Sweet Alert

 

Hope it can help you.

 

#laravel #laravel-8x #laravel-7x #modal #bootstrap #edit-modal #jquery