Geek Answers Handbook

When using the jqueryUI button set, anyway, to determine if it was initialized?

I have jQuery code that updates a set of buttons:

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

But I found a use case when it is called before this line:

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

And then it explodes because it is not initialized. I wanted to see if there was a way to determine if this initialization was buttonet (), so I can check before calling referh:

Sort of:

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

What is the correct way to do this check?

+6
source share
5 answers

Working violin .

You can do this the same way as described in the OP by adding a new buttonsetIsInitialized() method to the jQuery object:

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

This method checks if the ui-buttonset (which adds an add item to the item) is present in the list of item classes.

 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>
+4
source

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

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

and then use it like

 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>
+1
source

I no longer use jquery ui - I moved to jquery mobile, but hope I can help ...

Important: Suppose you already know that the button set is out of date?

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

This widget is deprecated, use Controlgroup instead .

If the buttonset is forced to continue, then http://api.jqueryui.com/buttonset/ refers to the "ui-buttonset" class. Basically, I would like if this class exists or does not exist somewhere around your selector. Otherwise, I would study what classes are given to install pre / post, and use this as a reference.

Sorry, I can’t offer a more accurate proposed solution.

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

Another way is to use the jQuery ui factory widget.

Retrieves the widget instance object. If the item 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>
+1
source

I have a very elegant solution using the buttonsetcreate button set built-in event. Alternatively, you can use the button set callback event. All described here https://api.jqueryui.com/buttonset/#event-create

This event will allow you whenever a set of buttons is triggered, you can do whatever you want with it. It is not necessary to check again and again whether this is init or not. Just enter the event code and do it.

the violin

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); });
+1
source

More articles:


All Articles