CODEWITHSUNDEEP
javascriptjquery-mobilejquery-mobile-listviewjquery-mobile-button
Jonathan Smith
Jonathan Smith

Reputation: 2599

How to add 2 buttons to <li> via jquery

I am using http://jsfiddle.net/eLENj/493/ as a guide line to create 2 stacked buttons in an li element.

This is the code I am using

            '<li><div class="ui-grid-a">' +
                '<div class="ui-block-a" style="width: 75%;">' +
                    '<div data-role="fieldcontain">' +
                        '<h3>Address Details:</h3>' +
                            '<p>Address 1</p>' +
                    '</div>' +
                '</div>' +
                '<div class="ui-block-b" style="width: 25%; float: right;">' +
                    '<div data-role="controlgroup" data-type="horizontal" style="height: 20px;">' +
                        '<a href="index.html" data-role="button" data-icon="map">Map</a>' +
                        '<a href="index.html" data-role="button" data-icon="delete">Delete</a>' +
                    '</div>' + 
                '</div>' +   
            '</div>' +
            '</li>').listview('refresh');

But what I end up with are two "regular" hyperlinks which look like "MapDelete". Any ideas why the buttons are not being rendered correctly?

Upvotes: 1

Views: 927

Answers (1)

Gajotres
Gajotres

Reputation: 57309

Method listview('refresh') will style ONLY a listview.

Because buttons are not part of a listview they will be disregarded.

You will need to style them separately like this:

$('[data-role="button"]').button();

Or you can use this method on your content DIV:

$('#contentDivID').trigger('create');

If you want to find more about this topic take a look at my other blog ARTICLE describing how to enhance dynamically added jQuery Mobile content.

EDIT :

Working example: http://jsfiddle.net/Gajotres/UDBCM/

You will need to position them by yourself + find some custom map icon.

Upvotes: 2

Related Questions