PhoneGap et Jquery mobile

Version imprimable

09/04/2013, 16h51
farmas07

PhoneGap et Jquery mobile

Bonjour, je réalise en ce moment une application mobile avec PhoneGap et JQuery.
Pour mon application j'ai décidé de séparer le code HTML de cette manière :
Index.html contient mon header et mon footer ainsi qu'un div vide nommé content.
Ensuite grâce au javascript je lance la fonction load pour charger une autre pages dans mon div content. Le problème c'est que plus tard je souhaites ajouter un événement sur un div qui se trouve dans cette page chargé mais la j'au l'impression que je n'arrive pas à m'attacher à cette objet comme si l'id n’existait pas.
Pourriez vous me donnez une réponse s'il vous plait ? merci d'avance
09/04/2013, 17h05
SpaceFrog

si l'objet est créé dynamiquement après le chargement de la page, le evenement attribués dans le ready ne lui sont pas affecté puisqu'il n'existait pas au moment de l'attribution.
C'est un classique ! Maintes fois traité ici ...

fais une recherche avec .on() ou .delegate()

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div data-role="header" data_theme="a" id="header">
	<a href="index.html" data-icon="grid">Pièce</a>
	<h1>Distech</h1>
	<a href="favori.html" data-icon="gear">Favoris</a>
</div>
<fieldset class="ui-grid-b" id="distechField" style="heigth : 100%">
	<div class="ui-block-a" style="width:62.5%"><img id="logo-distech" src="img/distech.png"/></div>
	<div class="ui-block-b" style="width:18.75%" id="divOccupe"><img class="occupation" id="logoOccupe" src="img/actif/occupe.png"/>
	</div>	
	<div class="ui-block-c" style="width:18.75%" id="divNonOccupe"><img class="occupation" id ="logoNonOccupe" src="img/nonActif/nonOccupe.png"/></div>   
</fieldset>
 
<div data-role="content" class="content" id="content">
</div>
 
<div data-role="footer" data-theme="z" id="footerAccueil" data-position="fixed">
	<fieldset class="ui-grid-c" id="layoutIcones">
		<div class="ui-block-a" id="divVentil"><img class="icones" id="logoVentil" src="img/actif/ventilation.png"/></div>
		<div class="ui-block-b" id="divLumiere"><img class="icones" id="logoLumiere" src="img/actif/lumiere.png"/></div>
		<div class="ui-block-c" id="divStore"><img class="icones" id="logoStore" src="img/actif/store.png"/></div>
		<div class="ui-block-d" id="divTemp"><img class="icones" id="logoTemp" src="img/actif/temperature.png"/></div>	   
	</fieldset>
</div>

voila mon index.html, donc je veux charger mon code dans le div content.

Code:

1
2
3
4
5
<fieldset class="ui-grid-b">
	<div class="ui-block-a" style="width:55%"></div>
	<div class="ui-block-b" style="width:22.5%" id="divFanSpeedOff"><img id="ventilOff" src="img/ventil/fanSpeedOff.png"/></div>	
	<div class="ui-block-c" style="width:22.5%" id="divFanSpeed1"><img id ="ventil1" src="img/ventil/fanSpeed1.png"/></div>   
</fieldset>

voila le code que je charge.
maintenant je le charge comme sa :

Code:

$("#content").load("home.html");

et quand je fais sa, rien ne marche :

Code:

$("#logoVentil").on('tap',function(event, ui)

voila mon problème .

J'ai résous mon premier problème. maintenant j'ai un probèleme similaire:

Code:

1
2
3
4
5
6
7
$("#content").on('swipeleft', function(event, ui){
   if (index < 4)
   {
	index ++;
	$("#content").load(page[index], bindPage());
   }
});

Comme le montre ce bout de code je charge ma page lors d'un swipe dans le div content.

ma page charger contient :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<fieldset class="ui-grid-b" id="blockVentil1">
        <div class="ui-block-a" style="width:55%"></div>
	<div class="ui-block-b" style="width:22.5%" id="divFanOff"><img class="spriteFan icone fanOff_a" id="fanOff" src="img/transparent.gif"/></div>	
	<div class="ui-block-c" style="width:22.5%" id="divFan1"><img class="spriteFan icone fan1_n" id ="fan1" src="img/transparent.gif"/></div>   
</fieldset>
<fieldset class="ui-grid-b" id="blockVentil2">
	<div class="ui-block-a" style="width:55%" id="divAffichFan"><img class="spriteFan iconeFan affichFan_off" id="affichFan" src="img/transparent.gif"/></div>
	<div class="ui-block-b" style="width:22.5%" id="divFan2"><img class="spriteFan icone fan2_n" id="fan2" src="img/transparent.gif"/></div>	
	<div class="ui-block-c" style="width:22.5%" id="divFan3"><img class="spriteFan icone fan3_n" id ="fan3" src="img/transparent.gif"/></div>   
</fieldset>
<fieldset class="ui-grid-b" id="blockVentil3">
	<div class="ui-block-a" style="width:66%"></div>
	<div class="ui-block-b" style="width:22.5%" id="divFanAuto"><img class="spriteFan icone fanAuto_n" id="fanAuto" src="img/transparent.gif"/></div>
	<div class="ui-block-a" style="width:11.5%"></div>	   
</fieldset>

Je veux ensuite changer les icônes de ma page que je viens de charger dans une fonction que j'appel dans la fonction bindPage()

Code:

1
2
3
4
5
6
var fanOff = document.getElementById("fanOff");
var fan1 = document.getElementById("fan1");
var fan2 = document.getElementById("fan2");
var fan3 = document.getElementById("fan3");
var fanAuto = document.getElementById("fanAuto");
var affichFan = document.getElementById("affichFan");

Le problème c'est que toutes mes variables sont a null

10/04/2013, 16h40
SpaceFrog

Code:

if (index < 4)

il sort d'où index. ?

exscusez moi j'ai oublier de mentionner enfaite j'ai un tableau ou dedan j'ai l'adresse de toutes mes pages, ça me permet de bind 2 événement au lieu d'en bind 9 ^^ je vous met le code au complet :

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
var page = ["home.html", "fan.html", "light.html", "blind.html", "temp.html"];
var index = 0;
 
function bindPage()
{
   changeIconFooter();
   if(index == 1)
   {
	bindFan();
	changeIconFan();
   }
}
 
function bindSwipe()
{
   $.event.special.swipe.horizontalDistanceThreshold = 100;
 
   $("#content").on('swipeleft', function(event, ui){
	if (index < 4)
	{
	      index ++;
	      $("#content").load(page[index], bindPage());
	}
 
   });
 
   $("#content").on('swiperight', function(event, ui){
	if (index > 0)
	{
	      index --;
	      $("#content").load(page[index], bindPage());
	}
 
   });	
 
}

11/04/2013, 11h43
farmas07

Bon pour répondre à mon sujet il suffisait que j'ajoute l'appel à ma fonction changeIconFan dans la page que je charge et ainsi je peux utiliser les éléments qui se trouve dedans. Merci pour l'aide que vous avez pu m'apporter.