Hey Artisan
Today i am going to discuss about a brand new topic which is how to make simple dependent dropdown using jquery ajax in Laravel 8. In this tutorial you will learn laravel dynamic dependent dropdown using ajax.
I will use a Category table to show you laravel jquery ajax categories and subcategories select dropdown. Many developer create subcategory table also to do it. But no need to create sub category.
I will create a category table which contains two field one is category name and other is parent_id. By using paren_id we will find out all subcategories from a category.
I will make a self relationship within the category table to show you laravel jquery ajax categories and subcategories select dropdown menu item. Let's see how we can make it.
Preview : before selecting category
Preview : after selecting category
Preview : after selecting category
Now let's start our example fetch data from database in dropdownlist in laravel onchange ajax jquery in laravel 7 tutorial.
Step 1: Create Category Model
Now we need a category model to get category and dependent subcategory using ajax. So run below command to create it
php artisan make:model Category -m
After doing it, open the newly created migration file and paste the following code.
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateCategoriesTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('categories', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->unsignedInteger('parent_id')->nullable();
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('categories');
}
}
Now open Category model to make a self relationship.
app/Category.php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Category extends Model
{
protected $guarded = [];
public function subcategories(){
return $this->hasMany('App\Category', 'parent_id');
}
}
Now run the below command to migrate category model.
php artisan migrate
After doing all of the above things, you need to insert some dummy data to create our laravel 7 dependent dropdown example with demo tutorial. So make it like below
Step 2: Create Route
Here we need two routes. from one route we will see our blade view and from another route we will send our ajax request to the server.
routes/web.php
use App\Category;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
Route::get('/', function () {
$categoris = Category::where('parent_id',0)->get();
return view('welcome',["categoris" => $categoris]);
});
Route::post('/subcat', function (Request $request) {
$parent_id = $request->cat_id;
$subcategories = Category::where('id',$parent_id)
->with('subcategories')
->get();
return response()->json([
'subcategories' => $subcategories
]);
})->name('subcat');
Read also : Create API Authentication using Laravel Passport
Step 3: Create Blade File
We are in the last step. So create welcome.blade.php and paste this below code. Here we will write our jquery code and we will send ajax request from this file.
resources/view/welcome.blade.php
Now you can check it after doing all of those above things. Hope it can help you.
#ajax #ajax-request #jquery #dropdown-menu #laravel-5 #laravel-6 #laravel-7 #laravel #demo #example #source-code