jQuery Mobile, buttons don't render properly in dynamic list

Question

Possible Duplicate:
Refresh a section after adding HTML dynamically to jquery mobile

I'm trying to insert a dynamic list in my jQueryMobile page.

In my main page, I got an HTML ul element called "list": <ul id='list' data-role='listview'> </ul>

Every list element contains a grid (class="ui-grid-a"). The first div in the grid, for each element (div class="ui-block-a") contains an h2 description, while the second contains three buttons arranged horizontally, in a controlgroup (div class="ui-block-b" data-role="controlgroup" data-type="horizontal").

While the buttons render perfectly when the elements are in a static page, they render uncorrectly if I try to insert them dinamically in the page. Below, there's my code (jsfiddle here). What am I missing?

DOMElement += '<li>';
        for (i = 0 ; i < length ; i++) {
            if (typeof systemArray[i] !== 'undefined') {
                DOMElement += '<fieldset class="ui-grid-a"> <div class="ui-block-a" style="width:60%;"> <h2 id="'
                DOMElement += "system" + systemArray[i].name;
                DOMElement += '">';
                DOMElement += systemArray[i].name;
                DOMElement += '</h2>';
                DOMElement += '</div>';
                DOMElement += '<div class="ui-block-b" data-role="controlgroup" data-type="horizontal" style="width:30%;">';
                DOMElement += '<a href="#" class="deletebutton" data-icon="delete" data-role="button" id="';
                DOMElement += 'delete|' + systemArray[i].name;
                DOMElement += '" data-iconpos="notext">Cancel</a>';
                DOMElement += '<a href="#" class="modifybutton" data-icon="gear" data-role="button" id="';
                DOMElement += 'modify|' + systemArray[i].name;
                DOMElement += '" data-iconpos="notext">Modify</a>';
                DOMElement += '<a href="#" class="connectbutton" data-icon="arrow-r" data-role="button" id="';
                DOMElement += 'connect|' + systemArray[i].name;
                DOMElement += '" data-iconpos="notext">Connect</a>';
                DOMElement += '</div>'
                DOMElement += '</fieldset>';
            }   

        }
        DOMElement += '</li>';

        // Needs trigger ('create') to create the icons http://jquerymobiledictionary.pl/faq.html
        $("#list").html(DOMElement).trigger('create');
        $("#list").listview("refresh");

you're missing the refresh method, it's used to apply jqm styles to dynamically added elements. Watch this one: http://stackoverflow.com/questions/7160549/jquery-mobile-refresh-list and this one: http://stackoverflow.com/questions/4821293/jquery-mobile-listviewrefresh-not-working and there are probably more... — Th0rndike, Jul 04 '12 at 14:59
@Th0rndike - I did refresh my list. You can see the `$("#list").listview("refresh")` statement at the bottom of my code. — janesconference, Jul 04 '12 at 15:06
I see them fine, only problem is the buttons stack on themselves. If this is the problem, you can get around it with css. fiddle: http://jsfiddle.net/fuWzX/5/ — Th0rndike, Jul 04 '12 at 15:31
That works, but I have 2 questions: Why does it happen when I create the page dinamically but not with static HTML? What if I dont' want every address in .ui-block-b class to have that margin? — janesconference, Jul 04 '12 at 15:37

score 1 · Answer 1 · answered Jul 04 '12 at 15:40

Checking your fiddle i see that the problem is that the buttons in the controlgroup stack on themselves. You can get around this problem using css:

.ui-block-b a{
    margin-left:6px !important;
}

fiddle:

fiddle

I have no idea on why jqm does this, it has often happened when developing, sometimes lists stack 15px on the header. However the css workaround is not hard to do and works fine. If you don't want every ui-block-b to have that margin, you can easily put an extra class to your buttons, and add the css to it.

IMO the best way to handle this is to create a separate and specific css stylesheet with all the jqm quirks, that way you can handle and visualize them easily.

score 1 · Accepted Answer · answered Jul 04 '12 at 16:09

1

Replace:

DOMElement += '" data-iconpos="notext">.....</a>';

With:

DOMElement += '" data-iconpos="notext">.....</a>\n';

answered Jul 04 '12 at 16:09

maco

376
1
9

[fiddle](http://jsfiddle.net/fuWzX/10/) : This way is so simply. But, lines and margins between buttons render correctly in this. – maco Jul 04 '12 at 17:04
1

This is the one. But why does that work? – janesconference Jul 05 '12 at 07:52
I would like to know as well... – Th0rndike Jul 05 '12 at 07:56
1

I have been recognize this problem is something due to a bug in the rendering. Such bugs are often encountered when multiple elements arranged horizontally. For example, when arranging the floated

maco

Jul 05 '12 at 10:24

score 0 · Answer 3 · answered Jul 04 '12 at 14:58

0

Remove the data-role=button attribute from the links. When you have it, you are trying to initialize two widgets on top of each other which is creating a conflict.

answered Jul 04 '12 at 14:58

Jasper

75,717
14
151
146

That did not work. That created three separated round buttons, instead of three horizontally-stacked ones, as I wanted, and the buttons remained uncorrectly rendered (=they partially overlap) – janesconference Jul 04 '12 at 15:04
Make a jsfiddle to demonstrate so we can see the exact issue. – Jasper Jul 04 '12 at 15:08
Here it is: http://jsfiddle.net/fuWzX/ – janesconference Jul 04 '12 at 15:18

jQuery Mobile, buttons don't render properly in dynamic list

3 Answers3