Search jQuery

jQuery Forum

Why wont those link work?

in jQuery Mobile • 4 months ago

Hello,

I created two link "Aktuelles", and I linked them, why wont those two links work?

http://poure.eu/mobil.fitness-rodgau.de/

Thank you!

Replies(4)

haga0054

Remove the # and everything after it in your href. JQM automatically will grab the first <div data-role="page"> and use that, no need to add the page ID to it. This is actually what is causing your problem.

Should be:

href="aktuelles.html"

danielsfo..

Re: Why wont those link work?

4 months ago

Hello,

thank you for the fast response. The think is that "aktuelles.html" contains two sites. One is "wichtiges" and the other one is "events".

So if I press on "aktuelles" in the index.html and than on "events" it should show me only the content from "events" and not the whole aktuelles.html or rather the content of "wichtiges".

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Fitness World Mobile - Aktuelles</title>

<meta name="viewport" content="width=device-width, initial-scale=1", maximum-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>


<link rel="stylesheet" href="css/individuell.css" />


<meta name="apple-mobile-web-app-capable" content="yes" />

<link rel="apple-touch-icon-precomposed" href="bilder/icon-ipad.png" sizes="72x72" />
<link rel="apple-touch-icon-precomposed" href="bilder/icon-iphone-retina.png" sizes="114x114" />
<link rel="apple-touch-icon-precomposed" href="bilder/icon-ipad-retina.png" sizes="144x144" />
<link rel="apple-touch-icon-precomposed" href="bilder/icon-iphone.png" />


<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

</head>

<body>

    <div data-role="page" id="wichtiges">
        <div data-role="header" data-theme="a" data-add-back-btn="true" data-back-btn-text="Back"><h1>Wichtiges</h1></div>
        <div data-role="content" id="wichtiges">
            <div class="content-primary">
                <p>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.
                </p>
            </div> 
        </div> 


    <div data-role="page" id="events">
        <div data-role="header" data-theme="a" data-add-back-btn="true" data-back-btn-text="Back"><h1>Events</h1></div>
        <div data-role="content" id="events">
            <div class="content-primary">
                <p>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.
                </p>
            </div> 
        </div> 

</body>
</html>

INDEX

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Fitness World Mobile - Startseite</title>

<meta name="viewport" content="width=device-width, initial-scale=1", maximum-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>


<link rel="stylesheet" href="css/individuell.css" />


<meta name="apple-mobile-web-app-capable" content="yes" />

<link rel="apple-touch-icon-precomposed" href="bilder/icon-ipad.png" sizes="72x72" />
<link rel="apple-touch-icon-precomposed" href="bilder/icon-iphone-retina.png" sizes="114x114" />
<link rel="apple-touch-icon-precomposed" href="bilder/icon-ipad-retina.png" sizes="144x144" />
<link rel="apple-touch-icon-precomposed" href="bilder/icon-iphone.png" />


<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

</head>

<body>

    <div data-role="page" id="startseite">
        <div data-role="header" data-theme="a">
            <h1>Fitness World</h1>
        </div> 

        <div data-role="content">
        <img class="logo-startseite" src="images/fitness_world_logo_edited.png" /> 
            <div class="content-primary">
                <div data-role="collapsible" data-theme="a" data-content-theme="a">
                    <h2>Aktuelles</h2>
                    <ul data-role="listview">
                        <li><a href="aktuelles.html">Wichtiges</a></li>
                        <li><a href="aktuelles.html">Events</a></li>
                    </ul>
                </div> 

                <div data-role="collapsible" data-theme="a" data-content-theme="a">
                    <h2>Kurse</h2>
                    <ul data-role="listview">
                        <li><a href="#">Kursplan Nieder Roden</a></li>
                        <li><a href="#">Kursplan Jügesheim</a></li>
                        <li><a href="#">Kurspläne als PDF</a></li>
                    </ul>
                </div> 

                <div data-role="collapsible" data-theme="a" data-content-theme="a">
                    <h2>Training</h2>
                    <ul data-role="listview">
                        <li><a href="#">Information</a></li>
                        <li><a href="#">Probetraining</a></li>
                        <li><a href="#">InBody-Messung</a></li>
                        <li><a href="#">PowerPlate</a></li>
                        <li><a href="#">Ernährungsplan</a></li>
                    </ul>
                </div> 

                <div data-role="collapsible" data-theme="a" data-content-theme="a">
                    <h2>Multimedia</h2>
                    <ul data-role="listview">
                        <li><a href="#">Video</a></li>
                        <li><a href="#">Fotos</a></li>
                        <li><a href="#">Like us on Facebook</a></li>
                    </ul>
                </div> 

                <div data-role="collapsible" data-theme="a" data-content-theme="a">
                    <h2>Kontakt</h2>
                    <ul data-role="listview">
                        <li><a href="#">Kontakt</a></li>
                        <li><a href="#">Impressum</a></li>
                    </ul>
                </div> 
            </div> 
        </div> 

    </div> 

</body>
</html>

haga0054

Re: Why wont those link work?

4 months ago

You can not link any document to a multi page document. You either use one multipage document, or multiple single page documents. I would suggest the latter.

I know the documentation isn't very clear, but no one should really be using multipage documents unless they have a mostly static site: the content doesn't change often. So, to solve your problem. Get rid of the # with the ID, and split those into two html documents.

danielsfo..