How to solve Laravel Ajax dropdown?

Question

Here is my output. When user select the site, the list of controller will display. My problems is when user select the site, the list of controller does not displayed.

Controller:

public function index()
{
    $sites = Sites :: pluck ('sites_id' ,'site_code' , 'site_name');
    return view ('query.index',compact('sites'));
}

public function getController($sites_id){

    $controllerData['data'] = device_profile::orderby("dvc_name","asc")
                            ->select('id','dvc_name')
                            ->where('sites',$sites_id)
                            ->get();

    return response()->json($controllerData);
 
}

View:

 <div class="form-group">
                        <label class="control-label mb-10 text-left">Site:</label>
                        <select name="sites_id" class="form-control" required="">
                            @foreach ($sites as $site_code => $sites_id) 
                                <option value="{{$sites_id}}" 
                                    {{ old('sites_id') == $sites_id ? 'selected' : '' }}>
                                    {{ $site_code }}
                                </option>
                            @endforeach
                        </select>

                        @error('sites_id')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror       
                    </div>
                    <div class="form-group">
                        <label for="dvc_name">Select Controller:</label>
                        <select name="dvc_name" class="form-control" required="">
                        <option>--Controller List--</option>
                        </select>
                    </div>

                    <script type='text/javascript'>

                        $(document).ready(function(){
                    
                          // Department Change
                          $('#sites_id').change(function(){
                    
                             // Department id
                             var id = $(this).val();
                    
                             // Empty the dropdown
                             $('#dvc_name').find('option').not(':first').remove();
                    
                             // AJAX request 
                             $.ajax({
                               url: 'getController/'+sites_id,
                               type: 'get',
                               dataType: 'json',
                               success: function(response){
                    
                                 var len = 0;
                                 if(response['data'] != null){
                                   len = response['data'].length;
                                 }
                    
                                 if(len > 0){
                                   // Read data and create <option >
                                   for(var i=0; i<len; i++){
                    
                                     var sites_id = response['data'][i].sites_id;
                                     var dvc_name = response['data'][i].dvc_name;
                    
                                     var option = "<option value='"+sites_id+"'>"+dvc_name+"</option>"; 
                    
                                     $("#dvc_name").append(option); 
                                   }
                                 }
                    
                               }
                            });
                          });
                    
                        });
                    
                        </script>

Web:

Route::get('query-index', 'QueryDataController@index')->name('query.index');
Route::get ('query-controller/getcontrollers/{sites_id}', 'QueryDataController@getControllers')->name('profile.getControllers');

Below is my database for sites and device profile:

Sites:

Device Profile:

I hope someone can help me to solve this problem. Thank you.

for starters, you do have a name="sites_id" but doesn't have id="sites_id" — Kevin
– Kevin, Commented Mar 15, 2021 at 3:32

Zia Yamin · Accepted Answer · 2021-03-15 06:35:39Z

2

your URL in your ajax method is:

url: 'getController/'+sites_id,

And your route is :

Route::get ('query-controller/getcontrollers/{sites_id}', 'QueryDataController@getControllers')->name('profile.getControllers');

So you should change your ajax URL to this:

url: 'query-controller/getControllers/'+sites_id,

answered Mar 15, 2021 at 6:35

Zia Yamin

1,0262 gold badges13 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vignesh Saravanan · Accepted Answer · 2021-05-02 13:08:50Z

0

In this you have to call that url in ajax, url should be same as that you mention in Routes,

    $('#sites_id').change(function(){
    var site_id=this.value;
    $.ajax({
    siteid:site_id,
    url : 'query-controller/getcontrollers/'+siteid,
    })
    })

answered May 2, 2021 at 13:08

Vignesh Saravanan

2043 silver badges6 bronze badges

Collectives™ on Stack Overflow

How to solve Laravel Ajax dropdown?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related