I have this kind of markup (basically a main ul with few nested ul)
<ul id="listaRecetas" data-role="listview" data-add-back-btn="true">
<li title ="people">
<a href="index.php?task=browse_posts&catid=47">
people
</a>
<ul class="sn">
</ul>
</li>
<li title ="Art">
<a href="index.php?task=browse_posts&catid=14">
Art
</a>
<ul class="sn">
<li >
<img src="/files/uploads/1_art_alan_hydes.jpg" style="float:left;height:39px;width:39px;" />
<a href="mobilePage.php?task=view_post&blogid=56" >
Alan Hyde
<span>
</span>
</a>
</li>
<li >
<div style="float:left;width:39px; height:37px">
</div>
<a href="mobilePage.php?task=view_post&blogid=48" >
Arturo Rhodes
<span>
</span>
</a>
</li>
<li >
<div style="float:left;width:39px; height:37px">
</div>
<a href="mobilePage.php?task=view_post&blogid=66" >
Bob Bradbury
<span>
</span>
</a>
</li>
<li >
<div style="float:left;width:39px; height:37px">
</div>
<a href="mobilePage.php?task=view_post&blogid=65" >
Cecily Sheridan
<span>
</span>
</a>
</li>
<li >
<img src="/files/uploads/davidgoodehill.png" style="float:left;height:39px;width:39px;" />
<a href="mobilePage.php?task=view_post&blogid=25" >
David Goode Hill
<span>
</span>
</a>
</li>
<li >
<div style="float:left;width:39px; height:37px">
</div>
<a href="mobilePage.php?task=view_post&blogid=67" >
George Sheridan
<span>
</span>
</a>
</li>
<li >
<div style="float:left;width:39px; height:37px">
</div>
<a href="mobilePage.php?task=view_post&blogid=62" >
Josh Burbank
<span>
</span>
</a>
</li>
<li >
<div style="float:left;width:39px; height:37px">
</div>
<a href="mobilePage.php?task=view_post&blogid=57" >
Leila Ward
<span>
</span>
</a>
</li>
<li >
<img src="/files/uploads/3-600x600.jpg" style="float:left;height:39px;width:39px;" />
<a href="mobilePage.php?task=view_post&blogid=58" >
Letitia Bermejo
<span>
</span>
</a>
</li>
<li >
<div style="float:left;width:39px; height:37px">
</div>
<a href="mobilePage.php?task=view_post&blogid=59" >
Miquel Oliver
<span>
</span>
</a>
</li>
<li >
<img src="/files/uploads/portraits-robert-graves.jpg" style="float:left;height:39px;width:39px;" />
<a href="mobilePage.php?task=view_post&blogid=19" >
Robert Graves
<span>
</span>
</a>
</li>
<li >
<img src="/files/uploads/1_artist_stephanie_moog.jpg" style="float:left;height:39px;width:39px;" />
<a href="mobilePage.php?task=view_post&blogid=60" >
Stephanie Moog
<span>
</span>
</a>
</li>
<li >
<div style="float:left;width:39px; height:37px">
</div>
<a href="mobilePage.php?task=view_post&blogid=61" >
Sunna Wathen
<span>
</span>
</a>
</li>
<li >
<img src="/files/uploads/1_art_david_templeton.jpg" style="float:left;height:39px;width:39px;" />
<a href="mobilePage.php?task=view_post&blogid=148" >
David Templeton
<span>
</span>
</a>
</li>
<li >
<img src="/files/uploads/camouflage-1985-1987.jpg" style="float:left;height:39px;width:39px;" />
<a href="mobilePage.php?task=view_post&blogid=13" >
Mati klarwein
<span>
</span>
</a>
</li>
</ul>
</li>
<li title ="sleep">
<a href="index.php?task=browse_posts&catid=7">
sleep
</a>
<ul class="sn">
<li >
<img src="/files/uploads/villaverde-deia_big.jpg" style="float:left;height:39px;width:39px;" />
<a href="mobilePage.php?task=view_post&blogid=16" >
Hostal Villaverde
<span>
**
</span>
</a>
</li>
<li >
<img src="/files/uploads/1_sleep_costa_dor.jpg" style="float:left;height:39px;width:39px;" />
<a href="mobilePage.php?task=view_post&blogid=53" >
Hotel Costa D'or
<span>
*****
</span>
</a>
</li>
<li >
<img src="/files/uploads/1_sleep_des_puig.jpg" style="float:left;height:39px;width:39px;" />
<a href="mobilePage.php?task=view_post&blogid=38" >
Hotel des Puig
<span>
***
</span>
</a>
</li>
<li >
<img src="/files/uploads/1_sleep_es_moli.jpg" style="float:left;height:39px;width:39px;" />
<a href="mobilePage.php?task=view_post&blogid=14" >
Hotel es Molí
<span>
****
</span>
</a>
</li>
<li >
<img src="/files/uploads/La-Residencia-Hotel-Mallorca.jpeg" style="float:left;height:39px;width:39px;" />
<a href="mobilePage.php?task=view_post&blogid=15" >
Hotel La Residencia
<span>
*****
</span>
</a>
</li>
<li >
<img src="/files/uploads/1_sleep_pension_miramar.jpg" style="float:left;height:39px;width:39px;" />
<a href="mobilePage.php?task=view_post&blogid=64" >
Pensiónl Miramar
<span>
</span>
</a>
</li>
<li >
<img src="/files/uploads/1_sleep_sa_pedrissa.jpg" style="float:left;height:39px;width:39px;" />
<a href="mobilePage.php?task=view_post&blogid=37" >
Sa Pedrissa
<span>
****
</span>
</a>
</li>
</ul>
</li>
<li title ="party">
<a href="index.php?task=browse_posts&catid=46">
party
</a>
<ul class="sn">
</ul>
</li>
<li title ="EAT & DRINK">
<a href="index.php?task=browse_posts&catid=8">
EAT & DRINK
</a>
<ul class="sn">
<li >
<img src="/files/uploads/1_eatdrink_sa_font_fresca.jpg" style="float:left;height:39px;width:39px;" />
<a href="mobilePage.php?task=view_post&blogid=35" >
Cafè sa Font Fresca
<span>
€
</span>
</a>
</li>
<li >
<img src="/files/uploads/1_eatdrink_chiringuito_sonmarroig.jpg" style="float:left;height:39px;width:39px;" />
<a href="mobilePage.php?task=view_post&blogid=28" >
Chiringuito de Sa Foradada
<span>
€€
</span>
</a>
</li>
<li >
<img src="/files/uploads/1_eatdrink_sonmarroig.jpg" style="float:left;height:39px;width:39px;" />
<a href="mobilePage.php?task=view_post&blogid=97" >
Chiringuito Son Marroig
<span>
€€
</span>
</a>
</li>
<li >
<div style="float:left;width:39px; height:37px">
</div>
<a href="mobilePage.php?task=view_post&blogid=146" >
Deia Restaurante
<span>
€€
</span>
</a>
</li>
<li >
<img src="/files/uploads/1_eatdrink_el_olivo.jpg" style="float:left;height:39px;width:39px;" />
<a href="mobilePage.php?task=view_post&blogid=81" >
El Olivo
<span>
€€€€€
</span>
</a>
</li>
<li >
<img src="/files/uploads/1_es raco 1.jpg" style="float:left;height:39px;width:39px;" />
<a href="mobilePage.php?task=view_post&blogid=49" >
Es Raco des Teix
<span>
€€€€€
</span>
</a>
</li>
<li >
<img src="/files/uploads/1_eatdrink_sa_Cacera.jpg" style="float:left;height:39px;width:39px;" />
<a href="mobilePage.php?task=view_post&blogid=141" >
Sa Cacera
<span>
€
</span>
</a>
</li>
<li >
<img src="/files/uploads/1_eatdrink_sa_fonda.jpg" style="float:left;height:39px;width:39px;" />
<a href="mobilePage.php?task=view_post&blogid=27" >
Sa Fonda
<span>
€
</span>
</a>
</li>
<li >
<img src="/files/uploads/1_eatdrink_sa_vinya_1.jpg" style="float:left;height:39px;width:39px;" />
<a href="mobilePage.php?task=view_post&blogid=36" >
Sa Vinya
<span>
€€€
</span>
</a>
</li>
<li >
<img src="/files/uploads/1_eatdrink_son_moragues.jpg" style="float:left;height:39px;width:39px;" />
<a href="mobilePage.php?task=view_post&blogid=82" >
Son Moragues Terrace & Bar
<span>
€€€€
</span>
</a>
</li>
<li >
<img src="/files/uploads/1_eatdrink_village_Cafe.jpg" style="float:left;height:39px;width:39px;" />
<a href="mobilePage.php?task=view_post&blogid=63" >
The Village Cafe
<span>
€€€
</span>
</a>
</li>
<li >
<img src="/files/uploads/1_eatdrink_xelini.jpg" style="float:left;height:39px;width:39px;" />
<a href="mobilePage.php?task=view_post&blogid=91" >
Xelini
<span>
€€€
</span>
</a>
</li>
<li >
<img src="/files/uploads/1_eatdrink_can_lluc.jpg" style="float:left;height:39px;width:39px;" />
<a href="mobilePage.php?task=view_post&blogid=42" >
Ca'n Lluch
<span>
€€
</span>
</a>
</li>
<li >
<div style="float:left;width:39px; height:37px">
</div>
<a href="mobilePage.php?task=view_post&blogid=40" >
Ca'n Quet
<span>
€€€€
</span>
</a>
</li>
<li >
<img src="/files/uploads/1_eatdrink_cas_patro.jpg" style="float:left;height:39px;width:39px;" />
<a href="mobilePage.php?task=view_post&blogid=41" >
Ca's Patró March
<span>
€€€
</span>
</a>
</li>
<li >
<div style="float:left;width:39px; height:37px">
</div>
<a href="mobilePage.php?task=view_post&blogid=30" >
Deià Restaurante
<span>
</span>
</a>
</li>
<li >
<img src="/files/uploads/1_eatdrink_espunt.jpg" style="float:left;height:39px;width:39px;" />
<a href="mobilePage.php?task=view_post&blogid=142" >
Es Punt
<span>
€€€
</span>
</a>
</li>
<li >
<img src="/files/uploads/1_eatdrink_las_palmeras.jpg" style="float:left;height:39px;width:39px;" />
<a href="mobilePage.php?task=view_post&blogid=32" >
Las Palmeras
<span>
€€
</span>
</a>
</li>
<li >
<img src="/files/uploads/Restaurante Sa Cova.jpg" style="float:left;height:39px;width:39px;" />
<a href="mobilePage.php?task=view_post&blogid=17" >
Sa Cova
<span>
€
</span>
</a>
</li>
<li >
<img src="/files/uploads/restaurant1.jpg" style="float:left;height:39px;width:39px;" />
<a href="mobilePage.php?task=view_post&blogid=18" >
Sebastian's
<span>
€€€€
</span>
</a>
</li>
<li >
<img src="/files/uploads/1_eatdrink_son_marroig.jpg" style="float:left;height:39px;width:39px;" />
<a href="mobilePage.php?task=view_post&blogid=85" >
Son Marroig
<span>
€€€
</span>
</a>
</li>
<li >
<img src="/files/uploads/1_eatdrink_trattoria_1.jpg" style="float:left;height:39px;width:39px;" />
<a href="mobilePage.php?task=view_post&blogid=33" >
Trattoria Italiana
<span>
€€€
</span>
</a>
</li>
</ul>
</li>
<li title ="To Do">
<a href="index.php?task=browse_posts&catid=13">
To Do
</a>
<ul class="sn">
<li title ="beach">
<a href="index.php?task=browse_posts&catid=21">
beach
</a>
<ul class="sn">
</ul>
</li>
<li title ="kids">
<a href="index.php?task=browse_posts&catid=22">
kids
</a>
<ul class="sn">
</ul>
</li>
<li title ="tenis">
<a href="index.php?task=browse_posts&catid=23">
tenis
</a>
<ul class="sn">
</ul>
</li>
<li title ="Spa">
<a href="index.php?task=browse_posts&catid=24">
Spa
</a>
<ul class="sn">
</ul>
</li>
<li title ="yoga">
<a href="index.php?task=browse_posts&catid=25">
yoga
</a>
<ul class="sn">
</ul>
</li>
<li title ="gym">
<a href="index.php?task=browse_posts&catid=26">
gym
</a>
<ul class="sn">
</ul>
</li>
<li title ="walks">
<a href="index.php?task=browse_posts&catid=28">
walks
</a>
<ul class="sn">
</ul>
</li>
<li title ="Art classes">
<a href="index.php?task=browse_posts&catid=29">
Art classes
</a>
<ul class="sn">
</ul>
</li>
<li title ="cooking">
<a href="index.php?task=browse_posts&catid=30">
cooking
</a>
<ul class="sn">
</ul>
</li>
<li title ="boats">
<a href="index.php?task=browse_posts&catid=31">
boats
</a>
<ul class="sn">
</ul>
</li>
<li title ="kayak">
<a href="index.php?task=browse_posts&catid=32">
kayak
</a>
<ul class="sn">
</ul>
</li>
<li title ="fishing">
<a href="index.php?task=browse_posts&catid=33">
fishing
</a>
<ul class="sn">
</ul>
</li>
<li title ="museums">
<a href="index.php?task=browse_posts&catid=34">
museums
</a>
<ul class="sn">
</ul>
</li>
<li title ="Shopping">
<a href="index.php?task=browse_posts&catid=51">
Shopping
</a>
<ul class="sn">
</ul>
</li>
<li title ="Art Galleries">
<a href="index.php?task=browse_posts&catid=52">
Art Galleries
</a>
<ul class="sn">
</ul>
</li>
<li title ="Art Galleries">
<a href="index.php?task=browse_posts&catid=53">
Art Galleries
</a>
<ul class="sn">
</ul>
</li>
</ul>
</li>
<li title ="properties">
<a href="index.php?task=browse_posts&catid=19">
properties
</a>
<ul class="sn">
<li title ="For sale">
<a href="index.php?task=browse_posts&catid=35">
For sale
</a>
<ul class="sn">
</ul>
</li>
<li title ="For rent">
<a href="index.php?task=browse_posts&catid=36">
For rent
</a>
<ul class="sn">
</ul>
</li>
<li title ="Market reports">
<a href="index.php?task=browse_posts&catid=48">
Market reports
</a>
<ul class="sn">
</ul>
</li>
</ul>
</li>
<li title ="Gallery">
<a href="index.php?task=browse_posts&catid=15">
Gallery
</a>
<ul class="sn">
<li title ="photos">
<a href="/category/gallery/15/?media=photo">
photos
</a>
</li>
<li title ="videos">
<a href="/category/gallery/15/?media=video">
videos
</a>
</li>
</ul>
</li>
<li title ="classifieds">
<a href="index.php?task=browse_posts&catid=11">
classifieds
</a>
<ul class="sn">
</ul>
</li>
<li title ="Calendar">
<a href="index.php?task=browse_posts&catid=10">
Calendar
</a>
<ul class="sn">
<li>
<a href="/category/calendar/10/?start_date=1">
enero
</a>
</li>
<li>
<a href="calendar.php?start_date=2">
febrero
</a>
</li>
<li>
<a href="calendar.php?start_date=3">
marzo
</a>
</li>
<li>
<a href="calendar.php?start_date=4">
abril
</a>
</li>
<li>
<a href="calendar.php?start_date=5">
mayo
</a>
</li>
<li>
<a href="calendar.php?start_date=6">
June
</a>
</li>
<li>
<a href="calendar.php?start_date=7">
July
</a>
</li>
<li>
<a href="calendar.php?start_date=8">
agosto
</a>
</li>
<li>
<a href="calendar.php?start_date=9">
setiembre
</a>
</li>
<li>
<a href="calendar.php?start_date=10">
octubre
</a>
</li>
<li>
<a href="calendar.php?start_date=11">
noviembre
</a>
</li>
<li>
<a href="calendar.php?start_date=12">
diciembre
</a>
</li>
</ul>
</li>
<li title ="News">
<a href="index.php?task=browse_posts&catid=9">
News
</a>
<ul class="sn">
</ul>
</li>
<li title ="about">
<a href="index.php?task=browse_posts&catid=6">
about
</a>
<ul class="sn">
<li title ="where">
<a href="/category/about/6/#where">
where
</a>
</li>
<li title ="weather">
<a href="/category/about/6/#weather">
weather
</a>
</li>
<li title ="history">
<a href="/category/about/6/#history">
history
</a>
</li>
<li title ="Art culture">
<a href="/category/about/6/#art_culture">
Art culture
</a>
</li>
<li title ="Calendar">
<a href="/category/calendar/10/">
Calendar
</a>
</li>
<li title ="Numbers of interest">
<a href="index.php?task=browse_posts&catid=45">
Numbers of interest
</a>
<ul class="sn">
</ul>
</li>
</ul>
</li>
<li title ="Home">
<a href="index.php?task=browse_posts&catid=5">
Home
</a>
<ul class="sn">
</ul>
</li>
</ul>
I tried this solution:
jQuery Mobile Missing Back Button in Listviews
and adding the data-add-back-button="true" to every <ul>
But the go back button is gone...
Just hit in any item in the ListView and you see that there is no back button.
What am I missing?
Working example: http://jsfiddle.net/Gajotres/VjPGm/
Only thing you need to add is:
<script type="text/javascript">
$(document).bind("mobileinit", function() {
$.mobile.page.prototype.options.addBackBtn = true;
});
</script>
And remember, mobilinit event must be triggered BEFORE jQuery Mobile is initialized. Like in my example.
HTML :
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script type="text/javascript">
$(document).bind("mobileinit", function() {
$.mobile.page.prototype.options.addBackBtn = true;
});
</script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-theme="a" data-role="header">
<h3>
First Page
</h3>
<a href="#second" class="ui-btn-right">Next</a>
</div>
<div data-role="content">
<ul data-role="listview">
<li>
<h3>Animals</h3>
<p>All your favorites from aarkvarks to zebras.</p>
<ul>
<li><div>Pets</div>
<span class="ui-li-count">6</span>
<ul>
<li><a href="index.html">Canary</a></li>
<li><a href="index.html">Cat</a></li>
<li><a href="index.html">Dog</a></li>
<li><a href="index.html">Gerbil</a></li>
<li><a href="index.html">Iguana</a></li>
<li><a href="index.html">Mouse</a></li>
</ul>
</li>
<li><div>Farm animals</div>
<p class="ui-li-count">6</p>
<ul>
<li><a href="index.html">Chicken</a></li>
<li><a href="index.html">Cow</a></li>
<li><a href="index.html">Duck</a></li>
<li><a href="index.html">Horse</a></li>
<li><a href="index.html">Pig</a></li>
<li><a href="index.html">Sheep</a></li>
</ul>
</li>
<li><div>Wild animals</div>
<p class="ui-li-count">18</p>
<ul>
<li><a href="index.html">Aardvark</a></li>
<li><a href="index.html">Alligator</a></li>
<li><a href="index.html">Ant</a></li>
<li><a href="index.html">Bear</a></li>
<li><a href="index.html">Beaver</a></li>
<li><a href="index.html">Cougar</a></li>
<li><a href="index.html">Dingo</a></li>
<li><a href="index.html">Eagle</a></li>
<li><a href="index.html">Elephant</a></li>
<li><a href="index.html">Ferret</a></li>
<li><a href="index.html">Frog</a></li>
<li><a href="index.html">Giraffe</a></li>
<li><a href="index.html">Lion</a></li>
<li><a href="index.html">Monkey</a></li>
<li><a href="index.html">Panda bear</a></li>
<li><a href="index.html">Polar bear</a></li>
<li><a href="index.html">Tiger</a></li>
<li><a href="index.html">Zebra</a></li>
</ul>
</li>
</ul>
</li>
<li>
<h3>Colors</h3>
<p>Fresh colors from the magic rainbow.</p>
<ul>
<li><a href="index.html">Blue</a></li>
<li><a href="index.html">Green</a></li>
<li><a href="index.html">Orange</a></li>
<li><a href="index.html">Purple</a></li>
<li><a href="index.html">Red</a></li>
<li><a href="index.html">Yellow</a></li>
<li><a href="index.html">Violet</a></li>
</ul>
</li>
<li>
<h3>Vehicles</h3>
<p>Everything from cars to planes.</p>
<ul>
<li><div>Cars</div>
<span class="ui-li-count">22</span>
<ul>
<li><a href="index.html">Acura</a></li>
<li><a href="index.html">Audi</a></li>
<li><a href="index.html">BMW</a></li>
<li><a href="index.html">Cadillac</a></li>
<li><a href="index.html">Chrysler</a></li>
<li><a href="index.html">Dodge</a></li>
<li><a href="index.html">Ferrari</a></li>
<li><a href="index.html">Ford</a></li>
<li><a href="index.html">GMC</a></li>
<li><a href="index.html">Honda</a></li>
<li><a href="index.html">Hyundai</a></li>
<li><a href="index.html">Infiniti</a></li>
<li><a href="index.html">Jeep</a></li>
<li><a href="index.html">Kia</a></li>
<li><a href="index.html">Lexus</a></li>
<li><a href="index.html">Mini</a></li>
<li><a href="index.html">Nissan</a></li>
<li><a href="index.html">Porsche</a></li>
<li><a href="index.html">Subaru</a></li>
<li><a href="index.html">Toyota</a></li>
<li><a href="index.html">Volkswagon</a></li>
<li><a href="index.html">Volvo</a></li>
</ul>
</li>
<li><div>Planes</div>
<span class="ui-li-count">7</span>
<ul>
<li><a href="index.html">Boeing</a></li>
<li><a href="index.html">Cessna</a></li>
<li><a href="index.html">Derringer</a></li>
<li><a href="index.html">Embraer</a></li>
<li><a href="index.html">Gulfstream</a></li>
<li><a href="index.html">Piper Aircraft</a></li>
<li><a href="index.html">Raytheon</a></li>
</ul>
</li>
<li><div>Construction</div>
<span class="ui-li-count">3</span>
<ul>
<li><a href="index.html">Caterpillar</a></li>
<li><a href="index.html">Ford</a></li>
<li><a href="index.html">John Deere</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>