Passing a variable to the load function of Selectize jQuery plugin

Question

I'm not great with jQuery, so if this is a simple question, please forgive me. Basically, I'm using the Selectize jQuery plugin for additional functionality to a drop down box. I'm making an ajax call to get the data for the dropdown, but I need to pass a variable to the ajax call so it can be used as part of the URL. Here is the code:

    $(document).ready(function() {
    $("#dob").datepicker();

    var target_area = {!! json_encode($target_area->toArray()) !!};
    console.log(target_area.id);
    $('#skills').selectize({
            valueField: 'id',
            labelField: 'skill_name',
            searchField: 'skill_name',
            maxItems: null,
            create: false,
            options: [],
            plugins:['option_click'],
            preload: true,
            load: function(target_area, callback) {
                console.log(target_area);
                $.ajax({
                    url: 'http://rti.dev/skills/target_area/'+target_area.id,
                    type: 'GET',
                    dataType: 'json',
                    error: function() {
                        callback();
                    },
                    success: function(res) {
                        callback(res);
                    }
                });
            },
            render: {
                option: function(data) {
                    return '<div><span>'+data.skill_name+'</span>'
                        + '<div class="pull-right">'
                        + '<a target="_blank" href='+data.skill_url+'><span title="Assign" class="clickable fa fa-globe"></span></a>'
                        + '&nbsp;'
                        + '</div></div>';
                }
            }
        });
});

I'm attempting to pass the variable target_area to the ajax call so I can use the properly id in the URL. When I write the value of target_area.id to the console, I get the expected value. I just can't seem to pass it to the ajax function. Any help is appreciated.

Answer 1

$(document).ready(function() { $("#dob").datepicker();

var target_area = {!! json_encode($target_area->toArray()) !!};
console.log(target_area.id);
$('#skills').selectize({
        valueField: 'id',
        labelField: 'skill_name',
        searchField: 'skill_name',
        maxItems: null,
        create: false,
        options: [],
        plugins:['option_click'],
        preload: true,
        load: function(target_area, callback) {
            console.log(target_area);
            $.ajax({
                url: 'http://rti.dev/skills/',
                type: 'GET',
                data:{target:target_area.id},
                dataType: 'json',
                error: function() {
                    callback();
                },
                success: function(res) {
                    callback(res);
                }
            });
        },
        render: {
            option: function(data) {
                return '<div><span>'+data.skill_name+'</span>'
                    + '<div class="pull-right">'
                    + '<a target="_blank" href='+data.skill_url+'><span title="Assign" class="clickable fa fa-globe"></span></a>'
                    + '&nbsp;'
                    + '</div></div>';
            }
        }
    });

});

be aware >> data:{target:target_area.id},