Discussion :

[pierrot10]

Bonjour é tous,

J'ai un petit problème dont voici l'explication.
Dans mon head j'ai ceci

Code :

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

1
2
3
4
5
$(document).ready(function() {
	$(".submit").click(function() {
		alert($(this).attr("id"));
	});
});

Après que ma page soit chargée, j'ai un formulaire qui va afficher les donnée de la base de donnée en utilisant ajax.

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
function getXhr(){
	//Création de l'objet XmlHttpRequest
	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;
}
 
function get_batteries(action){
 
	//http://siddh.developpez.com/articles/ajax/
	var xhr = getXhr(); // INSTENTIEE IN js/getXhr.js
	// 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 == 3){
			$('#inProgress').show();
		}
		if(xhr.readyState == 4 && xhr.status == 200){
			leselect = xhr.responseText;
			// On se sert de innerHTML pour rajouter les options a la liste
			$('#inProgress').hide();
			$('#firstRow').show();
			$('#firstRow').siblings().remove();
			$('#firstRow').after(leselect);
		}else{
		}
	}
 
	// Ici on va voir comment faire du post
	if(action=="check"){
		xhr.open("POST","/manager/templates/naoux/xmlhttprequest/check_battery.sql.php",true);
	}else if(action=="update"){
		xhr.open("POST","/manager/templates/naoux/xmlhttprequest/update_battery.sql.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
	marque = document.getElementById('fmarque').value;
	categorie = document.getElementById('fcategorie').value;
	carburant = document.getElementById('fcarburant').value;
 
	//alert(categorie);
 
	xhr.send("marque="+marque+"&categorie="+categorie+"&carburant="+carburant);		
}

Ca fonctionne bien.

Sauf que les données affichées sont entre les balises d'un formulaire.
Pour tester, j'ai mis un formulaire en dehor de mon div#firstRow et un autre, dedans.

Code html :

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

1
2
3
4
5
6
7
8
9
10
<form>
<input class="submit" type="button" id="2" value="Sauve1" />
</form>
 
<form>
<div id="firstRow">
<!-- Ceci est le resultat de mon ajax getXhr() -->
<input class="submit" type="button" id="3" value="Sauve2" />
</div>
</form>

Donc en résumé,
quand je clique sur "Sauve1", il m'affiche toujours "2".
Apres que ma page soit chargée, après que j'ai cliquer sur le boutton qui va afficher les données dans div#firstRow et qu'ensuite, je clique sur "sauve2", là rien ne se passe

Je pense que c'est parce que ma page a deja chargé les éléments avant que le contenu qui se trouve à l'intérieur de div#firstRow ne soit chargé.

Comment puis-je alors faire en sorte que le contenu affiché grâce à AJAX soit considéré par

Code :

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

1
2
3
4
5
$(document).ready(function() {
	$(".submit").click(function() {
		alert($(this).attr("id"));
	});
});

Merci pour vos lumières!!

[Meyfarth]

Salut,

Déjà, je vois que tu utilises jQuery : pourquoi ne pas l'utiliser partout ? Tu pourrais aisément t'affranchir de tout le "bordel" qu'est le AJAX manuel (getXHR et tout ça) en passant par $.ajax(), voire $.ajaxq() (ce dernier nécessite un plugin).

Pour exemple :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
$.ajax({
    type: 'POST',
    url: 'TON URL',
    data: 'champ1=val1&champ2=val2&champ3=val3',
    beforeSend: function(){
        // Action à réaliser avant l'envoi de la requête, comme afficher un bouton de chargement
    },
    success: function(data){
        // Action à réaliser lors du retour de la fonction. "data" contient le retour ajax (comme responseText)
    }
})

ajaxq est un plugin permettant de faire des "queues" ajax et ne pas envoyer toutes les requêtes simultanément.

Ton AJAX pourrait être beaucoup simplifié :

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
function get_batteries(action){
	$.ajax({
        	type: 'POST',
        	url: '/manager/templates/naoux/xmlhttprequest/'+action+'_battery.sql.php',
        	data: 'marque='+$('#fmarque').val()+'&categorie='+$('#fcategorie').val()+'&carburant='+$('#fcarburant').val(),
        	beforeSend: function(){
        	    $('#inProgress').show();
        	},
        	success: function(data){
        	    $('#inProgress').hide();
        	    $('#firstRow').show().siblings().remove()
        	    // data contient "leselct"
        	    $('#firstRow').after(data);
        	}
    	});
}

Si tu ne veux pas prendre le risque de casser ton code, restes sur ton ancienne méthode

Et ensuite, pour répondre à ta question : les évènements définis au chargement avec jQuery ne s'appliquent pas aux éléments ajoutés après le chargement (que ce soit de l'AJAX ou de l'ajout dans le DOM).
Pour que ça prenne effet, tu peux utiliser la méthode "live", qui va attribuer l'évènement à tous les éléments correspondants aux critères du sélecteur, même ceux ajoutés après. Le code suivant attribuera à tous les éléments ayant la class "submit" la fonction qui affichera une alerte :

Code :

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

1
2
3
$(".submit").live('click',function() {
	alert($(this).attr("id"));
});

Petit conseil pour avoir bouffé des "alert" ==> essaies d'utiliser firefox et son plugin firebug. Ainsi, au lieu de faire des "alert" qui t'arriveront dans la tête sans arrêt, tu peux faire :

Code :

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

1
2
// Le "window.console &&" permet de s'assurer que la console existe et évite d'avoir une erreur de script si ce n'est pas le cas
window.console && console.log('XXX');

Ca affichera 'XXX' dans la console firebug, et c'est bien moins pénible que les alert, surtout si tu en as plusieurs à la suite !