rafraichissment requete ajax [Résolu]

omelhor · 23/06/2011, 19h36

Bonjour,

J'affiche des news, ou l'utilisateur a la possibilité de choser une case pour faire disparaitre cette news.
Cette news est supprimé via un requete ajax, qui recharge par la suite mon bloc div #offreEmploi, avec le nouveau contenu.

Mon problème c'est qu'une fois le nouveau contenu chargée, lors du clic sur une autre case a cochée, il ne se passe rien

Pouvez-vous m'aider svp ?

Bloc javascript (placé entre le <head> de la page :

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
 
  <script type="text/javascript">
	function etat(valeur) {   
		 $.ajax({
			type: 'POST',
			url: 'etat.php',
			data: "etat="+ valeur,
			dataType:'text',
			success: actualiserPage,
			error: function() {alert('Erreur serveur');}
				  }); 
	  }
 
	 function  actualiserPage(response){
		$("#offreEmploi").html(response);
		//alert(response);
	 }
 
	$(document).ready(function() {
		$('.cvouinon').change(function() {
			etat($(this).val());
		});
 
	});
  </script>

Exemple de contenue de ma page 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
26
27
28
29
30
<table style="width:936px;margin-bottom:25px;">
	<tr>
		<td>Titre:
			<a href="http://dddddddddddddd" target='_blank'>
			<h2 style="display:inline;font-size:16px;font-weight:bold">Titre 1</h2>
			</a>
		</td>
	</tr>
	<tr>
		<td>
			<label for name="CVoui">CV Oui</label>
			<INPUT class="cvouinon" id="26" type="checkbox" name="CVoui" value="CVoui_26"/>
		</td>
	</tr>
</table>
<table style="width:936px;margin-bottom:25px;">
	<tr>
		<td>Titre:
			<a href="http://dddddddddddddd" target='_blank'>
			<h2 style="display:inline;font-size:16px;font-weight:bold">Titre 2</h2>
			</a>
		</td>
	</tr>
	<tr>
		<td>
			<label for name="CVoui">CV Oui</label>
			<INPUT class="cvouinon" id="26" type="checkbox" name="CVoui" value="CVoui_26"/>
		</td>
	</tr>
</table>

Merci beaucoup

nadox · 23/06/2011, 20h13

Bonjour,

Ce code :

Code :

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

1
2
3
4
 
        $('.cvouinon').change(function() {
            etat($(this).val());
        });

est éxécuté seulement sur les éléments qui ont la classe .cvouinon présent dans le document à son chargement.

Il faudrait le faire pour chaque nouveau contenu récupéré en Ajax, puisque c'est lui qui associe la case à cocher avec la fonction Ajax...

Bovino · 23/06/2011, 23h03

Un grand classique

Tellement classique qu'il est même traité dans la

Pourquoi les événements disparaissent après une mise à jour avec AJAX ?.

La solution est d'utiliser la méthode jQuery live()

omelhor · 24/06/2011, 14h18

Merci bcp, ca fonctionne

23/06/2011, 23h03	#3
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 807 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 807 Points : 35 797 Points : 35 797	Un grand classique Tellement classique qu'il est même traité dans la Pourquoi les événements disparaissent après une mise à jour avec AJAX ?. La solution est d'utiliser la méthode jQuery live() __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

24/06/2011, 14h18	#4
omelhor Membre habitué Inscription : septembre 2004 Messages : 244 Détails du profil Informations forums : Inscription : septembre 2004 Messages : 244 Points : 110 Points : 110	Merci bcp, ca fonctionne
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email