Dynamically Add Buttons Via JQuery Mobile

Question

I am working on a JQuery Mobile app. I am dynamically adding HTML when the page loads. A trimmed down example is shown here:

var h = "";
for (i=1; i<=5; i++) {
  h += "<div>Entry #" + i + "</div>";
  h += "<div class='ui-grid-a'>";
    h += "<div class='ui-block-a'><input type='button' value='Approve' onclick='return approveButton_Click(this);' /></div>";
    h += "<div class='ui-block-b'><input type='button' value='Reject' onclick='return rejectAbuse_Click(this);' /></div>";
  h += "</div><hr />";
});
$("#entries", "#myPage").append(h);

My HTML is appearing in the UI. However, the buttons are not rendered as a typical JQuery Mobile buttons. Instead, they look like traditional HTML buttons. How do I get my dynamically added buttons to apply the JQuery mobile styling?

Thank you

Community · Accepted Answer · 2017-05-23 12:22:41Z

7

Here's an working example out of your code: http://jsfiddle.net/Gajotres/NuCs2/

Before you can refresh the button/s it first must be initialized with .button() function. Just like this:

$("#approve"+i).button().button('refresh');
$("#reject"+i).button().button('refresh');

There's also another solution but you should use it only if you are recreating a whole page:

$("#index").trigger("pagecreate");

And here's an example for the second solution: http://jsfiddle.net/Gajotres/mpFJn/

If you want to find out more about methods of markup enhancement take a look at my other ARTICLE, let me be transparent, it is my personal blog. Or find it HERE.

edited May 23, 2017 at 12:22

CommunityBot

11 silver badge

answered Jan 12, 2013 at 17:41

Gajotres

57.3k16 gold badges106 silver badges132 bronze badges

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

1 Comment

Jasper Over a year ago

Is there a reason to both initialize and refresh the widget? Since the HTML has just been added to the DOM there shouldn't be a need to refresh anything. Or am I off base for some reason? Also, your first JSFiddle is displaying a 404 error.

SaurabhLP · Accepted Answer · 2013-01-12 13:24:00Z

0

Use "Refresh" method in Jquery mobile for dynamic appearance of Jqm UI...

http://jquerymobile.com/demos/1.2.0/docs/buttons/buttons-methods.html

answered Jan 12, 2013 at 13:24

SaurabhLP

3,6559 gold badges42 silver badges71 bronze badges

1 Comment

user70192 Over a year ago

When I try to do that, I get an error that says: Uncaught cannot call methods on button prior to initialization; attempted to call method 'refresh'

Collectives™ on Stack Overflow

Dynamically Add Buttons Via JQuery Mobile

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related