page suivante avec ajax
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
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.
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>
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.
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>
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.
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
j'avais essayé déjà mais la c'est la colorbox qui ne veux plus se réafficher une seconde fois
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