Bonjour,
j'ai un lien dont id vaut le numéro du film dans le bdd mysql -> à l'intérieur d'un slide 1.
echo '<a href="" id='.$data'id'].'>Balada triste</a>';
Via jquery lorsque je clique sur le lien <a> je masque slide 1 et anime slide 2.
$(function(){
$("a").click(function(){
var js_id = $(this).attr("id");
//Animation en fadeIn/fadeOut
$('#slide1').fadeOut(500);
$('#slide2').delay(500).fadeIn(500);
return false;
});
});
Je souhaite récupérer cette id dans une variable jquery (js_id).
Et passer la variable dans le php du slide 2 afin d'afficher le contenu correspondant à id. (comme cela ce fait via url avec $_GET)
Voilà c'est la que je bloque je ne sait pas comment faire !!
Merci d'avance pour vos idées...
Ok j'essaie en Ajax mais je bloque :
$(function(){
$("a").click(function() {
$.ajax({
type: "POST",
url: "test.php?id=$(this).attr('id')",
cache: false,
success: function(){
//Animation en fadeIn/fadeOut
$('#slide1').fadeOut(500);
$('#slide3').delay(500).fadeIn(500);
}
});
return false;
});
});
Puis je récupère le tout en php :
<?php
$id = $_GET'id'];
echo $id ;
?>
J'ai le message : id n'est pas définit , pourquoi??
Ne met pas $(this).attr('id') direct dans le param url mais prend le avant en fesant:
var id = $(this).attr('id');
Puis ton url sera:
url: "test.php?id="+id,
Et puis si dans ta fonction ajax tu met ton type à POST n'essaye pas de récupérer ta variable en GET
J'ai fais les différentes modifications :
J'ai le message : id n'est pas définit, pourquoi??
Et lorsque j'indique une page différente testother.php (avec le $_POST).
Portant je devrais pouvoir récupérer les informations sur la même page (test.php) ??
Fait un alert de id avant le ajax pour voir s'il la récupère.
Je ne crois pas que tu puisse appeler la page ou tu te trouve en ajax on utilise toujours une page différente
Je viens de comprendre le fonctionnement de ajax. Et créé un système de navigation, juste là tous ce passe bien.
Le problème est que lorsque par exemple je clique sur un lien (avec un alert("hello"); pour faire simple) après avoir naviguer sur les différentes pages
-> le clique n'affiche pas le alert mais recharge la première page.
<u>Je pense que cela provient de la fonction ajax pourtant :</u>
et charge le donnée avec html()
Merci d'avance pour votre aide car je ne trouve pas la solution...
$(function(){
page=$(this).attr("id");
$.ajax({
url: "pages/"+page,
cache: false,
success:function(data){
$("#container").empty();
$("#container").html(data);
},
})
return false;
});
});
Tu n'as pas de click dans le code que tu nous montre et essaye avec l'événement live de jQuery
Le click est bien prévu dans la fonction. Le live de jQuery me permet de faire ce que je veux :
Après quelques cherche sur le net :
"Il faut mettre le scripts dans une fonction (init par exemple) et l'appeler dès que la page est chargée.
Et lors du chargement Ajax il relancer cette fonction après le load Ajax du contenu."
SI j'ai compris il faut réassigner l'évènement "clic" à tous les nouveaux lien chargés , mais je n'arrive pas à mettre le tout en place, help !!!
J'ai suivi le tuto http://www.grafikart.fr/tutoriels/jquery/navigation-ajax-33 le problème est soulever par negurah et Bill.
$(document).ready(function(){
$(function(){
$(".navigation a").click(function(){
page=$(this).attr("id");
num=$(this).attr("num");
alert("1");
$.ajax({
url: "pages/"+page,
cache: false,
success:function(data){
afficher(html);
},
error:function(XMLHttpRequest,textStatus, errorThrown){
afficher("erreur lors du chagement de la page");
},
})
return false;
});
});
function afficher(data){
$("#container").fadeOut(500,function(){
$("#container").empty();
$("#container").append(data);
$("#container").fadeIn(1000);
})
}
});
Merci de ton aide car après 2 jours de recherche et essai je n'est toujours pas réussi !!!
Alors là y a un truc énorme qui me choque dans succes tu met data et ensuite tu fais afficher(html) mais d'où vient la variable html car je la vois nul part ailleurs
Pardon c'est bien une une fonction html dans le succes Ajax :
success:function(html){
afficher(html);
Mai le problème reste entier, je n'est toujours pas solutionner.
Alors c'est dans ta fonction afficher que ça va pas si au lieu de faire un empty tu fais html('')
Non toujours pas solutionner, j'ai repris à zéro le tuto : http://www.grafikart.fr/tutoriels/jquery/navigation-ajax-33 mais toujours pareil : Negurah et Bill parle de mon souci en commentaire du tuto -> réassigner jQuery dans les pages Ajax chargées.
As tu essayé le code de Fedora?
Tu veux faire quoi exactement: apporter le même comportement à tes liens dans tes pages qui sont chargé en ajax?
$(function(){
$("a").click(function(){
// Au clic, je cache le cadre
$("#slide1").fadeOut();
var js_id = $(this).attr("id");
// On envoi la requête AJAX
$.getJSON(
// La page php : tu feras un echo de ton résultat à la fin
'ici_la_page.php',
// Là c'est ton GET que va recevoir ici_la_page.php
{id: js_id},
// En cas de succès, le echo de ton PHP est stocké dans data...
function(data){
$('#slide1').empty();
$('#slide1').append(data);
$('#slide1').fadeIn();
}
});
});
Donc ça c'est une requête en json, et sur ta page ici_la-page.php tu auras un truc du style :
<?php
$id=$_GET'id'];
$code = $id;
echo json_encode($code);
?>
le json_encode permet d'encoder la variable $code ( PHP ) en javascript, et ensuite ça arrive dans data.
Là dans l'exemple tu auras en retour l'id trouvé.