Julien Julien - 2 months ago 18
jQuery Question

How to pass data to a modal from a context menu?

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

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>