Laravel 5.2 Dynamic dropdown select not populating (javascript)

Question

I have two selects country, and information. The selected_country variable is passed to getInfo() which queries all rows matching that country and returns the deptname and id. The id is the option value in the select and is stored in the database,and deptname is the text displayed in the select. Right now my info dropdown is empty and I am not getting any errors.

public function getInfo()
{
    $country = Input::get('selected_country'); 
    $info = Department::where('addressCountry', $country)->orderBy('country')->pluck('deptname', 'id');
    return response()->json($info);

}

route

Route::get('related-info', ['as' => 'related-info', 'uses' => 'Auth\AuthController@getInfo']);

Javascript

$('#addressCountry').on('change', function (e) {
    var slots = $('#info');
    slots.empty();
    var selected_country = e.target.value;
    $.get("related-info?selected_country=" + selected_country, function (data) {
        slots.empty();
        console.log(data);
        $.each(data.slots, function (index, value) {
            slots.append('<option value="' + value.id + '">' + value.name + '</option>');
        });
    });
});

Relavent parts of my view

<form class="form-horizontal" role = "form" method = "POST" action = "{{ url('/register') }}" > {!!csrf_field() !!}

<select class="form-control" name = "addressCountry" id = "addressCountry" ></select >

<select class="form-control" name = "addressProv" id = "addressProv" ></select >

<select id="info" class="form-control" name="info">
   <option value=""></option>
</select>

Also in my view in the scrips section

populateCountries('addressCountry', 'addressProv');

The country and state drop downs are populated using a javascript file its too large to paste here http://pastebin.com/9XUTPEVY

EDIT: After returning a json response in getInfo instead of the view, if I navigate directly to related-info?selected_country=Ireland it will show the id and name of each one. If I goto /register and select Ireland in the dropdown the dropdown does not populate but the response tab in the network console in firedebug shows the id and name of each. I also changed console.log(data); to alert(data) the pop up says [object Object] when selecting Ireland.

Here are 3 screenshots of output http://imgur.com/a/jEfuu

score 0 · Answer 1 · answered May 15 '16 at 18:41

0

All seems right except that you return a view instead of a Json object as response.

Try to replace:

return view('auth.register', ['info' => $info]);

With:

return response()->json($info);

answered May 15 '16 at 18:41

Claudio King

1,606
1
10
12

I have changed my code but it still doesn't work. If I look at the network console in firedebug the response tab is showing an empty array ([ ]) unlike before it just showed the html code for the page. The countries I tried with all have data in the database. – noname May 15 '16 at 18:47
With the json response if i navigate directly to `related-info?selected_country=Ireland` it will show the id and name of each one – noname May 15 '16 at 18:57

score 0 · Answer 2 · edited May 15 '16 at 22:18

0

Change the javascript code to this :

$('#addressCountry').on('change', function (e) {

var selected_country = e.target.value;

$.get('related-info?selected_country=' + selected_country, function (data) {
    console.log(data);
    $('#deptInfo').empty();
    $.each(data, function (index, subcatObj) {

        $('#info').append('<option value="' + subcatObj.id + '">' + subcatObj.name + '</option>');

    });
});

})

I see that when you are going directly to the url, you are going to : related-info?selected_country=Ireland but in javascript, you go to: related-info?country=' + selected_country but I guess you need to go to : related-info?selected_country

edited May 15 '16 at 22:18

noname

305
4
15

answered May 15 '16 at 19:13

Murlidhar Fichadia

2,589
6
43
93

Nice catch. But it still doesn't work, but now if I look in my network console the response shows the id and name of each but the dropdown is still not being populated. I also changed `console.log(data);` to `alert(data)` and the alert says [object Object] – noname May 15 '16 at 19:20
Okay that's good actually. if you get (object,object). that means you need a one more loop and it will work. let me update my answer. – Murlidhar Fichadia May 15 '16 at 19:30
Can you try now. Also, If it doesnt work can you show me the console.log screenshot. like what array you are getting and what is the name of the object. – Murlidhar Fichadia May 15 '16 at 19:39
To get the values in the object and to push it in the select method, you need to run a loop like this : for(var key in objects) { var value = objects[key]; } http://stackoverflow.com/questions/7306669/how-to-get-all-properties-values-of-a-javascript-object-without-knowing-the-key – Murlidhar Fichadia May 15 '16 at 19:43
i have updated my original post with how my code is now can you check if its right. Also in php storm it says `unresolved variable slots` referencing the `data.slots` in the `$.get` function. – noname May 15 '16 at 20:32
I have posted screen shots in the original post please take a look. Also could you give me an example of how to do the loop i tried and its not working for me – noname May 15 '16 at 20:42
slots.append(''); in this i have value.id and value.name. in that i have id and name as a field name or a key in json. My json was in a format like: "id":"23" , "name":"rutne" etc.. but in your case, i think your key and value itself are i. Syntax of "id":"value". I will update the solution. See if it works. – Murlidhar Fichadia May 15 '16 at 22:00
Also, when passing the data to view from controller. Do it this way return response()->json(array("cities" => $cities )); this way you will have a syntax for json like {"person": [ { "id": "1", "name": "Person1" }, { "id": "2", "name": "Person2" }, { "id": "3", "name": "Person3" } ]} try to populate it from this tutorial, it should work. https://developerdan77.wordpress.com/2011/10/14/dynamically-populate-a-select-element-from-json-data-with-jquery/ – Murlidhar Fichadia May 15 '16 at 22:10

Laravel 5.2 Dynamic dropdown select not populating (javascript)

2 Answers2