CODEWITHSUNDEEP
jqueryjquery-mobile
blue-sky
blue-sky

Reputation: 53816

Dynamically append a link button

I'm attempting to add a link button to a jquery mobile page :

http://jsfiddle.net/8JXTT/1/

The button is not being generated correctly, a link is being generated but not the button itself. Am I missing a css class ?

Code :

<div data-role="page" id="firstpage">

        <div data-role="header">
                <h1>First Page</h1>
        </div>

<div data-role="content" id="links">
        <a href="#secondpage" data-role="button">Link button</a>
</div>

        <div data-role="footer">
                <h4>Page Footer</h4>
        </div>

</div>

<div data-role="page" id="secondpage">

        <div data-role="header">
                <a href='#' class='ui-btn-left' data-icon='arrow-l' onclick="history.back(); return false">Back</a><h1>Bar</h1><a href="#firstpage">home</a>
        </div>

        <div data-role="content">
                <p>I'm first in the source order so I'm shown as the page. (this is secondpage)</p>
                <p><a href="#thirdpage">Go to third page</a></p>
        </div>

        <div data-role="footer">
                <h4>Page Footer</h4>
        </div>
</div>
​$(document).ready(function() {

$('#links').append('<a href="#secondpage" data-role="button" data-theme="c">Link Button</a>');

    });

​

Upvotes: 1

Views: 1766

Answers (2)

thecodeparadox
thecodeparadox

Reputation: 87073

Only appending a tag will not solve your problem, because jQuery mobile change its structure for styling purpose. So you have to .clone() an existing tag and change its text.

$(document).ready(function() {
    var linkButton = $('#links a').clone(true);
    linkButton.find('span.ui-btn-text').text('Link Button2');
    $('#links').append(linkButton);
});

But one note

As above code is cloning an existing a tag and if your a has id, then id duplication will happen. So change the id to class (if exists).

Demo

Thanks @omar for excellent comment

Upvotes: 4

ChrisThompson
ChrisThompson

Reputation: 2008

You have to instantiate it. The other button is getting instantiated after the page loads. Then you are adding the other link.

After you add the link you need to call the function on that link: 

$("a").button();

It would be easier if you gave it an id or class to call to differentiate it from the ones that are already set.

Edit: Instantiated is probably the wrong term. You just need to call the function to apply the styles to that new link:

$(document).ready(function() {
    $('#links').append('<a href="#secondpage" data-role="button" data-theme="a">Link Button</a>');
    $('a[data-role=button]').button();
});​

Upvotes: 1

Related Questions