Как передать данные в модальное из контекстного меню?

Question

У меня есть таблица, которая содержит две колонки. Я создал контекстное меню jQuery с двумя записями: редактировать и удалять.

Если я выполняю правый щелчок по строке и нажимаю кнопку редактирования, я бы хотел открыть мой загрузочный мод и передать в него данные.

Вот мой код контекстное меню:

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

А вот мой модальный код:

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

Вот PHP код для извлечения данных:

$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> 
    '; 
    } 

Может кто-то сказать мне, что лучший способ сделать это?

Answer 1

Я нашел решение, здесь обновляется код:

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