Wie übertrage ich Daten aus einem Kontextmenü in ein Modal?

Question

Ich habe eine Tabelle, die zwei Spalten enthält. Ich habe ein jQuery-Kontextmenü mit zwei Einträgen erstellt: Bearbeiten und Löschen.

Wenn ich mit der rechten Maustaste auf eine Zeile klicke und auf Bearbeiten klicke, möchte ich mein Bootstrap-Modal öffnen und Daten dorthin eingeben.

Hier ist mein Kontextmenü Code:

<script type='text/javascript'> 
window.onload=function(){ 
    $(function() { 
     $(".context-menu-one").contextMenu({ 
      selector: 'td', 
      callback: function(key, options) { 
       switch (key) { 
        case 'edit': 
         var content = $(this).data('id'); 
         $('#myModal').modal('show'); 
         break; 

        case 'delete': 
         break; 
       } 
      }, 
      items: { 
       "edit": {name: "Modifier", icon: "edit"}, 
       "delete": {name: "Supprimer", icon: "delete"}, 
      } 
     }); 
     $('.context-menu-one').on('click', function(e){ 
      console.log('clicked', this); 
     }) 
    }); 
} 
</script> 

Und hier ist mein modal Code:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
     <h4 class="modal-title" id="myModalLabel">Test</h4> 
     </div> 
     <form class="my-form"> 
     <div class="modal-body">           
     <label>SDA 
      <input type="text" id="sda" name="sda" value="" required="required" class="form-control col-md-7 col-xs-12"> 
     </label> 
     <label>Service 
     <input type="text" id="service" name="service" value="" required="required" class="form-control col-md-7 col-xs-12"> 
     </label> 
     <label id="label-id"></label> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Clode</button> 
     <button type="button" class="btn btn-primary" id="add">Add</button> 
    </form> 
     </div> 
    </div> 
    </div> 

Hier PHP-Code, um Daten abzurufen:

$reponse = $bdd->query("SELECT * FROM table"); 
    while ($donnees = $reponse->fetch()) { 

     echo ' 
     <tr> 
      <td data-id="'.$donnees[0].'">' . $donnees[1] . '</td> 
      <td data-id="'.$donnees[0].'">' . $donnees[2]. '</td> 
     </tr> 
    '; 
    } 

mir jemand sagen kann, das ist der beste Weg, dies zu tun?

Answer 1

Ich habe eine Lösung gefunden, hier Code aktualisiert:

<script type='text/javascript'> 
window.onload=function(){ 
    $(function() { 
     $(".context-menu-one").contextMenu({ 
      selector: 'td', 
      callback: function(key, options) { 
       switch (key) { 
        case 'edit': 
        sda = $(this).parent().find("td:eq(0)").text(); 
        service = $(this).parent().find("td:eq(1)").text(); 
        $("#sda").val(sda); 
        $("#service").val(service); 
        $('#myModal').modal('show'); 
        break; 

        case 'delete': 
         break; 
       } 
      }, 
      items: { 
       "edit": {name: "Modifier", icon: "edit"}, 
       "delete": {name: "Supprimer", icon: "delete"}, 
      } 
     }); 
     $('.context-menu-one').on('click', function(e){ 
      console.log('clicked', this); 
     }) 
    }); 
} 
</script>