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"/>
CodePudding user response:
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"/>