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');                                                                                                 

Answer 1

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