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...

20 réponses


Utilise ajax

cede
Auteur

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

cede
Auteur

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

cede
Auteur

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>

  • je vide l'élément avec empty()
  • 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

cede
Auteur

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 !!!

Montre moi ton code complet js et html

cede
Auteur

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

cede
Auteur

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.

Et si tu fais un alert(html) dans le success tu obtiens quoi?

cede
Auteur

Avec le alert(html) j'obtiens le code de la page souhaité : <div id="slide1"> <h2> ....

Alors c'est dans ta fonction afficher que ça va pas si au lieu de faire un empty tu fais html('')

cede
Auteur

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?

cede
Auteur

Oui exactement

Et ben Grafikart donne une solution dans les commentaires après le commentaire de Fedora

$(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é.