Laravel 5 fetch data from database in cascading dropdown list with Ajax

Question

I'm very new to laravel5, and it's my first time use MVC framework. I've tired to read the laravel docs but still cannot find out the way to implement it...

I want to do a cascading dropdown list like the link below:

http://buffernow.com/demo/cascadedrpdwn/

It can download from

http://www.mediafire.com/?p8al84azf2hh7mz

and the unzip password

buffernow.com1717

seems that it call doAjax to pass the parameter to another php to execute the query, so there might have 3 other php for execute it..

I searched from google, it show some jquery or js example but i don't know how to transform into Laravel(MVC structure) format.

Currently I just create the blade, controller ,model then stuck into it almost a whole day. Can anyone help me to point out the way or resource that i could follow the structure to build it up, just like the demo from the link..?

Thanks for the help.

Answer 1

An example way of doing this.

Lets say that we have countries and cities with models App\\Country and App\\City. A country has many cities.

And two controllers. CountryController and CountryCityController. We want to show a dropdown in CountryController and when the user selects a country, we want to show the cities related to the country.

Country:

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Country extends Model
{
    public function cities()
    {
        return $this->hasMany(App\City::class)
            ->select("id", "city_id", "name");
    }
}

CountryController:

<?php

namespace App\Http\Controllers;

use App\Country;

class CountryController extends Controller
{
    public function index()
    {
        $countries = Country::select("id", "name")->get();

        return \View::make("view")->with("countries", $countries);
    }
}

City:

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class City extends Model
{
    /**
     * @return JSON
     */
    public function country()
    {
        return $this->belongsTo(App\Country::class);
    }
}

CountryCityController:

<?php

namespace App\Http\Controllers;

use App\Country;

class CountryCityController extends Controller
{
    public function index($countryId)
    {
        return Country::whereId($countryId)->first()->cities;

        // Or a better way:

        return Country::findOrFail($countryId)->cities;
    }
}

When the user select the country, you listen to it, go to CountryCityController@index with ajax and add generate the options for the second dropdown.

Hope that makes sense.

Answer 2

Dear Hilmi Erdem KEREN:

So glad that you answered my question, i've got an basic ideas into it. Thank you so much. And because I wanted to create 3-level cascading dropdown list to show about the data which matched the 3-level dropdown list record, like if i choose CISB110(This is the course code)-> Assignment(This is the classification)->1(This is the classification_index), then will show out the matched record through Ajax.

I have three tables in my database:

course.table:

course_id course_code

1 CISB110

2 CISB210

classificaiton.table:

course_id classification_id classification_name

1 1 Assignment

1 2 Quiz

mark.table:

course_id classification_id classification_index mark

1 1 1 80

1 2 1 90

Then I followed your structure then i created these:

CourseController (like your example:Country)

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Course;
use App\Http\Requests;
use App\Http\Controllers\Controller;

class CourseController extends Controller
{
  public function index()
  {
    $courses = Course::select("course_id", "coursen_code")->get();

    return \View::make("marks-management")->with("courses", $courses);
  }
}

CourseClassificationController: (like city)

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Course;
use App\Http\Requests;
use App\Http\Controllers\Controller;

class CourseClassificationController extends Controller
{
  public function index($course_id)
  {
    return Country::findOrFail($course_id)->first()->classifications;
  }
}

MarksManagementController:

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Requests;
use App\MarksManagement;
use App\Http\Controllers\Controller;

class MarksManagementController extends Controller
{

  public function __construct()
  {
    $this->middleware('auth');
  }

  public function index()
  {
    return view('marks-management');
  }
}

And the Models,

Course.php:

class Course extends Model
{
  public function classifications()
  {
     return $this->hasMany(App\Classification::class)
        ->select("course_id", "classification_id", "classification_name");
  }
}

Classification.php:

class Classification extends Model
{
  public function Course()
  {
    return $this->hasMany(App\Classification::class)
        ->select("classification_id", "classification_index_id", "classification_index_name");
    return $this->belongsTo(App\Course::class);
  }
}

Classification_index.php:

class Classification_index extends Model
{
  public function Classification()
  {
    return $this->belongsTo(App\Classification::class);
  }
}

MarksManagement.php

class MarksManagement extends Model
{
  protected $table = 'mark';
  public $timestamps = false;
}

And the view,

marks-management.blade.php

@extends('app')

@section('content')

<div>
  <p>
    <b>Course Code: </b>
        <select name="course_code" id="course_code" onChange="">
            <option value="">Please select:</option></select>
    <b>Classification: </b>
        <select name="classification_name" id="classification_name" disabled="disabled" onChange="">
            <option value="">Please select:</option></select>
    <b>Classification Index:</b>
        <select name="classification_index" id="classification_index" disabled="disabled" onChange="showOutput();">
            <option value="">Please select:</option></select>
  </p>

  <div id="output"></div>
</div>

<script type="text/javascript">
function showOutput(){
  alert("The mark is: " + '';
}
</script>
@endsection

And routes.php

Route::group(['middleware' => 'web'], function () {
  Route::auth();
  Route::get('/marks-management','MarksManagementController@index');

});

I know there's lot of mistakes, and missing something important, but i really want to learn and know how to apply Ajax cascading dropdown list with fetch database record in Laravel5. Thank you for your patience to watch my stupid code...And if you feel free, I want to listen more your suggestion any ways to implement it.