Force a refresh on a Jquery Mobile controlgroup button on small screen display

Question

I have a Jquery Mobile controlgroup with two buttons:

<div data-role="controlgroup" data-type="horizontal" class="headerMenu iconposSwitcher">
  <a href="#" data-role="button" data-icon="barcode" data-iconpos="left" class="EANView">EAN</a>
  <a href="#" data-role="button" data-icon="style" data-iconpos="left" class="styleView">Style</a>
</div>

On larger screens (PC, iPad) I want the text to show ~ data-iconpos="left". On smaller screens (Mobile, Smartphone) there is little space, so I don't want to display the text ~ data-iconpos="notext"

I can use the "refresh" function on select-menus. Is there a similar way to refresh controlgroups or button elements?

I tried it like this, changes iconpos, but does not rebuild the button.

    if ($('body').width() < 275)
      {
      $(".iconposSwitcher a").attr('data-iconpos','notext');
      $('.headerMenu').controlgroup('refresh', true);
      }

Thanks for hints & Rgs

EDIT:

This works:

$(".iconposSwitcher a").removeClass('ui-btn-icon-left').addClass('ui-btn-icon-notext');

Easier than thought...

EDIT:

For div elements (controlgroup with input):

$(".iconposSwitcher-div a").attr('data-iconpos','notext').removeClass('ui-btn-icon-left ui-btn-icon-right').addClass('ui-btn-icon-notext');

I always come back to my questions... – frequent Jun 28 '12 at 09:45 — frequent, Jun 28 '12 at 09:45

score 4 · Answer 1 · answered Sep 12 '12 at 20:08

4

maybe its too late but for those who come here with same question:
You can use .trigger('create') on any Element to trigger 'Create' event to do JQM magic on elements.

answered Sep 12 '12 at 20:08

MeeDNite

159
3
13

2

have you tried? Controlgroups are pretty tricky. See [here](https://github.com/jquery/jquery-mobile/issues/4773) – frequent Sep 12 '12 at 20:46

score 3 · Answer 2 · edited Sep 24 '12 at 16:48

3

I've solved it this way:

$button = [YOUR CONTROLGROUP DIV]

$button.find('a').button();

$button.controlgroup();

edited Sep 24 '12 at 16:48

andrewsi

10,807
132
35
51

answered Sep 24 '12 at 14:57

Holger

31
1

score 2 · Accepted Answer · edited May 23 '17 at 12:26

2

For buttons, use the buttonMarkup() method instead of controlgroup()

In general, I prefer the usage of the page() method, see this post

Jquery Mobile: updating a form more than once

edited May 23 '17 at 12:26

Community

1
1

answered Jun 10 '11 at 08:23

Christoph Baudson

1,071
11
12

This doesn't work... $(".iconposSwitcher a").attr('data-iconpos','notext').page(); I prefer page() though. – frequent Jun 10 '11 at 08:58

score 1 · Answer 4 · answered Nov 27 '13 at 17:24

1

What works for me is calling controlgroup() twice; once to initialize, next to refresh, eg:

// refresh group
$('#checkboxes').controlgroup().controlgroup('refresh');

answered Nov 27 '13 at 17:24

user2795195

21
1

Force a refresh on a Jquery Mobile controlgroup button on small screen display

4 Answers4