UI Mobile. Passer d'une simple page vers une page avec plusieurs liens internes. [Débutant(e)]

[pierro13]

Bonjour,
J'ai une page classique auquel je veux lié une seconde page local disposant elle de plusieurs lien dans la même page.

Lorsque je fait cela:

Code :

<div class="ui-block-a"><a href="index2.html"><img src="images.png"></a></div>

J’atterris bien sur la seconde page seulement je ne peux plus naviguer entre les différents lien de la seconde page (index2.html).
Dans la doc américaine ils disent d'utilisez rel="external" or data-ajax="false" ça marche mais comme c'est considéré comme des liens externes il me ferme mon application et lance le navigateur .

Je ne connais quasiment pas javascript ni le DOM mais j'imagine qu'il sauf rafraichir le DOM ?

Ce que j'ai essayé :

Code :

1
2
3
4
5
<script type="text/javascript">
	function link() { 
	$.mobile.changePage( "index2.html", { reloadPage:true, transition: "slideup"} );
}				
</script>

HTML :

Code :

<div class="ui-block-a"><a href="#" onclick="link();"><img src="images.png"></a></div>

Ca ne marche hélas pas, le support des forum et chat américain de jqm étant complètement inexistant j’espère que vous pourrez m'aider.

[danielhagnoul]

Bonsoir

Désolé, je ne comprends pas la question. Un lien vers votre page de test me permettrait de tester et de voir le problème.

UI Mobile b1 vient de sortir, je n'ai pas encore eu l'occasion d'expérimenter toutes les facettes. La documentation/démonstration sur les différents types de liens possibles est ici : http://jquerymobile.com/demos/1.0b1/...k-formats.html

[pierro13]

Bonjour merci de votre réponse je conçois que ma question n'est pas des plus clair, j'ai donc réalisé cette page de test :

http://kakkoii.fr/dev/


comme vous pouvez le voir il y a deux pages HTML

1 : index.html
2 : secondepage.html (la seconde page contient deux pages a l'intérieur, la page 2 et 3 via la fonction " data-role="page" id="page3" ")

Si l'on clique sur "vers la page 2" pas de problème mais si l'ont clique de la page 2 à "vers la page 3" il redirige vers la page 1 car il ne trouve pas la 3.

Par contre si l'ont va directement sur la secondepage.html sans passez au préalable par l'index.html la transition vers la page 3 marche.

J'utilise déjà la beta 1, est mon problème est présent sur la beta 1 et sur les versions antérieur.

[danielhagnoul]

Bonjour

Le système de gestion des transferts de page par AJAX ne facilite pas l'examen des codes et leurs débogages !

---

Dans la page qui a pour base : <base href="http://kakkoii.fr/dev/#page3">.

L'URL de base ne doit pas comprendre le tag de la page : <base href="http://kakkoii.fr/dev/">.

Un ID doit être unique, il y a deux id="page1" ! Le second devrait être <div data-role="page" id="page3" data-url="page3" où même ne pas exister puisqu'il y a déjà un data-url="page3" dans le second fichier.

----

Dans la seconde page (sauf erreur) qui a pour base : <base href="http://kakkoii.fr/dev/">.

Il y a trois pages et une duplication de l'id="page1" : <div data-role="page" id="page1" data-url="page1"> ; <div data-role="page" id="page1" data-url="page3"> et <div data-role="page" id="page2" data-url="/dev/secondepage.html".

----

A mon avis, le premier fichier ne devrait pas comporter de data-url="page3".

Dans le second fichier, devrait se trouver data-url="page2" (le système header/content/footer) et data-url="page3" avec pour id="page2" et "page3".

A mon avis, il ne doit pas y avoir de duplication d'id dans les deux pages, car elles sont gérées par le même système.

----

Par expérience, une courte expérience, je préfère de loin avoir un fichier PHP par page. C'est beaucoup plus simple à gérer et à maintenir dans la durée.

[pierro13]

Bonjour,

Suite a vos conseils empli de sagesse j'ai effectué les modifications suivante :

Sur index.html (la première page)

Code :

<div data-role="page" id="page1" data-url="page1">

Sur deuxiemepage.html (la seconde et troisième pages)

Code :

1
2
<div data-role="page" id="page2" data-url="page2">
<div data-role="page" id="page3" data-url="page3">

Malheureusement cela ne change rien comme vous pouvez le constaté.
(j'ai mit la page web a jour).

Pour le un fichier php par page, en fait je vais avoir quelque chose comme 260 pages, a la base j'avais fait une seul page les regroupant toutes pour évité les loading et les bugs de transition (réglé dans la beta 1 d’ailleurs), cela marchait bien le probleme c'est que comme vous pouvez imaginez la page mettais un temp fou a charger la première fois. (faisant même un timed out sur les appareils pas très récent)

C'est pour ça qu'en faisant ce compromit je divise le nombre loading par 6.
Un seul par section. (il est probable que la personne ne visite qu'une section a chaque fois).

Maintenant si vous connaissez une méthode qui permet de mettre en cache les pages évitant le loading cela me conviendrait aussi ^^ les développeurs en ont d’ailleurs parler d'ajoutez cet fonction dans le futur, mais ce n'est pas encore le cas malheureusement.

[danielhagnoul]

Bonjour

Votre site de test ne fonctionne pas en effet, mais je n'arrive pas à comprendre sa structure et son code d'origine.

UI Mobile transforme les codes profondément en ajoutant une profusion d'attributs et de classes et la gestion des transitions de page par AJAX ne facilite pas les choses.

Je viens d'essayer de déboguer trois pages de tests de ma main et même là ce n'est pas évident.

Le mieux serait de poster directement le code de vos pages de test.

[pierro13]

Merci bien je pensez que vous aviez abandonnez

INDEX.HTML :

http://jsbin.com/ubudop/edit


DEUXIEMEPAGE.HTML :

http://jsbin.com/oqixok/edit

J'ai essayer de faire le code le plus simple possible.

[danielhagnoul]

Bonjour

Je vois beaucoup mieux le problème et les codes que UI Mobile rajoute aux codes d'origine.

UI Mobile transforme les codes de telle manière que l"on se retrouve après un cheminement dans les pages avec une salade du genre :

Code :

1
2
3
4
5
<div data-role="page" id="page1" data-url="page1" ...

<div data-role="page" id="page1" data-url="page3" ...

<div data-role="page" id="page2" data-url="/Forum/Mobile/TestPage23.php" ...

TestPage23.php c'est le nom que j'ai donné au second fichier. J'ai réalisé plusieurs tests en modifiant plusieurs choses sans résoudre la bogue. Le fait de travailler en HTML ou en PHP ne change rien, sauf que Chrome refuse d'afficher les pages en HTML.

Il suffit d'un attribut "external" pour indiquer que l'on case le système de gestion de page de UI Mobile en changeant de page.

Dans la doc américaine ils disent d'utilisez rel="external" or data-ajax="false" ça marche mais comme c'est considéré comme des liens externes il me ferme mon application et lance le navigateur.

En relisant la discussion, je vois que je suis revenu au point de départ ! Mais après mes tests, je ne vois vraiment pas une autre solution que l'attribut rel="external".

Voir : http://jquerymobile.com/demos/1.0b1/...ocs-pages.html

Mon fichier TestPage1.php :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Page Title</title> 
	<link rel="stylesheet"  href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />  
	<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
</head> 
<body> 
    <div data-role="page">
        <div data-role="header">
            <h1>Page 1</h1>
        </div>
        <div data-role="content">	
            <h2>Page 1</h2>
			<a href="TestPage23.php" rel="external">VERS LA PAGE 2</a>
        </div>
        <div data-role="footer">
            <h1>Footer</h1>
        </div>
    </div>
</body>
</html>

Mon fichier TestPage23.php :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Page Title</title> 
	<link rel="stylesheet"  href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />  
	<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
</head> 
<body> 
    <div data-role="page">
        <div data-role="header">
            <h1>Page 2 Section 1</h1>
        </div>
        <div data-role="content">	
            <h2>Page 2 Section 1</h2>
			<ul data-role="listview" data-inset="true">
				<li data-role="list-divider">Menu de la Page 2</li>
				<li><a href="#section22">Page 2 Section 2</a></li>
				<li><a href="#section23">Page 2 Section 3</a></li>
				<li><a href="#section24">Page 2 Section 4</a></li>
				<li><a href="#section25">Page 2 Section 5</a></li>
			</ul>
        </div>
        <div data-role="footer">
            <h1>Footer</h1>
        </div>
    </div>
    <div data-role="page" id="section22" data-add-back-btn="true">
        <div data-role="header">
            <h1>Page 2 Section 2</h1>
        </div>
        <div data-role="content">	
            <h2>Page 2 Section 2</h2>
       </div>
        <div data-role="footer">
            <h1>Footer</h1>
        </div>
    </div>
    <div data-role="page" id="section23" data-add-back-btn="true">
        <div data-role="header">
            <h1>Page 2 Section 3</h1>
        </div>
        <div data-role="content">	
            <h2>Page 2 Section 3</h2>
       </div>
        <div data-role="footer">
            <h1>Footer</h1>
        </div>
    </div>
    <div data-role="page" id="section24" data-add-back-btn="true">
        <div data-role="header">
            <h1>Page 2 Section 4</h1>
        </div>
        <div data-role="content">	
            <h2>Page 2 Section 4</h2>
       </div>
        <div data-role="footer">
            <h1>Footer</h1>
        </div>
    </div>
    <div data-role="page" id="section25" data-add-back-btn="true">
        <div data-role="header">
            <h1>Page 2 Section 5</h1>
        </div>
        <div data-role="content">	
            <h2>Page 2 Section 5</h2>
       </div>
        <div data-role="footer">
            <h1>Footer</h1>
        </div>
    </div>
</body>
</html>

[pierro13]

C'est triste d'être obliger d'ouvrir une nouvelle fenêtre pour un simple lien local, mais bon espéront que ca change pour la version finale.
Si cela était le cas je viendrais actualisé ce topic pour ceux qui serait dans le même cas que moi.

[danielhagnoul]

Envoyé par pierro13

C'est triste d'être obliger d'ouvrir une nouvelle fenêtre pour un simple lien local, ...

Ouvrir une nouvelle fenêtre ? Non, lors de mon test tout se passe dans la même fenêtre.

[pierro13]

Comme précisé dans mon premier poste :
"ça marche mais comme c'est considéré comme des liens externes il me ferme ma webapp et lance le navigateur."
Ca plus le faite qu'il n'y est plus de transition "slide"
Pas très ergonomique pour une application ^^