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

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: stackoverflow.com/questions/7160549/jquery-mobile-refresh-list and this one: stackoverflow.com/questions/4821293/… and there are probably more... — Th0rndike
– Th0rndike, Commented Jul 4, 2012 at 14:59
@Th0rndike - I did refresh my list. You can see the $("#list").listview("refresh") statement at the bottom of my code. — janesconference
– janesconference, Commented Jul 4, 2012 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: jsfiddle.net/fuWzX/5 — Th0rndike
– Th0rndike, Commented Jul 4, 2012 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
– janesconference, Commented Jul 4, 2012 at 15:37

maco · Accepted Answer · 2012-07-04 16:09:16Z

1

Replace:

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

With:

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

answered Jul 4, 2012 at 16:09

maco

3761 silver badge9 bronze badges

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

4 Comments

maco Over a year ago

fiddle : This way is so simply. But, lines and margins between buttons render correctly in this.

janesconference Over a year ago

This is the one. But why does that work?

Th0rndike Over a year ago

I would like to know as well...

maco Over a year ago

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 <li /> for navigation. If you don't set a line break between the <li /> and <li />, they might not be rendered correctly. So, i thought this problem was due to this bugs when i visited your jsfiddle.

Th0rndike · Accepted Answer · 2012-07-04 15:40:00Z

1

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.

answered Jul 4, 2012 at 15:40

Th0rndike

3,4363 gold badges25 silver badges43 bronze badges

Comments

Jasper · Accepted Answer · 2012-07-04 14:58:36Z

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 4, 2012 at 14:58

Jasper

76.1k14 gold badges153 silver badges148 bronze badges

3 Comments

janesconference Over a year ago

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)

Jasper Over a year ago

Make a jsfiddle to demonstrate so we can see the exact issue.

janesconference Over a year ago

Here it is: jsfiddle.net/fuWzX

Collectives™ on Stack Overflow

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

3 Answers 3

4 Comments

Comments

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

3 Comments

Linked

Related