Discussion :

[farmas07]

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

[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()

[farmas07]

Code html :

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
<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 html :

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

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 :

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

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

et quand je fais sa, rien ne marche :

Code :

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

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

voila mon problème .

[farmas07]

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

Code javascript :

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

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 html :

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

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 javascript :

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

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

[SpaceFrog]

Code :

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

  if (index < 4)

il sort d'où index. ?

[farmas07]

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 javascript :

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
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());
	}
 
   });	
 
}