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 :

Changement de boutons sans actualisation de la page


Sujet :

jQuery

  1. #1
    Membre à l'essai
    Femme Profil pro
    Apprentie Ingénieur
    Inscrit en
    Janvier 2012
    Messages
    16
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Côtes d'Armor (Bretagne)

    Informations professionnelles :
    Activité : Apprentie Ingénieur

    Informations forums :
    Inscription : Janvier 2012
    Messages : 16
    Points : 14
    Points
    14
    Par défaut Changement de boutons sans actualisation de la page
    -

    Bonjour,

    J'ai une table en page d'admin qui contient des utilisateurs temporaires qui demandent à rejoindre mon site. Dans chaque ligne, on trouve les informations sur l'utilisateur ainsi que deux boutons permettant de l'accepter ou le refuser :

    Code php : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <?php
        $registered_user = DB::getUserAccess()->registered_user()->select("id, login, long_name, email, description");
        foreach ($registered_user as $user){
        echo "<tr>";
        echo"<td>" . $user["login"] . "</td>";
        echo"<td>" . $user["long_name"] . "</td>";
        echo"<td>" . $user["email"] . "</td>";
        echo"<td>" . $user["description"] . "</td>";
        echo "<td><a id='#acceptBtn' class='btn btn-warning' value='".$user['id']."'><i class='icon-ok icon-white'></i></a>
        &nbsp; &nbsp;&nbsp;<a id='#declineBtn' class='btn btn-danger' value='".$user['id']."'><i class='icon-remove icon-white'></i></a>
        <img style='visibility:hidden' id='img_accepted' src='images/ic_check.png' alt='accepted'>
        <img style='visibility:hidden' id='img_declined' src='images/ic_cancel.png' alt='declined'></td>";
        echo "</tr>";
        }
        ?>

    J'ai un code php dans la classe Admin qui permet de faire un traitement côté serveur :

    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
    static public function accept_new_user($id){
        $userDb = DB::getUserAccess();
        // récupération des données utilisateur de la table temporaire
        $user_data = $userDb->registered_user()->where("id = ?", $id)->fetch();
        // création du nouvel utilisateur
        $new_user = array(
        "email" => $user_data["email"],
        "login" => $user_data["login"],
        "md5" => md5('toto'),
        "long_name" => $user_data["long_name"],
        "last_connected" => null
        );
        // insertion des données dans la base
        $result = $user->insert($new_user);
        // suppression de l'utilisateur de la table registered_users
        $user_DB->$registered_user[$id]->delete();
        }
    Pour faire le lien, j'ai un script qui, dès qu'on clique sur le bouton accepter ou refuser, exécute la fonction php, cache les deux boutons de choix et affiche une icône check ou pas selon la décision :

    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
    $("#acceptBtn").click(function(e){
        e.preventDefault();
        $.ajax({
        type : 'POST',
        url: 'Admin::accept_new_user',
        data: $(this).attr('value'),
        success : function(){
        $($(this).attr('value')).hide();
        $('#img_accepted').show();
        },
        error: function(){
        alert("ERREUR");
        }
        });
        return false;
        });
    Jusqu'à présent, je clique sur le bouton accepter mais rien ne se produit... Je n'arrive vraiment pas à trouver l'erreur.
    Si quelqu'un peut m'aider, je lui en serais éternellement reconnaissante. ^^

    Merci d'avance !

  2. #2
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Points : 91 220
    Points
    91 220
    Billets dans le blog
    20
    Par défaut
    C'est le B.A.BA...
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <a id='#acceptBtn' ...>
    Donc, ton id, c'est exactement #acceptBtn.
    Or, pour sélectionner un id avec jQuery, la syntaxe correcte est celle de CSS : l'id recherché précédé du signe #.
    Donc quand tu fais
    tu recherches l'élément dont l'id est acceptBtn, condition que ne rempli pas l'élément dont l'id est #acceptBtn. Bref, tu ne sélectionnes aucun élément.

    En plus, un id tel que tu l'écris n'est pas valide...

  3. #3
    Membre à l'essai
    Femme Profil pro
    Apprentie Ingénieur
    Inscrit en
    Janvier 2012
    Messages
    16
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Côtes d'Armor (Bretagne)

    Informations professionnelles :
    Activité : Apprentie Ingénieur

    Informations forums :
    Inscription : Janvier 2012
    Messages : 16
    Points : 14
    Points
    14
    Par défaut
    Bonjour et merci pour ta réponse...
    En effet, c'était une erreur de ma part, mais même en changeant, il y a quelque chose d'autre qui cloche..
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <td><a id='acceptBtn' class='btn btn-warning' value='".$user['id']."'><i class='icon-ok icon-white'></i></a>

  4. #4
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Points : 91 220
    Points
    91 220
    Billets dans le blog
    20
    Par défaut
    Une balise <a> n'a pas d'attribut value. Dans ce cas, il vaut mieux passer par les attributs personnalisés data-* qui eux sont conformes et facilement manipulables avec jQuery :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <a id='acceptBtn' class='btn btn-warning' data-value='".$user['id']."'><i class='icon-ok icon-white'></i></a>
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    data: $(this).data('value'),
    Et ne pas oublier que la console de développement (touche F12) est très utile pour connaitre les erreurs commises...

Discussions similaires

  1. Exécution d'un script sans actualisation de la page
    Par rani20 dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 23/06/2012, 11h48
  2. Mettre une alerte sans actualiser la page.
    Par cinou01 dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 16/03/2009, 14h30
  3. Créer un bouton sans changement de position si insertion de ligne
    Par asayeh dans le forum Macros et VBA Excel
    Réponses: 2
    Dernier message: 18/04/2008, 14h20
  4. actualiser une liste deroulante sans actualiser la page
    Par mohcultiv dans le forum Général JavaScript
    Réponses: 5
    Dernier message: 12/02/2008, 11h24
  5. Désactiver le bouton actualiser pour une page web
    Par bellemlih dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 01/12/2007, 09h12

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