How do I create a jQuery Mobile button from javascript?

Question

Is there a way to make jQuery Mobile render a javascript-generated link as a button widget, like it does automatically when loading the page?

I have javascript like this to create the link dynamically:

var ws=document.getElementById('workspace'); // empty <div id="workspace"></div>
ws.innerHTML='<a id="myb" href="foo.php" data-role="button">baz</a>';

And of course it only generates a normal link instead of a button, so my question is how do I make jQueryMobile create the button dynamically, as it would have done if the same <a id="myb" href="foo.php" data-role="button">baz</a> had appeared in the page from the beginning?

EDIT :

A script like this:

$('#tagspace').html('<a id="myb" data-inline="true" data-ajax="false"
                    href="boo.php" data-role="button">baz</a>')
              .button()
              .click(function() { window.location.href=this.href;});

Is an improvement. It does result in a button (full page width), and that is sensitive to clicks outside of the text of the label. However, this doesn't seem to be mapped to the element containing the intended link "destination".

The DOM results of this:

<div aria-disabled="false" class="ui-btn ui-shadow ui-btn-corner-all ui-fullsize
                                      ui-btn-block ui-btn-up-c" data-mini="false" data-inline="false" data-theme="c" data-iconpos="" data-icon="" data-wrapperels="span" data-iconshadow="true" data-shadow="true" data-corners="true"> <span class="ui-btn-inner ui-btn-corner-all">
        <span class="ui-btn-text">baz</span>
</span>
    <div aria-disabled="false" class="ui-btn-hidden" id="tagspace"> <a id="myb" data-inline="true" data-ajax="false" href="boo.php" data-role="button">baz</a>

    </div>
</div>

So, it is still not the same kind of button.

@al0neevenings, how do you suggest that I do it with jquery mobile? — MattBianco
– MattBianco, Commented Aug 16, 2012 at 11:07
@FrédéricHamidi, I don't know what this is, but it doesn't seem to have a href property, since a click on the sensitive part of the button leads to "undefined", which is not the intended page. Of course I could set it to the real URL instead of this.href in the click function, but it's still not the same kind of button. Too big, and not clickable where the text is. — MattBianco
– MattBianco, Commented Aug 17, 2012 at 7:20

Frédéric Hamidi · Accepted Answer · 2012-08-16 08:59:08Z

1

You can create a button widget by wrapping your element in a jQuery object and calling the button() method.

$("#workspace").html("<a id='myb' href='foo.php' data-role='button'>baz</a>")
               .button();

Update: The button widget prevents the default behavior of the link, so you will have to add a click handler if you want that behavior back:

$("#workspace").html("<a id='myb' href='foo.php' data-role='button'>baz</a>")
               .button()
               .click(function() {
                   window.location.href = this.href;
               });

edited Aug 16, 2012 at 8:59

answered Aug 16, 2012 at 8:33

Frédéric Hamidi

264k42 gold badges497 silver badges486 bronze badges

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

4 Comments

MattBianco Over a year ago

Thanks! Exactly the answer I was looking for! BTW, is there a reason you use single quotes around the attribute values and not the other way around?

Frédéric Hamidi Over a year ago

@Matt, that's personal preference. The two languages I use the most both often have single quotes inside sentences, so I prefer double quotes around strings. You can safely disregard that :)

Frédéric Hamidi Over a year ago

Ah, that's because links turned into buttons do not navigate to their original href. This is by design. I'll update my answer with a workaround.

MattBianco Over a year ago

Accepting this, because it's the only answer and close enough.

Collectives™ on Stack Overflow

How do I create a jQuery Mobile button from javascript?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related