combinaison jQuery et JS natif

Version imprimable

Bonjour
J'utilise la librairie jquery pour developper, et j'ai ecris aussi d'autres scripts classiques (pas en jquery) sauf que ma page exucute juste jquery mais pas les autres methodes, est ce normal?
pour etre plus explicite voici un bout de code :
appel de la fonction

Code:

getSolde('solde', afficheSolde);
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 function getSolde(sURL, callback) { //console.log('ressource solde: ' + sURL); $.ajax({ type: 'GET', url: rootURL + sURL, dataType: "text", success: callback, error: function(jqXHR, textStatus, errorThrown){ alert('erreur :' + textStatus + errorThrown); } }); } function afficheSolde(data){ var list = data; if(list == null){ //RAS pour le moment } else{ var Solde = JSON.parse(list); console.log('solde vaut: ' + Solde.solde); } }
Et la quand je clique sur le lien de la page qui devrait afficher le solde, rien ne se passe par contre si j'actualise, la page est chargée normalement et les scripts executés. Je voudrais que ts les scripts s'executent des que le lien est clique et qu'on se retrouve sur la la page d'affichage.:help:
Si quelqu'un a une idée, qu'il n'hesite pas, merci

23/04/2012, 16h53
Watilin

Est-ce que jQuery est chargée dans la page qui contient le lien ?
Ou alors, il est possible que tu scriptes la page trop tôt. N'oublie pas d'utiliser $(document).ready.
24/04/2012, 09h32
Alex le grand

Oui jQuery est bien chargée, pour $(document).ready, en regardant les exemples sur le net, je n'ai pas vu d'exemples sur des appels de fonctions, j'ai essayer de l'utiliser mais ca n'a rien donné ou peut etre que je l'ai mal utilisé.

Bah…

Code:

1
2
3
$(document).ready(function(){
   getSolde('solde', afficheSolde);
});

Non ?

C'est pas si facile que ça.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<!DOCTYPE html>
<html>
<head>
<title>Page de test</title>
<link rel="stylesheet" href="jquery.mobile-1.0.1.min.css" />
<script src="jquery.js"></script>
<script src="jquery.mobile-1.0.1.min.js"></script>
 
</head>
<body>
 
<a href="test2.html"> test 2</a><br/>
<a href="test.html"> test 3</a>
</body>
</html>

et test 3 par exemple:

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
 
<html>
<head>
<title>Test</title>
 
<link rel="stylesheet" href="jquery.mobile-1.0.1.min.css" />
<script src="jquery.js"></script>
<script src="test.js"></script>
<script src="jquery.mobile-1.0.1.min.js"></script>
</head>
<body>
<div data-role=page id=home>
 
<div data-role=header>
<h1>home</h1>
</div>
 
<div data-role=content>
<p>contenu de la fenetre 1</p>
<input type=range id = slider1 min=1 max=100/>
 
 <label for=check1>checkbox</label>
 <input type=checkbox id=check1/>
 <a href=#win2 id=link1> aller sur la fenetre 2</a>
</div>
</div>
 
<div data-role=page id=win2 data-add-back-btn=true>
 
<div data-role=header>
<h1>fenetre 2</h1>
</div>
<div data-role=content>
<p> Contenu de la fenetre 2</p>
</div>
 
</div>
 
</body>
</html>

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
 
$(document).ready(function(){
$("#check1").live("checkboxradiocreate", function(event)
{
	alert("checkbox cree");
});
$("#slider1").live("slidercreate", function(event){
	alert("slider crée");
	 });
 
$("#div:jqmData(role=page)").bind("pagebeforecreate",function(event){
alert("pagebeforecreate id=" + this.id);
});
 
$("#div:jqmData(role=page)").bind("pagecreate",function(event){
alert("pagecreate id=" + this.id);
});
 
$("#div:jqmData(role=page)").bind("pageinit",function(event){
console.log("pageinit id=" + this.id);
alert("pageinit id=" + this.id);
});
 
alert("c'est trop diff");
});

ce qui nous interesse ici alert("c'est trop diff");
par exemple la, tu clique sur test 3 et rien ne marche, et tu reactulise, ca marche deja.
petit rappel, j'utilise jquery mobile qui utilise ajax pour charger les liens.

09/05/2012, 16h05
Alex le grand
j'ai trouvé la solution en utilisant 'pageinit'.
En fait, dans toutes les en-tetes, on importe tous les fichiers( css et scripts) qu'on utilisera. donc toutes les pages contiennent ces en-tetes.
Code:

1 2 3 4 <link rel="stylesheet" href="jquery.mobile-1.0.1.min.css" /> <script src="jquery.js"></script> <script src="jqm.js"></script> <script src="jquery.mobile-1.0.1.min.js"></script>
puis pour appeler les fonctions contenues ds jqm, on utilise pageinit :
Code:

1 2 3 4 5 $("#Id_de_la_page").live('pageinit', function() { /* on appelle les fonctions ici */ });
Code:

1 2 <div data-role="page" id="Id_de_la_page">
.
Attention l'appel de la page se fait imperativement à l'interieur de la balise data-role. Details :http://mobile.jquery-fr.com/docs/pages/ … pting.html