Adding button to controlgroup in jquery mobile header

Question

I am trying to add two buttons to controlgroup dynamically. The controlgroup is contained within the header. I want the two buttons to be side by side on the right side of header.

But the buttons are getting added in vertical way and also there is a rectangular box around the buttons. How can I do it in correct manner?

Link: http://jsfiddle.net/saQFx/1/

$('div[data-role="controlgroup"]').append('<a href="#" data-role="button" data-icon="bars" data-iconpos="notext" id="open-panel"></a>');

$('div[data-role="controlgroup"]').append('<a href="#" data-role="button" data-icon="bars" data-iconpos="notext" id="open-panel2"></a>');

$('#open-panel').button();
$('#open-panel2').button();

krishwader · Accepted Answer · 2013-06-11 15:31:50Z

1

For some reason, your setting of data-type="horizontal" is getting erased when you try to dynamically push a tags into the controlgroup. SO i tried setting those values again through code like this :

$('#ctrl').controlgroup({
  type: "horizontal",
  corners: false
});

Then, trigger a create on the page:

$("#frontPage").trigger('create');

This seems to work. I'll look more into this and get back to you. But for now, here's a working demo : http://jsfiddle.net/saQFx/3/

Changes made

removed the data-role from html and initialized controlgroup from JS
changed append() to html()
added trigger('create'); at the end.
removed button(). This ain't needed anymore. If you're doing a lot of changes together, like you're doing now,its wiser to call create on page.

An alternative though would be to inject the entire control group with all its contents through javascript, then run a trigger('create') on your page.

EDIT

Unfortunately, when you init controlgroup through the JS way, the rounded corners aren't kicking in by themselves. Guess you have to add ui-corner-all class by yourself to this, I just didnt want to get into that. That's a whole new level of mess. SO, instead of that, you could try the second method I mentioned:

injecting the entire control structure through JS itself
trigger the create method of page in the end.

Here's a demo : http://jsfiddle.net/hungerpain/saQFx/8/

Hope this helps!

edited Jun 11, 2013 at 15:31

answered Jun 11, 2013 at 11:32

krishwader

11.4k1 gold badge36 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

dejavu Over a year ago

Thanks for the solution. But why is there a square border around the button? When you add a button outside the controlgroup, there is no border around the button. See this: jsfiddle.net/saQFx/6

dejavu Over a year ago

@passionateCoder Its looking fine but not exactly like the button outside the controlgroup. I think controlgroup adds the borders.

krishwader Over a year ago

Yes it does. you will never get a perfect circle if your using controlgroup because the two elements combine in the middle

krishwader Over a year ago

@AndroidDecoded please mark this as the correct answer if you think this has helped you. :-)

dejavu Over a year ago

@passionateCoder See the new jQuery doc explaining dynamic control group uglymongrel.com/jqm/touch/demos/examples/controlgroups/…

Collectives™ on Stack Overflow

Adding button to controlgroup in jquery mobile header

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related