Reference UIkit-Components in Javascript code

Question

How do I reference a UIkit Component in Javascript? I made a small example of my problem:

This is the HTML:

    <div class="uk-panel">
      <div id="myRadios" data-uk-button-radio>
        <button class="uk-button">Option1</button>
        <button class="uk-button">Option2</button>
        <button class="uk-button">Option3</button>
      </div>
    </div>
    <br/>
    <button class="uk-button" onclick="check()">Check Selection</button>

And here is the Javascript part:

function check() {
  var selected = $('#myRadios').getSelected();
  var selected2 = $('#myRadios').uk('buttonRadio').getSelected();
  // getSelected() is not defined in both!
}

I also created this as a plunker: http://plnkr.co/edit/U4ELL78YSsBbBHiwGnOQ

Thanks for your help!

score 0 · Accepted Answer · answered Oct 14 '15 at 19:27

0

UIkit seems to only toggle buttons(I don't see any api inside docs), and adds class uk-active to selected buttons. So maybe something like this:

$('#myRadios button').on('click', function() {
     var selectedValue = $(this).text();
     console.log(selectedValue);
});

answered Oct 14 '15 at 19:27

cssBlaster21895

3,670
20
33

1

Thanks for you answer. I thought of this, but this was more like a workaround. UIKit itself has this code block, but I don't know how get access to this on the specific element: `UI.component('buttonRadio', { defaults: { "target": ".uk-button" }, boot: function() { }, init: function() { }, getSelected: function() { return this.find(".uk-active"); } });` – Fabian Lang Oct 15 '15 at 06:40
I also found out that when I initialize the button in js myself and not in html like `UIkit.buttonRadio(UIkit.$('#myRadios'))` then I get a reference of the element with the getSelected function. I want this reference on an already initialized element. – Fabian Lang Oct 15 '15 at 06:49
1

Only thing Ive found `var button = UIkit.buttonRadio('#myRadios'); console.log(button.getSelected());` I think it's the most resonable way :) – cssBlaster21895 Oct 15 '15 at 07:12
This seems to work. When I first tested this the click listener was attached multiple times, but I can't reproduce this error atm. – Fabian Lang Oct 15 '15 at 08:19
I tested in my (real) project and it worked. Thank you very much! – Fabian Lang Oct 15 '15 at 08:29

Reference UIkit-Components in Javascript code

1 Answers1