Jquery Mobile - nested list items using same href

Question

I have a list I am creating dynamically. The content looks good BUT each link points to the same page link:

I start with an empty list:

<div data-role="content" class="ui-content" role="main">
    <ul data-role="listview" data-theme="b" data-inset="true" id="profile2" class="ui-listview ui-listview-inset ui-corner-all ui-shadow">
    </ul>        
</div>

I use $('#profile2').append to build the list and use $('#profile2').listview("refresh"); to refresh the list after each new link is inserted.

Here is a sample of code after the list has been generated:

<div data-role="content" class="ui-content" role="main">
    <ul data-role="listview" data-theme="b" data-inset="true" id="profile2" class="ui-listview ui-listview-inset ui-corner-all ui-shadow">
        <li><div class="ui-btn-inner ui-li">
            <div class="ui-btn-text"><a href="#/demo?a=53&amp;b=-7&amp;ui-page=profile2-0" class="ui-link-inherit">
                <h3 class="ui-li-heading">Headin1</h3>
                <p class="ui-li-desc">Content 1</p></a><
            </div>
            <span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span></div>
        </li>
        <li><div class="ui-btn-inner ui-li">
            <div class="ui-btn-text"><a href="#/demo?a=53&amp;b=-7&amp;ui-page=profile2-0" class="ui-link-inherit">
                <h3 class="ui-li-heading">Headin2</h3>
                <p class="ui-li-desc">Content 2</p></a><
            </div>
            <span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span></div>
        </li>
    </ul>        
</div>

NOTE the href for both links refers to profile2-0

Interestingly, the pages generated for the child links have the same tabindex (0), as well as the same data-url. This is the code for both pages:

<div data-role="page" data-url="/demo?a=53&amp;b=-7&amp;ui-page=profile2-0" tabindex="0" class="ui-page ui-body-a">
   CONTENT.....
</div>

I use listview("refresh") to refresh the styling, should this also take care of ensuring the page items are uniquely labeled?

Of course, this should be taken care of by JQM, but I cannot see a way to programmatically set a sub page link when creating the list item to ensure the links are unique.

Are you saying there is an error? (Or is this just a suggestion?) Can you point out where the error is to help move this forward? — user1906253
– user1906253, Commented Dec 16, 2012 at 8:59
you did not provide the code which builds the list... therefore this is only an assumption that the error might be there... you might want to provide that code, too? and concerning your question should this also take care of ensuring the page items are uniquely labeled? no, this needs to be done by your code... and listview("refresh") is only necessary once at the end after building the list — Taifun
– Taifun, Commented Dec 16, 2012 at 14:21
why would you assume JQM should fix or change your href links? — shanabus
– shanabus, Commented Dec 19, 2012 at 14:27

Réjôme · Accepted Answer · 2013-02-07 13:58:10Z

1

As it has already been pointed out by Taifun, you probably have a problem in the code generating the list items (that you did not provide).

I tried this code, and did not face any issue:

<script>
        $(document).on("pageshow", function(){
            for(i=0; i<10; i++) {
                $("#profile2").append('<li><a href="/test/' + i + '">test ' + i + '</a></li>');
            }
            $("#profile2").listview('refresh');
        });
    </script>

Hope that helps.

answered Feb 7, 2013 at 13:58

Réjôme

1,4833 gold badges16 silver badges25 bronze badges

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

Collectives™ on Stack Overflow

Jquery Mobile - nested list items using same href

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related