Question

I’m currently writing a JQuery plugin that loads colors from a JSON web service into a drop down list.

The drop down list background-color changes according to the selected value. For the most part it is working. on any regular change it works as expected, the problem I am having is on the initial page load I am using triggerHandler("change"); and it triggers but I seem to be getting an undefined error on the selected value from the drop down list on page load so it doesn’t trigger the color change on the drop down list

My code is:

$.fn.bindColorsList = function (options) {

    var defColor = options.defaultColor;
    var svcUrl = options.svcurl;
    //var f_target = options.filterTarget;
    var $this = this;

    $.ajax({
        url: options.svcurl,
        dataType: 'json',
        /*data: { filter: src_filt },*/
        success: function (fonts) { fillcolors(fonts, $this) },
        error: function () { appendError(f_target, "colors failed to load from server") }


    });


    this.on("change", function (event) {
        log($(event.target).attr("id") + " change detected");

        //change ddl dropdown color to reflect selected item ;
        var hcolor = $this.find('option:selected').attr("name");


        $this.attr("style", "background-color:" + hcolor);


    });

function fillcolors(colors, target) {

    $(target).empty();
    $.each(colors, function (i, color) {
        $(target).append("<option name='"+color.HexValue+"' value='" + color.Name + "' style='background-color:"+color.HexValue+"'>"+color.Name+"</option>");
    });
};



//in a seperate file
    $(document).ready(function () {

        $("#dd-font-color").bindColorsList({ svcurl: "/home/colors"});
        $("#dd-back-color").bindColorsList({ svcurl: "/home/colors" });




    });

Answer 1

You are doing an AJAX request to populate your dropdown which, by the way, is an asynchronous one. In this case you need to trigger the event in the success callback of the AJAX request.

var $this = this;

// Bind the onchange event
$this.on("change", function (event) {
  ..
});

// Populate using AJAX
$.ajax({
  ...
  success: function (fonts) {
    // Populate the values
    fillcolors(fonts, $this);
    // Trigger the event
    $this.trigger("change");
  },
  ...
});

That’s it.