Difficulty loading data via json call

[mzadig]

Greg,
I'm new to SelectBoxIt, but it looks great.
I am trying to load the box with remote data via a $ajax() call to my local server. I don't believe I have the call correct.
My code is as follows:

$(function() {

  $("select").selectBoxIt({
        populate: { 'data' : $.ajax
                       ({
                           type: "GET",
                           url: "home/getData",
                           data: "",              
                           cache: false,
                           success: function (html) {
                               d = html;
                               alert(d);

                           },
                           error: function (jqXHR, textStatus, errorThrown) {
                               alert("ajax error" + errorThrown);
                           }
                       }
                       )
                   }
    });

});

The call is returning the following structure which appears in the alert(d) display:

[
{ 'text': '0:', 'value': 'item_0' },
{ 'text': '1:', 'value': 'item_1' },
{ 'text': '2:', 'value': 'item_2' },
{ 'text': '3:', 'value': 'item_3' },
{ 'text': '4:', 'value': 'item_4' },
{ 'text': '5:', 'value': 'item_5' },
{ 'text': '6:', 'value': 'item_6' },
{ 'text': '7:', 'value': 'item_7' },
{ 'text': '8:', 'value': 'item_8' },
{ 'text': '9:', 'value': 'item_9' }
]

Any help or an examlpe of loading via a $ajax() call would be greatly appreciated. I need to be able to make dynamic loads of the options list throughout my code.

If I populate the json data manually everything works as expected.

thanks,

mike

[gfranko]

The jQuery $.ajax method returns a promise object unfortunately, and the populate() method currently does not support passing a promise. I will work on supporting jQuery ajax methods in the next release and will hopefully have something for you to try tonight or tomorrow!

If you don't want to wait for me to support passing a jQuery $.ajax method, then you still have a few options:

Option 1: Make the ajax call before you call the selectBoxIt() method and then pass the populate() option your JSON data.

Option 2: Call the selectBoxIt() method and then do your ajax request after to dynamically populate your selectBoxIt drop down using the add() method. Here are the docs for that: http://gregfranko.com/jquery.selectBoxIt.js/#DynamicallyAddOptions

[mzadig]

Greg,
Thank you. I will try your suggestions today. I look forward to trying your code enhancement .

[gfranko]

I just released SelectBoxIt v3.6.0, which added deferred/promise object support to the populate() and add() methods. Here is an jQuery ajax example (I will soon have this example on the SelectBoxIt website):

 // Calls the selectBoxIt method on your HTML select box
  $("select").selectBoxIt({
    defaultText: "Greg Franko Github Repos",
    // Populates the drop down using a jQuery deferred object
    populate: function() {
        var deferred = $.Deferred(),
            arr = [],
            x = -1;
        $.ajax({
            url: 'https://api.github.com/users/gfranko/repos'
        }).done(function(data) {
            while(++x < data.length) {
                arr.push(data[x].name);
            }
            deferred.resolve(arr);
        });
        return deferred;
    }

  });

[mzadig]

Thanks!

Sent via the Samsung Galaxy S™ II Skyrocket™, an AT&T 4G LTE smartphone.Greg Franko [email protected] wrote:I just released SelectBoxIt v3.6.0, which added deferred/promise object support to the populate() and add() methods. Here is an jQuery ajax example (I will soon have this example on the SelectBoxIt website):

// Calls the selectBoxIt method on your HTML select box
$("select").selectBoxIt({
defaultText: "Greg Franko Github Repos",
// Populates the drop down using a jQuery deferred object
populate: function() {
var deferred = $.Deferred(),
arr = [],
x = -1;
$.ajax({
url: 'https://api.github.com/users/gfranko/repos'
}).done(function(data) {
while(++x < data.length) {
arr.push(data[x].name);
}
deferred.resolve(arr);
});
return deferred;
}

});
—
Reply to this email directly or view it on GitHub.

[gfranko]

No problem! Also, you can see the example here: http://gregfranko.com/jquery.selectBoxIt.js/#jQueryDeferredObject

[SentencedToCode]

I am able to initially populate the drop down menu in my SelectBoxIt from a JSON object useing "deferred.resolve(arr). But, when I try to update the drop down menu from another JSON object, the original options do not change. Do I need to ".refresh" at some point? I can remove the drop down menu items, but then I cannot populate them again. The only way I can change the drop down menu is remove the data options, and loop through the JSON object with a "listbox.add("option string'), one by one. My drop downs have over 1000 records, and this takes time. Please help.