Lien non fonctionnels sauf après rechargement !

**french-petzouille** · 03/08/2019, 11h19

Bonjour

Je tente de comprendre jquery mobile.

J'ai pour cela une page avec un formulaire d'identification via bdd et requête mysql. Soit je suis animateur soit je suis un administrateur.
si je suis reconnu ...
j'ai un script qui me redirige vers la page "index.php".

ci dessous mon script ... suite au click sur un bouton de validation 'submitConnexion' :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// SE CONNECTER COMME ADMIN ou ANIMATEUR
$(document).on('click','#submitConnexion',function(){
        str=$('#formConnexion').serialize();
        $.ajax ({
                url:'mob_testLogin.php',
                dataType:'xml',
                data:'connect=1&'+str,
                success:function(xml){
                        var info=$(xml).find('info').text(),color=$(xml).find('color').text(), ok=$(xml).find('ok').text();
                        $('#avis_ok').empty().show().html('<p class="'+color+'">'+info+'</p>').delay(1000).fadeOut(250,function(){
                         if(ok==1){$( ":mobile-pagecontainer" ).pagecontainer( "change", "index.php",{transition:"flip"});}
                });
            }
        });
    });

au click sur le bouton ... la page "mob_testLogin.php" est sollicitée ... une requête vers ma bdd est faite et j'ai en retour un petit bout de xml que je recupère dans "success"
De là je fait un petite animation avec inscription dans une div#avis_ok ... " vous êtes connecté comme animateur ou administrateur ..." puis ... je redirige via " $( ":mobile-pagecontainer" ).pagecontainer(...)".

tout ca ... ca marche.

Le HIC est que la page "index.php" ... est "capricieuse".

--> Les liens INTERNES de index.php en rouge dans le code ci-dessous : #addPesee , #addMultiple , #apropos = ... NE MARCHENT PAS SAUF SI JE RECHARGE MA PAGE .

--> Les liens EXTRENES en bleu dans le code ci-dessous MARCHENT ...

Ma page index .php =

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
<!DOCTYPE html> 
<html> 
<head> 
    <title>Jambon'Click</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Jambon'Click - Interface de gestion des pesées de Jambons">
    <link rel="stylesheet" type="text/css" media="screen" href="images/jambon.css"/>
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <link rel="stylesheet" href="images/themes/pod2.min.css" />
    <link rel="stylesheet" href="images/themes/jquery.mobile.icons.min.css" />
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <script src="images//jambon.js"></script>
</head> 
<body>

<!-- ######################## -->
<!-- BOUTONS DE FONCTIONS -->
<!-- ######################## -->

<div data-role='page'>
    <div data-role='header'>
		<h3> Jambon'Click!</h3>
	</div><!-- /header -->
	
    <div data-role='content'>  
    <a href='#addPesee' data-transition="pop" class='ui-btn ui-shadow ui-corner-all'>
    <span class="fa fa-balance-scale fa-lg fa-fw"></span> - Ajouter une pesée</a>
    
    <a href='#showMultiple' data-transition="pop" class='ui-btn ui-shadow ui-corner-all'>
    <span class="fa fa-balance-scale fa-lg fa-fw"></span> - Ajouter ++ pesées - <span class="fa fa-balance-scale fa-lg fa-fw"></span></a>
    
    <a href='mob_getlistingpesees.php' rel='external' class='ui-btn ui-shadow ui-corner-all'>
    <span class="fa fa-users fa-lg fa-fw"></span> - Les joueurs</a>
    
    <a href='#restriction' rel='external' class='ui-btn ui-shadow ui-corner-all'>
        <span class='fa fa-wrench fa-lg fa-fw'></span> - Administration</a>    

   <a href='index.php?dcnx=1' rel='external' class='ui-btn ui-shadow ui-corner-all'>
    <span class="fa fa-plug fa-lg fa-fw"></span> - Déconnexion</a>


    </div><!-- /content -->

    <div data-role='footer' data-position='fixed' class='c'>
       <div data-role=navbar>
        <ul>
            <li><a href='#apropos' data-transition='slideup'>A propos</a></li>
        </ul>
       </div>
    </div><!-- /footer -->
</div><!-- /page1 -->



<!-- ######################## -->
<!-- PAGE RESTRICTION -->
<!-- ######################## -->



<div data-role='dialog' id='restriction'>
    <div data-role='header'>
      <h2>Zone réservée</h2>
    </div><!-- /header -->
    
    <div role="main" class="ui-content">
      <div class='c'>
          <h2 class='r'>Jambon'Click</h2>
          <p>Vous êtes animateur !</p>
          <p class='maroon'>Seul un administrateur peut gérer</p>
          <p>les coulisses</p>
        </div>
    </div><!-- /content -->
</div><!-- /page -->


  

<!-- ######################## -->
<!-- PAGE A PROPOS -->
<!-- ######################## -->



<div data-role='dialog' id='apropos'>
    <div data-role='header'>
      <h2>A propos</h2>
    </div><!-- /header -->
    
    <div role="main" class="ui-content">
      <div class='c'>
          <h2 class='r'>Jambon'Click</h2>
          <p>Licence accordée au : </p>
          <p class='maroon'>Aux Bouffardises</p>
          <p>v1.0 - Copyright® 2019</p>
        </div>
    </div><!-- /content -->
</div><!-- /page -->





<!-- ############### -->
<!-- PAGE SAISIES MULTIPLES de PESEES POUR LE MEME JOUEUR -->
<!-- ############### -->


<div data-role='page' id='showMultiple'>
        
        <div data-role='header' data-position="fixed">
        <h2>Saisies multiples</h2>
        <!-- mon bouton pour aller en W accueil --> 
        <a href='#' data-rel='back' data-icon='home' rel='external' >Retour</a>
        </div><!-- /header -->

        <div role="main" class="ui-content">
        <div class='c'>
        <form id="formMultiple">
<select name="idJambon" id="idJambon" data-native-menu="false">
<option value="1">Bouffardises 2019</option>
<option value="2">Bouffardises 2018</option>
</select>
<h3>Nom</h3>
<input type="text" data-clear-btn="true" name="nom" id="nom">
<h3>Prénom</h3>
<input type="text" data-clear-btn="true" name="prenom" id="prenom">
<p class="r">- Estimation 1 - <input type="number" data-clear-btn="true" name="estim_1" id="estim_1" placeholder="en grammes" pattern="[0-9]*"></p>
<p class="r" id="avis_ok1"></p>
<p class="r">- Estimation 2 - <input type="number" data-clear-btn="true" name="estim_2" id="estim_2" placeholder="en grammes" pattern="[0-9]*"></p>
<p class="r" id="avis_ok2"></p>
<p class="r">- Estimation 3 - <input type="number" data-clear-btn="true" name="estim_3" id="estim_3" placeholder="en grammes" pattern="[0-9]*"></p>
<a href='#' data-role='button' data-icon='check' name='submitMultiplePesee' id='submitMultiplePesee'>Valider ces pesées</a>
</form>      </div>
    </div><!-- /content -->
</div><!-- /page -->	




<!-- ####################### -->
<!-- PAGE DE SAISIE PESEE = UNE SEULE PESEE -->
<!-- ####################### -->




<div data-role="page" id="addPesee" data-theme='a'>
	<div data-role="header" data-position="fixed">
		<h2 id="titre">Ajouter une pesée</h2>
        <a href='#' data-rel='back' data-icon='home' rel='external' >Retour</a>
	</div>
	
	<div data-role="content">
        <form id="add_jambonForm">
<select name="id_jambon" id="id_jambon" data-native-menu="false">
<option value="3">Bouffardises 2020</option>
<option value="1">Bouffardises 2019</option>
<option value="2">Bouffardises 2018</option>
</select>
<h3>Nom :</h3>
<input type="text" data-clear-btn="true" name="nom" id="nom">
<h3>Prénom :</h3>
<input type="text" data-clear-btn="true" name="prenom" id="prenom">
<h3>Estimation du poids :</h3>
<input type="number" data-clear-btn="true" name="estimation" id="estimation" placeholder="en grammes" pattern="[0-9]*">
<p id="avis_ok"></p>
<div data-role="navbar">
****        <ul>
                <input type="button" data-icon="check" name="btn_validForm" id="btn_validForm" value="Accepter ces valeurs" />
****        </ul>
        </div></form>	
	</div > <!-- end content -->
</div> <!--  en PAGE-->

 
</body>
</html>

une idée ?

merci +++

**Toufik83** · 03/08/2019, 12h32

Salut,

as-tu essayé d'ajouter les attributs data-ajax et target ?

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href='#addPesee' data-transition="pop" data-ajax="false" class='ui-btn ui-shadow ui-corner-all' target="_blank"></a>

**french-petzouille** · 03/08/2019, 14h45

merci toufik

Avec ta proposition ca marche ... mais ca me gêne de mettre un target _blank.

J'imagine qu'il y a qq chose de plus html5.

**Toufik83** · 03/08/2019, 14h58

Et ça fonctionne toujours en supprimant le target ?

**french-petzouille** · 03/08/2019, 14h58

non
sans target = cela marche plus

**Toufik83** · 03/08/2019, 18h10

en quoi ça te gène l'utilisation de target ?

Lien non fonctionnels sauf après rechargement !

jQuery

Vue hybride

Discussions similaires

Partager

Partager