jquery jquery-ui radio-button jquery-ui-widget-factory jquery-ui-widget

How to read an option of my custom jQuery widget?

I have prepared a simple test case of my issue:

I have a custom jQuery UI Widget representing a game table.

And I am trying to show or hide the game tables depending on the max option, which can have values of 2 or 3.

I have tried calling the following methods with no success, they are all not found:

$(this).option('max')
$(this).options('max')
$(this).table('max')

Below is my code -

$.widget('my.table', {
  options: {
    tid: NaN,
    max: NaN,
    players: []
  },
  _create: function() {
    this._hoverable(this.element);
    this.element.addClass('my-table ui-widget ui-widget-content ui-corner-all ui-widget-shadow ui-state-default');
    this.tidDiv = $('<div/>', { 'class': 'my-table-tid'}).appendTo(this.element);
    this._refresh();
    },
  _destroy: function() {
    this.tidDiv.remove();
    this.element.removeClass('my-table ui-widget ui-widget-content ui-corner-all ui-widget-shadow ui-state-default');
  },
  _setOptions: function() {
    this._superApply(arguments);
    this._refresh();
  },
  _refresh: function() {
    this.element.css('background', this.options.max === 2 ? '#39C' : '#AD8');
    this.tidDiv.text('#' + this.options.tid);
  }
});

$('<div/>', {id: 'table2' }).table({ tid: 2,  max: 2 }).appendTo($('#tablesDiv'));
$('<div/>', {id: 'table22'}).table({ tid: 22, max: 2 }).appendTo($('#tablesDiv'));
$('<div/>', {id: 'table3' }).table({ tid: 3,  max: 3 }).appendTo($('#tablesDiv'));
$('<div/>', {id: 'table13'}).table({ tid: 13, max: 3 }).appendTo($('#tablesDiv'));
$('<div/>', {id: 'table33'}).table({ tid: 30, max: 3 }).appendTo($('#tablesDiv'));

$('#twoRadio').on('change', function(ev) {
  console.log('XXX value two: ' + this.value);
  $('#tablesDiv > div').each(function(index) {
    console.log(index + ': ' + $(this).option('max'));
  });
});

$('#threeRadio').on('change', function(ev) {
  console.log('XXX value three: ' + this.value);
  $('#tablesDiv > div').each(function(index) {
    console.log(index + ': ' + $(this).options('max'));
  });
});

.my-table {
    position:           relative;
    float:              left; 
    margin:             8px;
    color:              white;
    width:              100px; 
    height:             100px; 
}

.my-table-tid {
    position:           absolute;
    font-size:          1.2em; 
    top:                20px;
    width:              100%;
    color:              white;
    text-align:         center; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/redmond/jquery-ui.min.css" rel="stylesheet" />

<div>
  <fieldset id="modeRadio">
    Show game tables for:
    <label>
      <input type="radio" name="modeRadio" id="twoRadio">
      2 players
    </label>
    <label>
      <input type="radio" name="modeRadio" id="threeRadio" checked>
      3 players
    </label>
  </fieldset>
</div>

<div id="tablesDiv"/>

Solution

max option in custom widget has been added to div as data attribute and retrieved whenever required. Hope this will solve your issue.

$.widget('my.table', {
  options: {
    tid: NaN,
    max: NaN,
    players: []
  },
  _create: function() {
    this._hoverable(this.element);
    this.element.addClass('my-table ui-widget ui-widget-content ui-corner-all ui-widget-shadow ui-state-default');
    this.tidDiv = $('<div/>', { 'class': 'my-table-tid', 'data-max' : this.options.max}).appendTo(this.element);
    this._refresh();
    },
  _destroy: function() {
    this.tidDiv.remove();
    this.element.removeClass('my-table ui-widget ui-widget-content ui-corner-all ui-widget-shadow ui-state-default');
  },
  _setOptions: function() {
    this._superApply(arguments);
    this._refresh();
  },
  _refresh: function() {
    this.element.css('background', this.options.max === 2 ? '#39C' : '#AD8');
    this.tidDiv.text('#' + this.options.tid);
  }
});

$('<div/>', {id: 'table2' }).table({ tid: 2,  max: 2 }).appendTo($('#tablesDiv'));
$('<div/>', {id: 'table22'}).table({ tid: 22, max: 2 }).appendTo($('#tablesDiv'));
$('<div/>', {id: 'table3' }).table({ tid: 3,  max: 3 }).appendTo($('#tablesDiv'));
$('<div/>', {id: 'table13'}).table({ tid: 13, max: 3 }).appendTo($('#tablesDiv'));
$('<div/>', {id: 'table33'}).table({ tid: 30, max: 3 }).appendTo($('#tablesDiv'));

$('#twoRadio').on('change', function(ev) {
  console.log('XXX value two: ' + this.value);
  $('#tablesDiv > div').each(function(index) {
    console.log(index + ': ' + $(this).find("div.my-table-tid").data('max'));
  });
});

$('#threeRadio').on('change', function(ev) {
  console.log('XXX value three: ' + this.value);
  $('#tablesDiv > div').each(function(index) {
    console.log(index + ': ' + $(this).find("div.my-table-tid").data('max'));
  });
});

.my-table {
    position:           relative;
    float:              left; 
    margin:             8px;
    color:              white;
    width:              100px; 
    height:             100px; 
}

.my-table-tid {
    position:           absolute;
    font-size:          1.2em; 
    top:                20px;
    width:              100%;
    color:              white;
    text-align:         center; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/redmond/jquery-ui.min.css" rel="stylesheet" />

<div>
  <fieldset id="modeRadio">
    Show game tables for:
    <label>
      <input type="radio" name="modeRadio" id="twoRadio">
      2 players
    </label>
    <label>
      <input type="radio" name="modeRadio" id="threeRadio" checked>
      3 players
    </label>
  </fieldset>
</div>

<div id="tablesDiv"/>