json2htmled jQuery mobile button inside table td looks old, has old button inside new one after button()/refresh

Question

I'm using this transform to build a jQuery mobile button inside of a regular table 'td':

{
    "tag":"button",
    "type":"button",
    "id":"${idPrefix}-delete",
    "data-role":"button",
    "data-mini":"true",
    "data-icon":"delete",
    "html":"Delete"
}

but it renders as an old HTML button.

After I manually refresh the button, it looks like a mobile button with the icon, but the old button is "minified" inside of it.

How can this be fixed?

missing ::before?

I just compared it to a normal looking mobile button, and the problematic button is missing the ::before right before the <button> tag.

I removed all of the mobile attributes and tried to call button() later, same result.

Oh okay, I missed that ;) which version are you using? Can you post rendered html? — Omar, Mar 10 '14 at 22:44
Your answer is here http://stackoverflow.com/a/22079455/1771795 buttons and anchor tags are treated the same. No need to use any kind of enhancement. Add classes directly and that's it. — Omar, Mar 10 '14 at 23:01
@Omar Yessir! Normally, I would delete, but I think considering how fast jquery mobile's moving, this might provide some benefit to someone later. Would you mind upgrading to an answer? Thank you so very much and in advance! — , Mar 10 '14 at 23:04
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/49437/discussion-between-omar-and-gracchus) — Omar, Mar 10 '14 at 23:41

score 2 · Accepted Answer · edited Jul 20 '22 at 18:07

To speed up web app initializing and to increase jQuery Mobile's performance, the team decided to drop .buttonMarkup() widget and replace it with classes.

There is no longer data-role=button, data-mini=true, etc... All are replaced with classes as follows.

To convert a button or an anchor into a jQM button, just add ui-btn class. To add an icon with position ui-btn-icon-left, right, top, bottom. Icon's image ui-icon-bars, delete, info, etc. Mini button/anchor ui-mini. Button's theme ui-btn-a or b.

<button class="ui-btn ui-mini ui-btn-icon-right ui-icon-delete">Button</button>

JSFiddle Demo

json2htmled jQuery mobile button inside table td looks old, has old button inside new one after button()/refresh

1 Answers1

Linked