IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Bouton et rafraîchissement en AJAX [AJAX]


Sujet :

jQuery

  1. #1
    Candidat au Club
    Homme Profil pro
    Lycéen
    Inscrit en
    Octobre 2015
    Messages
    2
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Lycéen

    Informations forums :
    Inscription : Octobre 2015
    Messages : 2
    Points : 4
    Points
    4
    Par défaut Bouton et rafraîchissement en AJAX
    Bonjour,
    Je suis confronté à un petit problème, en effet, je ne connais quasiment rien à AJAX mais je suis obligé de l'utiliser pour mon problème.
    J'ai un système de "J'aime" d'article mais cependant lorsque l'on clique sur le bouton j'aime, ça rafraîchit la page, ce que je ne veux pas.
    J'ai donc trouvé et modifier un bout de code pour répondre à ma demande, ça marche mais qu'une fois. C'est à dire que le premier clique marche bien (l'affichage du bouton et du nombre de J'aime change) mais lorsque je reclique sur le bouton rien ne se passe. Je dois donc rafraîchir pour pouvoir à nouveau aimer/ne plus aimer. Auriez-vous une solution ?

    Voici mon code jQuery :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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
    $(document).ready(function() {
        //au click sur le lien j'aime
        $(".l_like").click(function() {
            //on recupere la valeur de l'attribut href 
     
            var req = $(this).attr("name");
     
            //requête ajax, appel du fichier like.php
            $.ajax({
                type: "GET",
                url: req,
                dataType: "html",
                //affichage de l'erreur en cas de problème
                error: function(msg, string) {
                    alert("Error !: " + string);
                },
                success: function(data) {
                    $("#wrap_like").fadeOut(20);
                    $("#wrap_like").load("#wrap_like #contain_like");
                    $("#wrap_like").fadeIn(20);
                }
     
     
            });
            return false;
        });
    })
    Mon affichage HTML :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <div id="wrap_like">
       <div id="contain_like">
          <p>Ce tutoriel vous a été utile ? Alors aimez-le !</p>
          <div id="contain_btn_like">
             <span id="nbr_like"><?php echo $pagetutos['likes']?> J'aime</span>
             <?php 
                isLike($idTuto, $_SESSION['id']); 
                ?>
          </div>
       </div>
    </div>

    Merci d'avance !

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 119
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 119
    Points : 44 954
    Points
    44 954
    Par défaut
    Bonjour,
    tu pourrais nous en dire un peu plus sur la façon dont tu as réglé ton problème ?

    Merci d'avance.

  3. #3
    Candidat au Club
    Homme Profil pro
    Lycéen
    Inscrit en
    Octobre 2015
    Messages
    2
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Lycéen

    Informations forums :
    Inscription : Octobre 2015
    Messages : 2
    Points : 4
    Points
    4
    Par défaut
    Il fallait utiliser .live('click',function() au lieu de click et event.preventDefault(); au lieu de return false; !

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    $(document).ready(function() {
        $("#l_like").live('click', function() {
            var req = $(this).attr("name");
            $.ajax({
                type: "GET",
                url: req,
                dataType: "html",
                //affichage de l'erreur en cas de problème
                error: function(msg, string) {
                    alert("Error !: " + string);
                },
                success: function(data) {
     
                    $("#wrap_like").fadeOut(1);
                    $("#wrap_like").load("#wrap_like #contain_btn_like");
                    $("#wrap_like").fadeIn(500);
     
                    event.preventDefault();
                }
            });
        });
    });

  4. #4
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 119
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 119
    Points : 44 954
    Points
    44 954
    Par défaut
    Merci pour le retour.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 3
    Dernier message: 06/07/2009, 11h18
  2. [AJAX] bouton et lien pour ajax
    Par kaking dans le forum Général JavaScript
    Réponses: 0
    Dernier message: 19/01/2009, 10h01
  3. [UpdatePanel] comment exclure un bouton du panneau ajax
    Par petitchat dans le forum ASP.NET
    Réponses: 3
    Dernier message: 04/06/2007, 16h46
  4. [AJAX] Ajax + bouton type image
    Par Phenomenium dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 11/12/2006, 09h38

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo