1
I have a table whose contents come from a server, in json. Each row of the table has a code number, a product name and an edit button, when clicking this edit button opens a modal where there are two code and product text boxes. What I am trying to do is that when I click on the button to edit the modal open with the text boxes already filled with the information of the respective line and that, when changing and clicking on the save button from within the modal, happens the editing of the content in that line. How can I do that?
This is my HTML:
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog" id="modaldialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header" style="background-color:#C25C40; color:white; border-bottom: 0 none; height:45px;">
<h5 class="modal-title" style="top:10px;position:absolute;">Alterar Código/Grupo</h5>
</div>
<div class="modal-body" style="background-color:#262626;">
<input type="text" placeholder="Código" id="Cdgrupoedit">
<input type="text" placeholder="Grupo" id="grupoedit">
</div>
<div class="modal-footer" style="height:170px; background-color:#262626;border-top: 0 none;">
<button type="button" onclick="editRow();" class="btn btn-success" data-dismiss="modal" id="modalgravar" >Gravar</button>
<button type="button" class="btn btn-danger" data-dismiss="modal" id="modalfechar" >Voltar</button>
<input type="hidden" name="employee_id" id="employee_id"/>
</div>
</div>
</div>
</div>
<div class="card-body" style="background-color:#262626">
<form method="post" id="tableform">
<table class="table table-bordered" id="dataTable">
<tfoot>
</tfoot>
<tbody>
</tbody>
</table>
</form>
</div>
</div>
</div>
This is my JS to create a new row in the table:
$(".row").click(function(){
var Cdgrupo = $("#Cdgrupo").val();
var Grupo = $("#Grupo").val();
var markup = "<tr><td>" + Cdgrupo + "</td><td>" + Grupo + "</td>'<td><button type='button' id='btneditar' class='btneditar btn btn-info' data-toggle='modal' data-target='#myModal' title='Alterar Grupo'><i class='fa fa-edit'></i></button><button type='button' class='btn btn-danger' title='Excluir Grupo' style='right:-4px; position:relative;'><i class='fa fa-times'></i></button></td>';</tr>";
$("table tfoot").append(markup);
});
This is the JS to pull the content from the server:
$(function(){
$.ajax({
url: "http://xxx/datasnap/rest/xxx/xxx/",
dataType: 'json',
type: 'get',
cache:false,
success: function(data){
var event_data = '';
//começo da tabela
event_data += '<thead>';
event_data += '<tr style="color:white">';
event_data += '<th width="10%">Código</th>';
event_data += '<th>Grupo</th>';
event_data += '<th width="15%">Ação</th>';
event_data += '</tr>';
event_data += '</thead>';
//final da tabela
//conteudo da tabela vindo da url
$.each(data, function(index, value){
event_data += '<tr>';
event_data += '<td>'+value.Cdgrupo+'</td>';
event_data += '<td>'+value.Grupos+'</td>';
event_data += '<td><button type="button" class="editbtn btn btn-info mesmo-tamanho" data-toggle="modal" data-target="#myModal" title="Alterar Grupo"><i class="fa fa-edit"></i></button><button type="button" class="btn btn-danger mesmo-tamanho" title="Excluir Grupo" style="right:-4px; position:relative;"><i class="fa fa-times"></i></button></td>';
event_data += '</tr>';
});
$('#dataTable').css({'color':'white'});
$("#dataTable").append(event_data);
},
//aviso de erro caso o conteudo da tabela não seja carregado
error: function(d){
alert("Erro.");
}
});
});