Search jQuery

jQuery Forum

First item after divider does not display properly

in jQuery Mobile • 7 years ago

I generate a list with dividers and the first item after every divider does not show up properly, no text, but an unusual link icon.

here an example

<head>
<title>Listview test-</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body><ul data-role="listview" data-dividertheme="b">
<li data-role='list-divider'>Ernährung</li><a name="ERN&AUML;HRUNG"</a>
<li><br><a href=tat_regel.php?ereignis=Blattpflanzen&ereignisid=163>Blattpflanzen</a></li>
<li><br><a href=tat_regel.php?ereignis=Kohlenhydrate&ereignisid=168>Kohlenhydrate</a></li>
<li data-role='list-divider'>Haushalt</li><a name="HAUSHALT"</a>
<li><br><a href=tat_regel.php?ereignis=Blumen+Giessen&ereignisid=84>Blumen Giessen</a></li>
<li><br><a href=tat_regel.php?ereignis=Fellpflege&ereignisid=263>Fellpflege</a></li>
<li><br><a href=tat_regel.php?ereignis=Kuchen+Backen&ereignisid=126>Kuchen Backen</a></li>
<li><br>
</ul>
</body>
</html>

looks like this (desktop )

Any ideas whats wrong? Thanx!

Replies(5)

watusiware

Re: First item after divider does not display properly

7 years ago

Your HTML is invalid. The only immediate child allowed for an <ol> or <ul> is <li> . You've put an <a> tag where it doesn't belong:

<ul data-role="listview" data-dividertheme="b">
<li data-role='list-divider'>Ernährung</li>
<a name="ERN&AUML;HRUNG"</a>
<li><br><a href=tat_regel.php?ereignis=Blattpflanzen&ereignisid=163>Blattpflanzen</a></li>

Besides that, you are using a way-obsolete version of jQuery Mobile. Current is 1.4.5, and you are using 1.0. You should have no expectation that it will work correctly with current browsers.

Rainer Ka..

Re: First item after divider does not display properly

7 years ago

you were right, I updated to 1.4.5 which did not change anything. But deleting the invalidly placed bookmark solved the problem :

Question now: where and how might I place the bookmark to find the divider?

watusiware

Re: First item after divider does not display properly

7 years ago

Question now: where and how might I place the bookmark to find the divider?

I'm afraid that jQuery Mobile doesn't support navigation to anchors (as you say "bookmark"), because it uses the hash (# part of URL) for Ajax navigation between pages.

I see you've used name= rather than i d= . Not only is name= rather obsolete, but it also doesn't get around the fact that JQM doesn't support navigation to anchors.

Search the forum for solutions - the problem has been visited many times. I think there is a plugin, but probably not updated for current JQM version.

I typically use iScroll on my pages, and it has a function to scroll to any selector, so I use CSS classes instead of anchors, and a bit of JS to catch a click event on the button, etc. (You can't just use an href , unless you go with some plugin solution.)

Rainer Ka..