combinaison jQuery et JS natif

**Alex le grand** · 23/04/2012, 16h12

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 :

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

getSolde('solde', afficheSolde);

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
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.

Si quelqu'un a une idée, qu'il n'hesite pas, merci

**Watilin** · 23/04/2012, 16h53

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.

**Alex le grand** · 24/04/2012, 09h32

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é.

**Watilin** · 24/04/2012, 16h42

Bah…

Code :

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

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

Non ?

**Alex le grand** · 25/04/2012, 12h01

C'est pas si facile que ça.

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

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

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
 
$(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.

**Alex le grand** · 09/05/2012, 16h05

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 :

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

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 :

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

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

Code :

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

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

combinaison jQuery et JS natif

jQuery

Discussions similaires

Partager

Partager