How to set the options in jQuery widget Factory with values from server side variables(JSON file)

Question

I want to set the options for widget with JSON file variable values? How can I do it plus how do I pass the json file to the client side?

The code is being copied from the jQueryUI Widget Factory

 <script>
  $(function() {

    $.widget( "custom.colorize", {

      // ***Need to pass option values over here***

   options: {
        red: 255,
        green: 0,
        blue: 0,


        change: null,
        random: null
      },


      _create: function() {
        this.element
          // add a class for theming
          .addClass( "custom-colorize" )
          // prevent double click to select text
          .disableSelection();

        this.changer = $( "<button>", {
          text: "change",
          "class": "custom-colorize-changer"
        })
        .appendTo( this.element )
        .button();


        this._on( this.changer, {

          click: "random"
        });
        this._refresh();
      },


      _refresh: function() {
        this.element.css( "background-color", "rgb(" +
          this.options.red +"," +
          this.options.green + "," +
          this.options.blue + ")"
        );


        this._trigger( "change" );
      },

      // ***And in the random function as well***

      random: function( event ) {
        var colors = {
          red: Math.floor( Math.random() * 256 ),
          green: Math.floor( Math.random() * 256 ),
          blue: Math.floor( Math.random() * 256 )
        };


        if ( this._trigger( "random", event, colors ) !== false ) {
          this.option( colors );
        }
      },

      _destroy: function() {
        // remove generated elements
        this.changer.remove();

        this.element
          .removeClass( "custom-colorize" )
          .enableSelection()
          .css( "background-color", "transparent" );
      },

      _setOptions: function() {

        this._superApply( arguments );
        this._refresh();
      },

      _setOption: function( key, value ) {

        if ( /red|green|blue/.test(key) && (value < 0 || value > 255) ) {
          return;
        }
        this._super( key, value );
      }
    });


    $( "#my-widget1" ).colorize();


    $( "#my-widget2" ).colorize({
      red: 60,
      blue: 60
    });


    $( "#my-widget3" ).colorize( {
      green: 128,
      random: function( event, ui ) {
        return ui.green > 128;
      }
    });


    $( "#disable" ).click(function() {
      if ( $( ":custom-colorize" ).colorize( "option", "disabled" ) ) {
        $( ":custom-colorize" ).colorize( "enable" );
      } else {
        $( ":custom-colorize" ).colorize( "disable" );
      }
    });


    $( "#black" ).click( function() {
      $( ":custom-colorize" ).colorize( "option", {
        red: 0,
        green: 0,
        blue: 0
      });
    });
  });
  </script>
</head>

Answer 1

One solution will be to use the _getCreateOptions function to achieve that.

Have a look in the jquery-ui widget factory code to see where this _getCreateOptions function is called:

_createWidget: function( options, element ) {

    [...]

    this.options = $.widget.extend( {},
        this.options,
        this._getCreateOptions(), // function you need to implement
        options );

    [...]

    this._create();
    this._trigger( "create", null, this._getCreateEventData() );
    this._init();

}

As you can see your widget options will be merged with the value returned by your _getCreateOptions function, and this will be done only at widget creation time and before the call to your _create and _init functions.

In your case your _getCreateOptions can perform an ajax call to retrieve your json data from server side. Something like :

_getCreateOptions: function() {
    return $.get({
        url: 'http://path-to-your-json-data',
        dataType: 'json'
    })
    .done(function(jsonData) {
        return jsonData;
    })
    .fail(function() {
        // ...
    });
}

Another solution, could be :

• loading your remote data before widget initialization (through ajax call or other method) in a colorizeOptions js var for example.
• pass this data to your widget $('selector').colorize(colorizeOptions) at creation time