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 :

Tableau Bootstrap Editable Update/Ajax


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Homme Profil pro
    Étudiant
    Inscrit en
    Avril 2017
    Messages
    44
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Hauts de Seine (Île de France)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Industrie

    Informations forums :
    Inscription : Avril 2017
    Messages : 44
    Par défaut Tableau Bootstrap Editable Update/Ajax
    Bonjour,

    J'ai réalisé à l'aide de Bootstrap un tableau éditable qui affiche des données de ma base de données. La seconde partie consiste à réaliser une mise à jour de ma BDD (MYSQL) directement en modifiant les cellules du tableau.

    Alors je sais le faire sur un tableau simple html via cette méthode :
    Code html : 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
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    <!DOCTYPE html> 
    <html> 
    <head> 
    <meta charset="utf-8"> 
    <script src="./js/jquery.js"></script> 
    <script> 
    $(document).ready(function() 
    {  
     
     
     $("td").click(function()  
      { 
       if( $(this).attr("contenteditable") == "true") 
       {    
        // le"id" du td doit contenir l'id de la BDD 
        // le "name" doit contenir le nom du champ à modifier 
         
        var contenu_avant = $(this).text(); 
                    var id_bdd = $(this).attr("id"); 
                    var champ_bdd = $(this).attr("name"); 
        //alert("avant =" + contenu_avant); 
                     
        $(this).blur(function() 
            { 
             var contenu_apres = $(this).text(); 
             //alert("contenu apres = " + contenu_apres); c
             
                                     if (contenu_avant != contenu_apres) 
                                         { 
              parametre='id='+id_bdd+'&champ='+champ_bdd+'&contenu='+contenu_apres ; 
              //alert(param) ; 
              $.ajax({ 
                url: "updatedynamique.php",  
                type: "POST",  
                data: parametre,  
                success: function(html) {  
                      //alert(html); 
                      } 
               }); 
              } 
              
            }); 
         
       };     
                 
      }); 
    });   
     
       
    </script> 
     
     </head> 
     
     <body> 
      <?php
      try
     
    {     
             $link = new PDO('mysql:host=localhost;dbname=voiture;charset=utf8', 'root', '',array( PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION ));
              
    }
     
    catch(Exception $e)
     
    {
     
            die('Erreur : '.$e->getMessage());
    }
    ?>
     
     
     <table id="tableau" border="1"> 
      <tr> 
       <td >--   NOM   --</td> <td >--   TELEPHONE   --</td> 
      </tr> 
      <tr> 
       <td contenteditable="true" id="1" name="nom" > </td> 
       <td  contenteditable="true" id="1" name="telephone" > <?php $req =$link->query('SELECT prix from voiture WHERE id=1'); $donnees = $req->fetch(); echo $donnees['prix'] ;?></td> 
       </tr> 
       <tr> 
       <td contenteditable="true" id="2" name="nom" ></td> 
       <td contenteditable="true" id="2" name="telephone" ></td> 
       </tr> 
     </table>  
     
     
     </body> 
     
    </html>

    Bien que la réalisation d'un tableau Boostrap est plus simple je n'arrive pas à récupérer les champs du tableau ( via les sélecteurs du DOM ) pour effectuer l'ajax.

    Voici le code pour mon tableau Bootsrap :
    Code html : 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
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    <body> 
     <div class="container">
            <h1>Editable</h1>
            <table id="table"
                   data-toggle="table"
                   data-pagination="true"
                   data-show-export="true"
                   data-url="./tableau_developpement_sw.php">
                <thead>
                <tr>
                    <th data-field="id_ligne">ID</th>
                    <th data-field="type_sw" data-editable="true">Type</th>
                    <th data-field="complexite" data-editable="true">complexite</th>
                    <th data-field="date_lancement" data-editable="true">Date de lancement</th>
                    <th data-field="date_livraison" data-editable="true">Date de Livraison</th>
                    <th data-field="commentaire" data-editable="true">Commentaire</th>
                </tr>
                </thead>
            </table>
        </div>
      <script> 
    $(document).ready(function() 
    {  
     
     
     $("th").click(function()  
      { 
       if( $(this).attr("data-editable") == "true") 
       {    
        
       console.log('ici');
       };     
                 
      }); 
    });   
       
    </script> 
     </body>

    Le script ne donne rien.

    Merci.

  2. #2
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2012
    Messages
    2 516
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : Maroc

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

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 516
    Par défaut
    d'après ce que j'ai compris, tu reçois bien les données depuis la base mysql, et elles sont bien affichées sur la page(via php), par-contre, quand tu cliques sur les th du tableau html(via jquery), rien ne se passe.
    "console.log('ici')" n'est pas affiché dans la console?

  3. #3
    Membre averti
    Homme Profil pro
    Étudiant
    Inscrit en
    Avril 2017
    Messages
    44
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Hauts de Seine (Île de France)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Industrie

    Informations forums :
    Inscription : Avril 2017
    Messages : 44
    Par défaut
    Bonjour

    Exactement rien ne se passe. J'ai aussi essayé de sélectionner la classe du bouton de validation mais ça ne fonctionne pas :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    $(document).ready(function() 
    {  
     
     
     $(".btn btn-primary btn-sm editable-submit").click(function()  
      { 
       //if( $(this).attr("data-editable") == "true") 
       //{    
     
       console.log('ici');
       //};     
     
      }); 
    });
    J'ai aussi essayé de l'utilisation de la fonction submit :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    $(document).ready(function() 
    {  
     
     
     $('#form').submit( function() {
     
        console.log(1);
     
        } );
    });
    Voici les différentes classes et balises html du tableau :

    Nom : Capture.PNG
Affichages : 743
Taille : 63,5 Ko

    Comment sélectionner ces éléments? ( Bouttons ).

    Merci

  4. #4
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2012
    Messages
    2 516
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : Maroc

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

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 516
    Par défaut
    d'après le code html que tu as posté, je vois pas le "id=form" dans ta <form>, c normal que $("#form").submit() ou .click ne fonctionne pas.
    essai d'ajouter un id a cette form, ou bien utilise juste sa classe, :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    $("form.editableform").click(function(){console.log("ici");})
    en ce qui concerne le bouton qui est dans <div class="editable-buttons">, le déclenchement de click sur cette élément se fait ainsi :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
     
    $(".editable-buttons button[type=submit]").click(function(e){
    e.preventDefault();//on empêche le navigateur de suivre le submit...
    console.log("click sur boutton");
    })

Discussions similaires

  1. [AJAX] récupérer tableau de php vers ajax
    Par alex7532 dans le forum AJAX
    Réponses: 1
    Dernier message: 20/02/2011, 19h22
  2. Renvoyer un tableau après une requête AJAX
    Par franquis dans le forum jQuery
    Réponses: 6
    Dernier message: 06/08/2010, 13h05
  3. [ZF 1.9] Tableau dynamique (universel) en Ajax avec Jquey
    Par noiser007 dans le forum Zend Framework
    Réponses: 3
    Dernier message: 16/02/2010, 18h38
  4. Un EDIT/UPDATE me crée des doublons
    Par apprenti46 dans le forum VBA Access
    Réponses: 2
    Dernier message: 29/09/2008, 13h58
  5. Edition en ajax
    Par Fiyorden dans le forum Ruby on Rails
    Réponses: 0
    Dernier message: 16/07/2008, 22h26

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