如何从上下文菜单中将数据传递给模态？

Question

I've a table which contains two columns. I created a jQuery context menu with two entries: edit and delete.

If I perform a right click on a row and click on edit button, I'd like to open my bootstrap modal and pass data into it.

Here's my context menu 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>

And here's my 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>

Here's PHP code to retrieve data:

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

Can someone tell me which is the best way to do this?

Answer 1

I've found a solution, here's updated code:

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