page suivante avec ajax

Par AaFrederic Husson, il y a 8 ans

Javascript

bonjour,
j'ouvre un div caché qui m'affiche des profis
quand je clique sur suivant une première fois ma liste de profil est bien mise à jour
si je clique une deuxieme fois c'est toute la page qui est rechargé sans utiliser ajax
mon javascript:

$(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) { } }); })); });

la page profil

<div id="listea"> <?php include "".$_SERVER['DOCUMENT_ROOT']."/include/liste_amis.php"; ?> </div>

el la page qui affiche les profils et les mets à jour

<div class="carou_liste"> <?php $limite_liste = $_GET['limite']; $nombre_liste = 12; if (!$limite_liste) { $limite_liste = 0; } $i_liste = 0; $select_liste = "SELECT COUNT(*) FROM membres"; $result_liste = mysql_query($select_liste) or die ('Erreur : '.mysql_error()); $row_liste = mysql_fetch_row($result_liste); $total_liste = $row_liste[0]; $select_liste = "SELECT pseudo,photos,sexe,naissance,ville,pays FROM membres ORDER BY id DESC limit ".$limite_liste.",".$nombre_liste.""; $result_liste = mysql_query($select_liste) or die ('Erreur : '.mysql_error()); $lien_liste = "init=0"; echo '<ul class="carousel2">'; while($data_liste = mysql_fetch_array($result_liste)) { $age = $data_liste['naissance']; //$age = date('Y/m/d', strtotime(str_replace('-', '/', $age))); $age = strtotime($age); $maintenant = time(); $age = $maintenant-$age; $age = $age/60/60/24/365; $age = floor($age); if ($i_liste > 0 && $i_liste % 6 == 0) { echo '</ul><ul class="carousel_liste2">'; } echo '<li>'; ?> <div class="carousel_liste"> <a href=""> <?php if ($data_liste['photos'] == 'non') { if ($data_liste['sexe'] == 'Femme') { // echo "Femme"; echo '<img src="/photos/femme.jpg" alt="">'; } if ($data_liste['sexe'] == 'Homme') { // echo "Homme"; echo '<img src="/photos/homme.png" alt="">'; } } else { $recup_photo = mysql_query("SELECT adresse FROM photos WHERE pseudo='".$data_liste['pseudo']."'") or die (mysql_error()); list($photo) = mysql_fetch_row($recup_photo); echo '<img src="/photos/'.$photo.'" alt="">'; } ?> </a> <div class="info"> <h3><?php echo $data_liste['pseudo']; ?></h3><br> <div class="connect"></div> <div class="hidden"> <?php echo $age; ?> ans<br><?php echo $data_liste['ville']; ?><br><?php echo $data_liste['pays']; ?> <br><br> <button class="btn">Visiter</button> </div></div></div> <?php echo"</li>"; $i_liste++; } echo "</ul>"; $limitesuivante_liste = $limite_liste + $nombre_liste; $limiteprecedente_liste = $limite_liste - $nombre_liste; ?> </div> <div class="navigation_liste"> <?php echo $_GET['limite']; ?> <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> <?php if($limite_liste != 0) { //echo '<a href="?'.$lien_liste.'&limite='.$limiteprecedente_liste.'"><div class="navigation_liste_left"></div></a>'; } if($limitesuivante_liste < $total_liste) { //echo '<a id="listea_suivant" href="?'.$lien_liste.'&limite='.$limitesuivante_liste.'"><div class="navigation_liste_right"></div></a>'; } ?> </div>

11 réponses

Lartak, il y a 8 ans

Bonsoir.
C'est tout à fait normal, puisque au premier chargement de page les id sont existante dans le DOM, mais pas lors du chargement en ajax, il te faut donc rebinder les ID aprés le chargement en ajax.
Pour ceci ce n'est pas compliqué, il te suffit par exemple de faire :

jQuery(document).ready(function ($) { $('#listea').on('submit', '#precedent, #suivant', function(e) { e.preventDefault(); var $form = $(this); $.ajax({ url: 'include/liste_amis.php', method: 'GET', dataType: 'html', data: $form.serialize() }).then(function (data) { $('#listea').html(data); }).catch(function (error) { console.log(error); }); }); });

De cette manière tes requêtes ajax seront autant effectuées au premier chargement de la page que suites aux chargements suivants via ajax.

AaFrederic Husson, il y a 8 ans

un grand merci ça fonctionne impec

AaFrederic Husson, il y a 8 ans

par contre j'ai essayé de reproduite la même chose en utilisant la fonction load mais la ça fonctionne pas la page se recharge

voici mon code:

<a href="page1.html" id="ext" class="ext">Mon portfolio</a> <script> jQuery(document).ready(function ($) { $('#ext').on('click', '#ext', function(e) { e.preventDefault(); var url = $(this).prop('href'); $('body').append('<div id="ajax-load-element-wrapper" style="display:none;"><div id="hopla"></div></div>'); $('#hopla').load(url, function() { $.colorbox({ href: '#hopla', width: 960, height: 400, inline: true, opacity: .7 }); }); }); }); </script>
Lartak, il y a 8 ans

Bonjour.
Je te conseille vivement de regarder comment fonctionne exactement la fonction on de jQuery, car là tu es en train de faire n'importe quoi avec et c'est normal que ça ne fonctionne pas : Tutoriel Vidéo jQuery » jQuery.on() et.

AaFrederic Husson, il y a 8 ans

vaec ce code ça fonctionne mais qu'une seule fois:

<a href="page1.html" id="ext" class="ext">Mon portfolio</a> <script> $(document).ready(function() { $("body").on('click', '.ext',function(event) { event.preventDefault(); var url = $(this).prop('href'); $('body').append('<div id="ajax-load-element-wrapper" style="display:none;"><div id="hopla"></div></div>'); $('#hopla').load(url, function() { $.colorbox({ href: '#hopla', width: 960, height: 400, inline: true, opacity: .7 }); }); }); }); </script>
Lartak, il y a 8 ans

Quel est ton problème exactement ?
Est-il lors du click sur le lien ou bien sur la fonction load ?
Car d'après ce que je peux voir, lors du click sur le lien tu insère dans la page un élément HTML avec l'ID hopla sauf que tu ne le supprimes à aucun moment, donc à chaque click tu recrées c'est élément avec cet ID, sauf qu'un ID doit être unique.

AaFrederic Husson, il y a 8 ans

donc quand je charge ma page et que je clique sur mon lien j'ouvre une colorbox
ensuite quand je la ferme et que je veux l'ouvrir à nouveau le clique reste inactif

AaFrederic Husson, il y a 8 ans

en fait l'url n'est plus présente

Lartak, il y a 8 ans

Donc au lieu d'utiliser $(this).prop('href'); essaies plutôt $(this).attr('href');.

AaFrederic Husson, il y a 8 ans

j'avais essayé déjà mais la c'est la colorbox qui ne veux plus se réafficher une seconde fois

Lartak, il y a 8 ans

Tu devrais penser à supprimer l'élément ayant l'ID ajax-load-element-wrapper avant d'en afficher un second, il ne faut pas oublier qu'un ID doit être unique.
Tu devrais donc faire quelque chose comme :

event.preventDefault(); var loader = 'ajax-load-element-wrapper'; if ($('#' + loader)[0]) { $('#' + loader).remove(); } $('body').append('<div id="' + loader + '" style="display:none;"><div id="hopla"></div></div>'); // suite du code