CODEWITHSUNDEEP
laravellaravel-form
bisamov
bisamov

Reputation: 740

Ajax with Laravel Form Collective

{!! Form::select('jobsList[]', $list_of_jobs, null, ['id' => 'job', 'class' => 'form-control' 'multiple', 'style' => 'width: 60%; margin-top: 10px;', 'disabled'=>'disabled']) !!}

I have this form and I am trying to load $list_of_jobs asynchronously compared to what I am doing. I am kind of confused with the way LaravelCollective Form works. Can anyone point out how I would pass that? I already have ajax call that goes and grabs the $list_of_jobs from the controller

Upvotes: 0

Views: 1036

Answers (1)

Foued MOUSSI
Foued MOUSSI

Reputation: 4813

//...
{!! Form::select('jobsList[]', [], null, ['id' => 'job', 'class' => 'form-control' 'multiple', 'style' => 'width: 60%; margin-top: 10px;', 'disabled'=>'disabled']) !!}
..//

Populating your select box using JQUERY, AJAX

<script>
    $(document).ready(function() {

            //Make an Ajax request to a Laravel route
            //This will return the data that we can add to our Select element.
            $.ajax({
                url: 'YOUR URL GOES HERE',
                type: 'get',
                success: function(data){

                    //Log the data to the console so that
                    //you can get a better view of what the script is returning.
                    console.log(data);

                    $.each(data, function(key, value){
                        //Use the Option() constructor to create a new HTMLOptionElement.
                        var option = new Option(key, value);
                        //Convert the HTMLOptionElement into a JQuery object that can be used with the append method.
                        $(option).html(value);
                        //Append the option to our Select element.
                        $("#job").append(option);
                    });

                }
            });

        });
</script>

data must be an array of objects [{}, {}, {}]

[
  {'key' : 'foo', 'value' => 'bar'}, 
  {'key' : 'kosksi', 'value' => 'makrouna'}, 
  {'key' : 'lablebi', 'value' => 'kafteji'}
]

Update

If you want to set selected option(s) when Populating your select box : You need to return an extra attribute selected : true|false in each object of data collection

[
  {'key' : 'foo', 'value' : 'bar', 'selected' : false}, 
  {'key' : 'kosksi', 'value' : 'makrouna', 'selected' : false}, 
  {'key' : 'lablebi', 'value' : 'kafteji', 'selected' : true}
]

Then in success() ajax function callback 

//...
$.each(data, function(key, elem){
  //Use the Option() constructor to create a new HTMLOptionElement.            
  var option = new Option(elem.value, elem.key, false, elem.selected);
  //Convert the HTMLOptionElement into a JQuery object that can be used with the append method.
  $(option).html(elem.value);
  //Append the option to our Select element.
  $("#job").append(option);
});
//...

Upvotes: 2

Related Questions