Show data from an array to a dynamic selectbox (jQuery - AJAX) in Laravel 4

Question

I'm trying to implement a dynamic select box using jQuery and I have some problems... I have a 'route' to access to my DB and get the data of the new select box:

Route::get('contenidos/comboasign/{asignatura_id}', array('uses' => 'ContenidoController@comboAsignBloque'));

My Controller:

public function comboAsignBloque($asignatura_id)
{
    if(Request::ajax()){
        $bloques = DB::table('bloques')->where('asignatura_id','=', $asignatura_id)->orderBy('nombre', 'asc')->lists('id','nombre');
        return json_encode(array("bloques" => $bloques));
    }
}

And, in my View I have the form and this js:

$(document).ready(function(){
     // Obtenemos los datos del selecbox1

     $("#select_asignatura").change(function(e){
        e.preventDefault();

            var asignatura_id = $("#select_asignatura option:selected").val();

            // AJAX request
            $.get('comboasign/'+asignatura_id, function(data){
                // #select_bloque is the select where I want to show my new options
                var select = $('#select_bloque');

                select.empty();

                // select.html(data);

                var optionsarray = data.split(',');

                var seloption = " ";

                $.each(optionsarray, function(i){

                    seloption += '<option value="' + optionsarray[i] + '">' + optionsarray[i] + '</option>';
                    select.append(seloption);
                });

                  });
        });     
     });

I need something in my 'js' to show the data in my new 'selectbox_bloque', or maybe I'm not doing good in my Controller... If I set my data in a normal , I get something like this:

 {"bloques":{"bloque 1 mate":1,"Bloque 2 de Mate":6}}

I need to put this array into my select box and I can't find out how... I really appreciate any help.

score 0 · Answer 1 · answered Jul 16 '14 at 09:07

0

First, use the browsers debugger to check that you have actually returned some data from the $.get.... call.

As you are returning JSON data you can use

$.getJSON('comboasign/'+asignatura_id, function(data){

this will automatically convert the returned JSON string (data) to a javascript datatype, an array in your case as you converted a PHP array to JSON data using

json_encode(array("bloques" => $bloques));

Also you could make the returned data easier to access by doing just

json_encode( $bloques );

answered Jul 16 '14 at 09:07

RiggsFolly

93,638
21
103
149

I have returned some data, as I wrote in my question, but the point is that I don't know how to show it properly. I've tried your '$.getJSON()' but I don't get any response... :( – JaviZu Jul 16 '14 at 09:14
Look at http://stackoverflow.com/questions/20236611/how-to-remove-and-replace-select-options-using-jquery – RiggsFolly Jul 16 '14 at 09:21
Thank you, but my problem is that I don't know how to set the 'value'(id) and the 'text'(nombre) in every – JaviZu Jul 16 '14 at 09:35
I got it... My problem was in my Controller. I had to create an array (using a foreach) like this: $bloque_id = DB::table('bloques')->where('asignatura_id','=', $asignatura_id)->orderBy('nombre', 'asc')->lists('id','nombre'); foreach ($bloque_id as $key => $value) { $resources[] = array("nombre" => $key, "id" => $value); } $resources_JSON_array = json_encode($resources); return $resources_JSON_array; – JaviZu Jul 16 '14 at 11:11
Then, in my 'js' I call to every value and text properly: $.each(myData, function(i){ seloption += ''; select.append(seloption); }); The only thing I need to fix now is that I'm obtaining some objects duplicated... :( – JaviZu Jul 16 '14 at 11:12

score 0 · Accepted Answer · answered Jul 17 '14 at 12:18

You object duplication is because of this

var seloption = " ";

$.each(optionsarray, function(i){

    seloption += '<option value="' + optionsarray[i] + '">' + optionsarray[i] + '</option>';
    select.append(seloption);

Change it to

    var seloption = " ";

    $.each(optionsarray, function(i){

        seloption += '<option value="' + optionsarray[i] + '">' + optionsarray[i] + '</option>';
    )};
    select.append(seloption);

Show data from an array to a dynamic selectbox (jQuery - AJAX) in Laravel 4

2 Answers2