Jquery ne fonctionne pas dans une page ajax/php

[enamorada]

Bonjour,
j'ai deux pages php
la 1ere page contient du code ajax
et voici le code du ajax cette page

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
41
42
43
44
45
46
47
48
<script type='text/javascript'>
function getXhr(){
        var xhr = null; 
	if(window.XMLHttpRequest) // Firefox et autres
	   xhr = new XMLHttpRequest(); 
	else if(window.ActiveXObject){ // Internet Explorer 
	   try {
                xhr = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
	}
	else { // XMLHttpRequest non supporté par le navigateur 
	   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
	   xhr = false; 
	} 
        return xhr;
}			
/**
* Méthode qui sera appelée sur le click du bouton
*/
function go(){
	var xhr = getXhr();
	// On défini ce qu'on va faire quand on aura la réponse
	xhr.onreadystatechange = function(){
		// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
		if(xhr.readyState == 4 && xhr.status == 200){
			leselect = xhr.responseText;
			// On se sert de innerHTML pour rajouter les options a la liste
			document.getElementById('indicateur').innerHTML = leselect;
			document.getElementById("loader").style.display = "none";
		}
		else if (xhr.readyState < 4) 
		{
	          document.getElementById("loader").style.display = "inline";
	        }
	}
	// Ici on va voir comment faire du post
	xhr.open("POST","Indicateur.php",true);
	// ne pas oublier ça pour le post
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	// ne pas oublier de poster les arguments
	// ici, l'id de l'auteur
	sel = document.getElementById('objectif');
	IdObjectif = sel.options[sel.selectedIndex].value;
	xhr.send("IdObjectif="+IdObjectif);
}
</script>

et la 2 eme page Indicateur.php contient du code jquery

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<script type="text/javascript" src="/gbo/js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".edit_tr").click(function()
{
var ID=$(this).attr('Id');
//$("#first_"+ID).hide();
$("#last_"+ID).hide();
//$("#first_input_"+ID).show();
$("#last_input_"+ID).show();
}).change(function()
{
var ID=$(this).attr('Id');
//var first=$("#first_input_"+ID).val();
var last=$("#last_input_"+ID).val();
var dataString = 'Id='+ ID +'&taux='+last;
//var dataString = 'Id='+ ID +'&annee'+first+'&taux='+last;
 
//$("#first_"+ID).html('<img src="images/load.gif" />'); // Loading image
//if(first.length>0&& last.length>0)
if(last.length>0)
{
$.ajax({
type: "POST",
url: "table_edit_ajax.php",
data: dataString,
cache: false,
success: function(html)
{
//$("#first_"+ID).html(first);
$("#last_"+ID).html(last);
}
});
}
else
{
alert('Enter something.');
}
 
});
 
// Edit input box click action
$(".editbox").mouseup(function() 
{
return false
});
 
// Outside click action
$(document).mouseup(function()
{
$(".editbox").hide();
$(".text").show();
});
 
});
</script>

lorsque j'exécute la 1ere page qui fait appel à 2eme le code de jquery ne fonctionne pas
par contre lorsque j'execute la 2eme page directement le code de jquery fonctionne
comment je peux fonctionner le code de jquery dans la page qui contient l'ajax

[benjyyyyy]

Tu peux pas juste poser ta balise script dans ton élément.

[Njörd]

Bonjour enamorada,

Je vais détailler un peu la réponse de benjyyy

Dans un site web, on utilise de manière général un template. Ce template défini de façon général la mise en forme minimal de ton site.
Exemple : l'en-tête (logo, barre de recherche, formulaire de connexion, ...), le menu, le corps ou va s'afficher le contenu de tes pages, le pied de page (copyright, liens sociaux, auteur, plan du site, contact, ...)

De ce fait, dans ce template, il y a tous les appels de fichiers dont tu as besoin : les balises de base du head (metas, title, autor, charset, ...), les fichiers CSS, les fichiers JavaScript principalement. (il y peu y avoir d'autres choses bien sur)

Si tu n'as pas de template, tu finis par copier/coller les mêmes bouts de code toujours en début de tes fichiers PHP / HTML.

Concrètement, pour ton problème, quand tu fais un appel JavaScript, toutes les fonctions du fichier que tu as appelé sont enregistrées dans une sorte de boîte que l'on appel le DOM (plus d'infos => ici). Grâce à cette boîte, le navigateur retrouve n'importe quelles fonctions et variables écrit dans ton fichier JavaScript.

De ce fait, en faisant bien ton appel JavaScript au tout début du chargement de tes pages (grâce au template) lorsque tu appelleras ton script de la page 2 dans ta page 1, tu auras bien l'appel à la librairie jQuery, ce qui fait que ça fonctionnera.

Vu que tu utilises jQuery dans ton projet, je te propose la fonction jquery.ajax qui te simplifiera la vie (plus besoin d'instancier soit même les objets XHR par exemple) => Une petit tutoriel d'introduction

[jreaux62]

Bonjour,
1/ d'abord, en effet, comme tu utilises déjà du jQuery dans le 2ème fichier, pourquoi ne pas l'utiliser aussi dans le 1er ??

2/ Dans le 2ème fichier (celui appelé via Ajax), intéresse-toi à : .on() jQuery

En conséquence, remplacer :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
$(".edit_tr").click(function()
{
// ...
}).change(function()
{
// ...
// Edit input box click action
$(".editbox").mouseup(function() 
{
// ...
// Outside click action
$(document).mouseup(function()
// ...

par :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
$(".edit_tr").on('click', function()
{
// ...
}).on('change', function()
{
// ...
// Edit input box click action
$(".editbox").on('mouseup', function() 
{
// ...
// Outside click action
$(document).on('mouseup', function()
// ...

Voire même remplacer :

Code :

$(".edit_tr").click(function()

par

Code :

$(document).on('click', '.edit_tr', function()

où $(document) est le "plus haut niveau" du DOM.

[enamorada]

Bonjour,

j'ai essayé de mettre le code de jquery de la 2eme page dans la 1ere page

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
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
$(document).ready(function()
{
$(".edit_tr").click(function()
{
var ID=$(this).attr('Id');
//$("#first_"+ID).hide();
$("#last_"+ID).hide();
//$("#first_input_"+ID).show();
$("#last_input_"+ID).show();
}).change(function()
{
var ID=$(this).attr('Id');
//var first=$("#first_input_"+ID).val();
var last=$("#last_input_"+ID).val();
var dataString = 'Id='+ ID +'&taux='+last;
//var dataString = 'Id='+ ID +'&annee'+first+'&taux='+last;
 
//$("#first_"+ID).html('<img src="images/load.gif" />'); // Loading image
//if(first.length>0&& last.length>0)
if(last.length>0)
{
$.ajax({
type: "POST",
url: "table_edit_ajax.php",
data: dataString,
cache: false,
success: function(html)
{
//$("#first_"+ID).html(first);
$("#last_"+ID).html(last);
}
});
}
else
{
alert('Enter something.');
}
 
});
 
// Edit input box click action
$(".editbox").mouseup(function() 
{
return false
});
 
// Outside click action
$(document).mouseup(function()
{
$(".editbox").hide();
$(".text").show();
});
 
});
 
function getXhr(){
	var xhr = null; 
	if(window.XMLHttpRequest) // Firefox et autres
		xhr = new XMLHttpRequest(); 
	else if(window.ActiveXObject){ // Internet Explorer 
		try {
			xhr = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			xhr = new ActiveXObject("Microsoft.XMLHTTP");
		}
	}
	else { // XMLHttpRequest non supporté par le navigateur 
		alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
		xhr = false; 
	} 
        return xhr;
}
 
/**
* Méthode qui sera appelée sur le click du bouton
*/
function go(){
	var xhr = getXhr();
	// On défini ce qu'on va faire quand on aura la réponse
	xhr.onreadystatechange = function(){
		// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
		if(xhr.readyState == 4 && xhr.status == 200){
			leselect = xhr.responseText;
			// On se sert de innerHTML pour rajouter les options a la liste
			document.getElementById('indicateur').innerHTML = leselect;
			document.getElementById("loader").style.display = "none";
		}
		else if (xhr.readyState < 4) 
		{
		        document.getElementById("loader").style.display = "inline";
		}
	}
 
	// Ici on va voir comment faire du post
	xhr.open("POST","Indicateur.php",true);
	// ne pas oublier ça pour le post
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	// ne pas oublier de poster les arguments
	// ici, l'id de l'auteur
	sel = document.getElementById('objectif');
	IdObjectif = sel.options[sel.selectedIndex].value;
	xhr.send("IdObjectif="+IdObjectif);
}

mais ça ne changera rien
car dans la 2eme et à partir du code de jquery ,j'essaye de modifier le contenu d'une cellule dans un tableau
lorsque je clique sur la cellule ,je ne peux pas visualiser la balise<input>
par contre lorsque j'execute la 2eme page ,la balise <input> sera lisible et meme je peux modifier .
je crois que l'ajax bloque la code jquery
comment je peux résoudre ce souci

2eme page

Code html :

1
2
3
<th id="<?php echo $id; ?>" class="edit_tr">
<span id="last_<?php echo $id; ?>" class="text"><?php echo $taux; ?></span> 
<input type="text" value="<?php echo $taux; ?>" class="editbox" id="last_input_<?php echo $id; ?>"/></th>

[jreaux62]

Tu ne sembles pas avoir tenu compte de mon message précédent...

[enamorada]

Non, j'ai bien appliqué votre message mais le problème est qu'il m'affiche cette erreur :

Uncaught TypeError: Object [object Object] has no method 'on'

C'est pour cela que je suis revenu en arrière avec la version qui marche sans erreur.

[jreaux62]

Et tu penses qu'on va pouvoir deviner ton code (pour "espérer" le corriger) ?

Dans un message précédent, j'ai déjà mis ce lien : .on() jQuery
Y as-tu jeté un oeil ?

.on( events [, selector] [, data], handler(eventObject) ) => version added: 1.7

Quelle est ta version de jQuery ?

Tu pourrais remplacer avantageusement :

Code :

<script type="text/javascript" src="/gbo/js/jquery.min.js"></script>

par :

Code :

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

[enamorada]

j'ai présenté le problème généralement

version jQuery JavaScript Library v1.5.2

Merci

[enamorada]

Bonjour,
avec la modification de la nouvelle ,je n'aurais pas l'erreur.
mais lorsque je clique sur la cellule ,elle ne changera pas en input
est ce que l'ajax peut déactiver le fonctionnement du code Jquery
Rq:le meme code sans ajax fonctionne très bien
Merci

[enamorada]

est ce que l'ajax peut déactiver le fonctionnement du code Jquery
car lorsque je clique sur la cellule ,elle ne changera pas en input ????

[enamorada]

j'ai trouvé à partir de ma recherche que je devrais changé l’évènement click par live

Code :

1
2
 
$(".edit_tr").click(function()

par

Code :

1
2
 
$(".edit_tr").live("click", function(){

mais rien n'a changé