ajax ne marche qu'une fois

Version imprimable

bonjour,

j'ai une liste de profils sur plusieurs pages

je souhaite passer les pages sans recharger avec ajax

au 1er clique sur suivant ça fonctionne mais apres la page se recharge

J'ai beau chercher mais je ne trouve aucune solution

voici mon js

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
$(document).ready(function (e) {
	$("#precedent").on('submit',(function(e) {
 
		e.preventDefault();
		$.ajax({
        	url: "/include/liste_amis.php",
			type: "GET",
			data:  $(this).serialize(),
			success: function(data)
		    {
			$("#listea").html(data);
			},
		  	error: function() 
	    	{
				console.log(error);
                alert(error);
 
	    	}, 
			complete : function(resultat, statut)
			{
			}
 
	   });
	}));
});
 
 
$(document).ready(function (e) {
	$("#suivant").on('submit',(function(e) {
 
 
		e.preventDefault();
		$.ajax({
        	url: "include/liste_amis.php",
			type: "GET",
			data:  $(this).serialize(),
			success: function(data)
		    {
			$("#listea").html(data);
			},
		  	error: function() 
	    	{
				console.log(error);
                alert(error);
 
	    	}, 
			complete : function(resultat, statut)
			{
			}
 
	   });
	}));
});

voici mon code pour passer les pages:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
		  <div class="navigation_liste">
 
<form id="precedent" action="" method="get">
		<input type="hidden" name="init" value="<?php echo $lien_liste; ?>">
		<input type="hidden" name="limite" value="<?php echo $limiteprecedente_liste; ?>">
		<button type="submit" class="navigation_liste_left"></button>
		</form>
 
 
<form id="suivant" action="" method="get">
		<input type="hidden" name="init" value="<?php echo $lien_liste; ?>">
		<input type="hidden" name="limite" value="<?php echo $limitesuivante_liste; ?>">
		<button type="submit" class="navigation_liste_right"></button>
		</form>
 
</div>

Salut,

Si ton code pour passer les pages est inclus dans le code que tu inclus en ajax, il faut réinitialiser les comportements sur tes boutons après le retour ajax car ce sont des nouveaux éléments du DOM et ils ne sont pas concernés par les premiers comportements que tu as définis. Donc sur le principe, tu peux faire un truc dans le genre :

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
$(function () {
 
function precedent()
{
	$("#precedent").on('submit',(function(e) {
		e.preventDefault();
		$.ajax({
        	url: "/include/liste_amis.php",
			type: "GET",
			data:  $(this).serialize(),
			success: function(data)
		    {
			$("#listea").html(data);
                        // Initialise les comportements sur les éléments de "data" nouvellement inclus
                        suivant();
                        precedent();
			},
		  	error: function() 
	    	{
				console.log(error);
                alert(error);
 
	    	}
	   });
	}));
}
 
 
function suivant()
{
         $("#suivant").on('submit',(function(e) {
		e.preventDefault();
		$.ajax({
        	url: "include/liste_amis.php",
			type: "GET",
			data:  $(this).serialize(),
			success: function(data)
		    {
			$("#listea").html(data);
                        // Initialise les comportements sur les éléments de "data" nouvellement inclus
                        suivant();
                        precedent();
			},
		  	error: function() 
	    	{
				console.log(error);
                alert(error);
 
	    	}
	   });
	}));
}
 
 
// Initialise les comportements au chargement de la page
suivant();
precedent();
 
});

(code pas testé, complété à partir de ton code initial)

23/12/2017, 16h42
Invité
Bonjour,

:nono: l'explication est bonne, la solution moins... :aie:

La méthode simple est de "raccrocher"les éléments à un élément DEJA présent dans le DOM.
Comme 'body' :
Code:

1 2 3 $('body').on('submit', '#precedent', function(e) { .... });
Et bien sûr, le code jQuery doit être en dehors du div #listea.
23/12/2017, 17h24
alf233

Que veux tu dire par:

le code jQuery doit être en dehors du div #listea ?

j'avais essayé de mettre mes bouttons precedent et suivant en dehors du div listea mais ça fonctionne qu'une fois

apres plus rien mon boutton suivant est bloqué aucune action possible et je perd ma variable limite apparemment
car le precedent me retourne $limite en - donc erreur sql