7

I have jQuery code that refreshes a button set:

$("#myRadio").buttonset('refresh');

But I found a use case where it's being called prior to this line:

$("#myRadio").buttonset();

And then blowing up because its not initialized. I wanted to see if there is a way to determine if this buttonset() initialization has happened so I can check before calling refersh:

Something like:

if($("#myRadio").buttonsetIsInitialized())
{
    $("#myRadio").buttonset('refresh');
}

What is the correct way to do this check?

iCollect.it Ltd
  • 92,391
  • 25
  • 181
  • 202
leora
  • 188,729
  • 360
  • 878
  • 1,366
  • 1
    Related, possibly dup: http://stackoverflow.com/questions/1505270/need-to-know-if-a-jquery-ui-widget-has-been-applied-to-a-dom-object?answertab=active#tab-top – blgt Nov 24 '16 at 15:57
  • This is a common problem with plugin initialisation, but the solution is not to test if it has been initialised, but to find out why your sequencing is wrong in the first place. Please provide more of your code for a correct answer (instead of a work-around) :) – iCollect.it Ltd Nov 30 '16 at 11:33

5 Answers5

5

Working fiddle.

You could do it same way as you described in your OP by adding new method buttonsetIsInitialized() to the jQuery object :

$.fn.buttonsetIsInitialized = function () {
    return this.hasClass('ui-buttonset');
};

This method will check if the class ui-buttonset (that the instantiation add to element) is present in element class list.

if($("#myRadio").buttonsetIsInitialized()){
    $("#myRadio").buttonset('refresh');
}

Hope this helps.

Not initialized case:

$.fn.buttonsetIsInitialized = function () {
  return this.hasClass('ui-buttonset');
};

if( $("#myRadio").buttonsetIsInitialized() ){
  console.log('Refresh element');
}else{
  console.log('Not initialized');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.8.20/themes/base/jquery-ui.css" rel="stylesheet"/>


<div id="myRadio">
  <input id="first" type="radio" value="1" name="steps"/><label for="first">First</label>
  <input id="second" type="radio" value="2" name="steps"/><label for="second">Second</label>
</div>

Initialized case:

$('#myRadio').buttonset(); //Initilized

$.fn.buttonsetIsInitialized = function () {
  return this.hasClass('ui-buttonset');
};

if( $("#myRadio").buttonsetIsInitialized() ){
  console.log('refresh element');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.8.20/themes/base/jquery-ui.css" rel="stylesheet"/>

<div id="myRadio">
  <input id="first" type="radio" value="1" name="steps"/><label for="first">First</label>
  <input id="second" type="radio" value="2" name="steps"/><label for="second">Second</label>
</div>
Zakaria Acharki
  • 66,747
  • 15
  • 75
  • 101
1

You can check if your item has a data() object item named uiButtonset:

function isButtonsetInitialized(item) {
    return (typeof $(item).data('uiButtonset') == 'object');
}

and then use it as 

if(isButtonsetInitialized('#myradio')) {
  $('#myradio').buttonset('refresh');
}

check out this working example.

function isButtonsetInitialized(item) {
  return (typeof $(item).data('uiButtonset') == 'object');
}

$(function() {
  console.log(isButtonsetInitialized('#test_1'));
  setTimeout(function() {
    $('input[type="radio"]').button().buttonset();
    console.log(isButtonsetInitialized('#test_1'));
  }, 1000);
});
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link media="screen" rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
<input type="radio" name="test" id="test_1" value="1" />
<label for="test_1">FIRST</label>
<input type="radio" name="test" id="test_2" value="2" />
<label for="test_2">SECOND</label>
<input type="radio" name="test" id="test_3" value="3" />
<label for="test_3">THIRD</label>
Matteo Tassinari
  • 18,121
  • 8
  • 60
  • 81
1

I don't use jquery ui anymore - I moved to jquery mobile but I hope I can help...

Important: I assume you already know that buttonset is deprecated?

From http://api.jqueryui.com/buttonset/

This widget is deprecated, use Controlgroup instead.

If forced to continue with buttonset, then http://api.jqueryui.com/buttonset/ references class "ui-buttonset". Basically, I would seek if this class exists or does not exist somewhere around your selector. Failing that, I would examine what classes are set pre/post button set, and use that as a reference.

Sorry I cannot offer a more accurate suggested solution.

if( ! $("#myRadio").parent().find("ui-buttonset") )
{
    $("#myRadio").buttonset('refresh');
}
1

Another way is to use the instance method of the jQuery ui widget factory.

Retrieves the widget's instance object. If the element does not have an associated instance, undefined is returned.

Here is an example:

$(function() {
  $('#button-group-initiated').buttonset();

  console.log(
    "Button set one instanced? > " + $('#button-group-initiated').buttonset("instance")
  )

  console.log(
    "Button set two instanced? > " + $('#button-group-woot').buttonset("instance")
  )
});
body > div:nth-of-type(2) {
  margin-top: 20px;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div>
  <div id="button-group-initiated">
    <input type="radio" id="sizzle" name="project">
    <label for="sizzle">Sizzle</label>

    <input type="radio" id="qunit" name="project" checked="checked">
    <label for="qunit">QUnit</label>

    <input type="radio" id="color" name="project">
    <label for="color">Color</label>
  </div>
</div>

<div>
  <div id="button-group-woot">
    <input type="radio" id="sizzle2" name="project2">
    <label for="sizzle2">Sizzle</label>

    <input type="radio" id="qunit2" name="project2" checked="checked">
    <label for="qunit2">QUnit</label>

    <input type="radio" id="color2" name="project2">
    <label for="color2">Color</label>
  </div>
</div>
Nico O
  • 13,762
  • 9
  • 54
  • 69
1

I've a much elegant solution using builtin event buttonsetcreate of buttonset. Alternatively you can use callback event of the buttonset. All described here https://api.jqueryui.com/buttonset/#event-create

This event will allow you whenever the buttonset initiated, you can do whatever you want with it. No need to check again and again to see if it is init or not. Just put your code in event and be done.

fiddle

https://jsfiddle.net/ergec/wk9ew1bp/

html

<fieldset>
    <legend>Favorite jQuery Project</legend>
    <div id="radio">
        <input type="radio" id="sizzle" name="project">
        <label for="sizzle">Sizzle</label>

        <input type="radio" id="qunit" name="project" checked="checked">
        <label for="qunit">QUnit</label>

        <input type="radio" id="color" name="project">
        <label for="color">Color</label>
    </div>
</fieldset>
<button id="initbuttonset">Init</button>
<button id="checkbuttonset">Check</button>

js

var isbuttonsetinit = false;
$("#radio").on("buttonsetcreate", function(event, ui) {
    isbuttonsetinit = true;
    alert("buttonset init");
});
$("#initbuttonset").click(function() {
    $("#radio").buttonset();
});
$("#checkbuttonset").click(function() {
    alert(isbuttonsetinit);
});

js (alternative)

var isbuttonsetinit = false;
$("#initbuttonset").click(function() {
    $("#radio").buttonset({create: function( event, ui ) {
        isbuttonsetinit = true;
        alert("buttonset init");
    }});
});
$("#checkbuttonset").click(function() {
    alert(isbuttonsetinit);
});
Ergec
  • 11,608
  • 7
  • 52
  • 62