Toni Michel Caubet Toni Michel Caubet - 6 months ago 14
Javascript Question

listview missing back button for nested list page

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?

Answer

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>