Insert Modal data in table via Ajax PHP and JavaScript











up vote
0
down vote

favorite












I'm trying to insert data from a table of my Modal into the table "parent" of my page, basically I have a modal, where I gave a select to bring the data that is not in the parent table and the user insert that data, what happens is that the requests are done correctly, however the data in the parent table comes "null", here my html page:



<div class="container-fluid">
<table class="table table-bordered table-striped table-condensed" id="tablePrincipal">
<thead>
<tr>
<th colspan="4">Papéis funcionais do usuário
<button class="fa fa-trash" aria-hidden="true" name="Delete" value="Delete" id="deletar" ></button>
<button class="fa fa-plus" aria-hidden="true" data-toggle="modal" data-target="#Modal"></button>
</th><br>
</tr>

<tr>
<a style="cursor: pointer;"><td><input type='checkbox' id="checkTodos__" /><b> Identificador</b><span class="gridSortAsc"></span></td></a>
<td><b>Nome</b><span class="gridSortAsc"></span></td>
</tr>
</thead>
<?php
$SQL = "SELECT ADR.IDROLE, ADR.NMROLE, ADR.CDROLE FROM ADUSERROLE ADUR, ADROLE ADR WHERE ADUR.CDROLE = ADR.CDROLE AND ADUR.CDUSER = '".$cduser."'";

$SQL.=" ORDER BY ADR.IDROLE, ADR.NMROLE";

$cur = $conn->execute($SQL);

if($cur){
while(!$cur->EOF){
$linha = "<tbody><tr>";
$linha.= "<td> <input type='checkbox' />&nbsp;&nbsp;".$cur->fields['idrole']."</td>";
$linha.= "<td>".$cur->fields['nmrole']."</td>";
$linha.= "</tr></tbody>";
echo $linha;
$cur->MoveNext();

$cdrole = $cur->fields["cdrole"];
}
}
?>
</table>
</div>

<!-- Modal para exibição dos dados para adicionar na tabela pai -->
<div class="modal fade" id="Modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Insira um novo registro</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">x</span>
</button>
</div>

<form id="formulario">
<div class="modal-body">
<button class="fa fa-search" id="pesquisarDados" onclick="mostrarTabela();"></button>
<label for="pesquisa">Pesquisar</label>
<input type="text" name="pesquisar" id="pesquisar" class="form-control" aria-describedby="pesquisa" placeholder="Pesquisar">
<table style="display: none;" class="table table-bordered table-striped table-condensed table-hover" id="mostraTable">
<thead>
<tr>
<a style="cursor: pointer;"><td><input type='checkbox' value="1" id="inputDado" name="inputDado" /><b> Identificador</b><span class="gridSortAsc"></span></td></a>
<td><b>Nome</b><span class="gridSortAsc"></span></td>
</tr>
</thead>
<tbody id="mostraDadosTable">

</tbody>
</table>
</div>
</form>

<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
<button type="button" class="btn btn-primary" id="inserirDado" onclick="insereDado();">Salvar</button>
</div>
</div>
</div>
</div>


this form is inside my Modal. And here my JavaScript with Ajax, which makes the request for my PHP:



<script>
//seleciona os checkbox
$("#checkTodos__").change(function () {
$("input:checkbox").prop('checked', $(this).prop("checked"));
});

$("#checkTodos__").click(function(){
$('input:checkbox').not(this).prop('checked', this.checked);
});

$("#inputDado").change(function () {
$("input:checkbox").prop('checked', $(this).prop("checked"));
});

$("#inputDado").click(function(){
$('input:checkbox').not(this).prop('checked', this.checked);
});

var checkTodos = $("#checkTodos");
checkTodos.click(function () {
if ($(this).is(':checked')){
$('input:checkbox').prop("checked", true);
} else {
$('input:checkbox').prop("checked", false);
}
});

//limpa o campo de pesquisa do modal
$('#Modal').on('hidden.bs.modal', function () {
$('#formulario').each(function() {
$('#pesquisar').val('');
});
});

//mostra a tabela no modal quando clica no Pesquisar
function mostrarTabela(){
document.getElementById('mostraTable').style.display = '';
}

//quando não tiver algo digitado na pesquisa, irá trazer todos os registros
function pesquisaTodosDados(){
$('#mostraDadosTable').empty(); //Limpando a tabela
$('#formulario').on('submit', function(e){
e.preventDefault();
$.ajax({
type:'POST',
dataType: 'json',
url: 'actions.php',
data: {
selecionaDados: "true",
iduser: '1185621'
},
success: function(data){
//alert('sucesso');
for(var i = 0; data.length > i; i++){
//Adicionando registros retornados na tabela
$('#mostraDadosTable').append('<tr><td><input type="checkbox" value="1" id="inputDado" name="inputDado" />&nbsp;&nbsp;'+data[i].idrole+'</td><td>'+data[i].nmrole+'</td></tr>');
}
}
});
});
}

//requisição assíncrona via Ajax e método Post para o arquivo getDados, e trás o que o usuário digitou na pesquisa
function pesquisaDadosFiltrados(){
$('#mostraDadosTable').empty(); //Limpando a tabela
$('#formulario').on('submit', function(e){
e.preventDefault();
$.ajax({
type:'POST',
dataType: 'json',
url: 'getDados.php?pesquisar',
data: {
pesquisar: $('#pesquisar').val()
},
success: function(data){
//Adicionando os registros filtrados na tabela
for(var i = 0; data.length > i; i++){
$('#mostraDadosTable').append('<tr><td><input type="checkbox" value="1" id="inputDado" name="inputDado" />&nbsp;&nbsp;' + data[i].idrole + '</td><td>' + data[i].nmrole + '</td></tr>', '');
};
},
error: function() {
alert('Ocorreu um erro na requisição');
}
});
});
}

//dispara as funções para pesquisar todos os dados ou somente os dados filtrados, conforme requisição
$(document).ready(function(){

$('#pesquisarDados').click(function(){
pesquisa = $('#pesquisar').val()
pesquisarDados(pesquisa);
});

function pesquisarDados(pesquisa){
if (pesquisa == "") {
pesquisaTodosDados();
} else {
pesquisaDadosFiltrados();
}
}
});

//insere dados conforme requisição for disparada no botão salvar do modal
function insereDado(){
$(document).ready(function(){
var arr = ;
$("input:checkbox[name=inputDado]:checked").each(function(){
arr.push($(this).val());
console.log('valor checkbox inputDado: ', arr);
});

$.ajax({
type:'POST',
dataType: 'json',
url: 'insertDado.php',
data: {
insereDados : "true",
inputDado : arr
},
success: function(data){
console.log('dado retornado: ', data);
console.log('valor checkbox inputDado no success: ', inputDado);
for(var i = 0; data.length > i; i++){
$('#tablePrincipal').append('<tr><td>' + data[i].idrole + '</td><td>' + data[i].nmrole + '</td></tr>');
};
},
error: function() {
alert('Ocorreu um erro na requisição');
}
});
});
}
</script>


and finally, my page insertDado.php that does the INSERT in the table



<?php
define('NOSESSION', true);
require_once("../../global.php");
require_once("../specific/se_schulze.php");

$inputDado = $_POST['inputDado'];

function insereDados($inputDado){

global $conn;

$SQL = "INSERT INTO ADROLE (idrole, nmrole)
SELECT ADR.IDROLE, ADR.NMROLE FROM ADROLE ADR WHERE ADR.IDROLE = '" . $inputDado . "' AND ADR.NMROLE = '" . $inputDado . "'";

$cur = $conn->execute($SQL);

$vetor = "";
$registro = "";

if($cur){
$registro["idrole"] = $cur->fields["idrole"];
$registro["nmrole"] = $cur->fields["nmrole"];
$vetor = $registro;
}

echo json_encode($vetor);


}



insereDados($inputDado);


?>



some help?
I've been trying to solve some time










share|improve this question
























  • in your ajax ftn when you populate the table with the results from data, are you certain the results are being populated? In your INSERT, you are assuming it will return a list of records. Try console.log in your JavaScript to see the results, or you can use alert.
    – mcv
    Nov 9 at 13:36










  • this is my problem, when I fill in the results that came from the request, this data is being filled as nulls in the table, that is, console.log ('returned data:', data); comes null
    – Bruno Elias de Souza
    Nov 9 at 13:40












  • If you want a list of records to populate your $vector, you might want to perform a select query.
    – mcv
    Nov 9 at 13:40










  • What does the browser console window display for the output? if NULL or "" it's because you're returning an empty value.
    – mcv
    Nov 9 at 13:48










  • also is the record being stored properly in your database? I don't see a $conn->commit();
    – mcv
    Nov 9 at 13:49

















up vote
0
down vote

favorite












I'm trying to insert data from a table of my Modal into the table "parent" of my page, basically I have a modal, where I gave a select to bring the data that is not in the parent table and the user insert that data, what happens is that the requests are done correctly, however the data in the parent table comes "null", here my html page:



<div class="container-fluid">
<table class="table table-bordered table-striped table-condensed" id="tablePrincipal">
<thead>
<tr>
<th colspan="4">Papéis funcionais do usuário
<button class="fa fa-trash" aria-hidden="true" name="Delete" value="Delete" id="deletar" ></button>
<button class="fa fa-plus" aria-hidden="true" data-toggle="modal" data-target="#Modal"></button>
</th><br>
</tr>

<tr>
<a style="cursor: pointer;"><td><input type='checkbox' id="checkTodos__" /><b> Identificador</b><span class="gridSortAsc"></span></td></a>
<td><b>Nome</b><span class="gridSortAsc"></span></td>
</tr>
</thead>
<?php
$SQL = "SELECT ADR.IDROLE, ADR.NMROLE, ADR.CDROLE FROM ADUSERROLE ADUR, ADROLE ADR WHERE ADUR.CDROLE = ADR.CDROLE AND ADUR.CDUSER = '".$cduser."'";

$SQL.=" ORDER BY ADR.IDROLE, ADR.NMROLE";

$cur = $conn->execute($SQL);

if($cur){
while(!$cur->EOF){
$linha = "<tbody><tr>";
$linha.= "<td> <input type='checkbox' />&nbsp;&nbsp;".$cur->fields['idrole']."</td>";
$linha.= "<td>".$cur->fields['nmrole']."</td>";
$linha.= "</tr></tbody>";
echo $linha;
$cur->MoveNext();

$cdrole = $cur->fields["cdrole"];
}
}
?>
</table>
</div>

<!-- Modal para exibição dos dados para adicionar na tabela pai -->
<div class="modal fade" id="Modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Insira um novo registro</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">x</span>
</button>
</div>

<form id="formulario">
<div class="modal-body">
<button class="fa fa-search" id="pesquisarDados" onclick="mostrarTabela();"></button>
<label for="pesquisa">Pesquisar</label>
<input type="text" name="pesquisar" id="pesquisar" class="form-control" aria-describedby="pesquisa" placeholder="Pesquisar">
<table style="display: none;" class="table table-bordered table-striped table-condensed table-hover" id="mostraTable">
<thead>
<tr>
<a style="cursor: pointer;"><td><input type='checkbox' value="1" id="inputDado" name="inputDado" /><b> Identificador</b><span class="gridSortAsc"></span></td></a>
<td><b>Nome</b><span class="gridSortAsc"></span></td>
</tr>
</thead>
<tbody id="mostraDadosTable">

</tbody>
</table>
</div>
</form>

<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
<button type="button" class="btn btn-primary" id="inserirDado" onclick="insereDado();">Salvar</button>
</div>
</div>
</div>
</div>


this form is inside my Modal. And here my JavaScript with Ajax, which makes the request for my PHP:



<script>
//seleciona os checkbox
$("#checkTodos__").change(function () {
$("input:checkbox").prop('checked', $(this).prop("checked"));
});

$("#checkTodos__").click(function(){
$('input:checkbox').not(this).prop('checked', this.checked);
});

$("#inputDado").change(function () {
$("input:checkbox").prop('checked', $(this).prop("checked"));
});

$("#inputDado").click(function(){
$('input:checkbox').not(this).prop('checked', this.checked);
});

var checkTodos = $("#checkTodos");
checkTodos.click(function () {
if ($(this).is(':checked')){
$('input:checkbox').prop("checked", true);
} else {
$('input:checkbox').prop("checked", false);
}
});

//limpa o campo de pesquisa do modal
$('#Modal').on('hidden.bs.modal', function () {
$('#formulario').each(function() {
$('#pesquisar').val('');
});
});

//mostra a tabela no modal quando clica no Pesquisar
function mostrarTabela(){
document.getElementById('mostraTable').style.display = '';
}

//quando não tiver algo digitado na pesquisa, irá trazer todos os registros
function pesquisaTodosDados(){
$('#mostraDadosTable').empty(); //Limpando a tabela
$('#formulario').on('submit', function(e){
e.preventDefault();
$.ajax({
type:'POST',
dataType: 'json',
url: 'actions.php',
data: {
selecionaDados: "true",
iduser: '1185621'
},
success: function(data){
//alert('sucesso');
for(var i = 0; data.length > i; i++){
//Adicionando registros retornados na tabela
$('#mostraDadosTable').append('<tr><td><input type="checkbox" value="1" id="inputDado" name="inputDado" />&nbsp;&nbsp;'+data[i].idrole+'</td><td>'+data[i].nmrole+'</td></tr>');
}
}
});
});
}

//requisição assíncrona via Ajax e método Post para o arquivo getDados, e trás o que o usuário digitou na pesquisa
function pesquisaDadosFiltrados(){
$('#mostraDadosTable').empty(); //Limpando a tabela
$('#formulario').on('submit', function(e){
e.preventDefault();
$.ajax({
type:'POST',
dataType: 'json',
url: 'getDados.php?pesquisar',
data: {
pesquisar: $('#pesquisar').val()
},
success: function(data){
//Adicionando os registros filtrados na tabela
for(var i = 0; data.length > i; i++){
$('#mostraDadosTable').append('<tr><td><input type="checkbox" value="1" id="inputDado" name="inputDado" />&nbsp;&nbsp;' + data[i].idrole + '</td><td>' + data[i].nmrole + '</td></tr>', '');
};
},
error: function() {
alert('Ocorreu um erro na requisição');
}
});
});
}

//dispara as funções para pesquisar todos os dados ou somente os dados filtrados, conforme requisição
$(document).ready(function(){

$('#pesquisarDados').click(function(){
pesquisa = $('#pesquisar').val()
pesquisarDados(pesquisa);
});

function pesquisarDados(pesquisa){
if (pesquisa == "") {
pesquisaTodosDados();
} else {
pesquisaDadosFiltrados();
}
}
});

//insere dados conforme requisição for disparada no botão salvar do modal
function insereDado(){
$(document).ready(function(){
var arr = ;
$("input:checkbox[name=inputDado]:checked").each(function(){
arr.push($(this).val());
console.log('valor checkbox inputDado: ', arr);
});

$.ajax({
type:'POST',
dataType: 'json',
url: 'insertDado.php',
data: {
insereDados : "true",
inputDado : arr
},
success: function(data){
console.log('dado retornado: ', data);
console.log('valor checkbox inputDado no success: ', inputDado);
for(var i = 0; data.length > i; i++){
$('#tablePrincipal').append('<tr><td>' + data[i].idrole + '</td><td>' + data[i].nmrole + '</td></tr>');
};
},
error: function() {
alert('Ocorreu um erro na requisição');
}
});
});
}
</script>


and finally, my page insertDado.php that does the INSERT in the table



<?php
define('NOSESSION', true);
require_once("../../global.php");
require_once("../specific/se_schulze.php");

$inputDado = $_POST['inputDado'];

function insereDados($inputDado){

global $conn;

$SQL = "INSERT INTO ADROLE (idrole, nmrole)
SELECT ADR.IDROLE, ADR.NMROLE FROM ADROLE ADR WHERE ADR.IDROLE = '" . $inputDado . "' AND ADR.NMROLE = '" . $inputDado . "'";

$cur = $conn->execute($SQL);

$vetor = "";
$registro = "";

if($cur){
$registro["idrole"] = $cur->fields["idrole"];
$registro["nmrole"] = $cur->fields["nmrole"];
$vetor = $registro;
}

echo json_encode($vetor);


}



insereDados($inputDado);


?>



some help?
I've been trying to solve some time










share|improve this question
























  • in your ajax ftn when you populate the table with the results from data, are you certain the results are being populated? In your INSERT, you are assuming it will return a list of records. Try console.log in your JavaScript to see the results, or you can use alert.
    – mcv
    Nov 9 at 13:36










  • this is my problem, when I fill in the results that came from the request, this data is being filled as nulls in the table, that is, console.log ('returned data:', data); comes null
    – Bruno Elias de Souza
    Nov 9 at 13:40












  • If you want a list of records to populate your $vector, you might want to perform a select query.
    – mcv
    Nov 9 at 13:40










  • What does the browser console window display for the output? if NULL or "" it's because you're returning an empty value.
    – mcv
    Nov 9 at 13:48










  • also is the record being stored properly in your database? I don't see a $conn->commit();
    – mcv
    Nov 9 at 13:49















up vote
0
down vote

favorite









up vote
0
down vote

favorite











I'm trying to insert data from a table of my Modal into the table "parent" of my page, basically I have a modal, where I gave a select to bring the data that is not in the parent table and the user insert that data, what happens is that the requests are done correctly, however the data in the parent table comes "null", here my html page:



<div class="container-fluid">
<table class="table table-bordered table-striped table-condensed" id="tablePrincipal">
<thead>
<tr>
<th colspan="4">Papéis funcionais do usuário
<button class="fa fa-trash" aria-hidden="true" name="Delete" value="Delete" id="deletar" ></button>
<button class="fa fa-plus" aria-hidden="true" data-toggle="modal" data-target="#Modal"></button>
</th><br>
</tr>

<tr>
<a style="cursor: pointer;"><td><input type='checkbox' id="checkTodos__" /><b> Identificador</b><span class="gridSortAsc"></span></td></a>
<td><b>Nome</b><span class="gridSortAsc"></span></td>
</tr>
</thead>
<?php
$SQL = "SELECT ADR.IDROLE, ADR.NMROLE, ADR.CDROLE FROM ADUSERROLE ADUR, ADROLE ADR WHERE ADUR.CDROLE = ADR.CDROLE AND ADUR.CDUSER = '".$cduser."'";

$SQL.=" ORDER BY ADR.IDROLE, ADR.NMROLE";

$cur = $conn->execute($SQL);

if($cur){
while(!$cur->EOF){
$linha = "<tbody><tr>";
$linha.= "<td> <input type='checkbox' />&nbsp;&nbsp;".$cur->fields['idrole']."</td>";
$linha.= "<td>".$cur->fields['nmrole']."</td>";
$linha.= "</tr></tbody>";
echo $linha;
$cur->MoveNext();

$cdrole = $cur->fields["cdrole"];
}
}
?>
</table>
</div>

<!-- Modal para exibição dos dados para adicionar na tabela pai -->
<div class="modal fade" id="Modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Insira um novo registro</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">x</span>
</button>
</div>

<form id="formulario">
<div class="modal-body">
<button class="fa fa-search" id="pesquisarDados" onclick="mostrarTabela();"></button>
<label for="pesquisa">Pesquisar</label>
<input type="text" name="pesquisar" id="pesquisar" class="form-control" aria-describedby="pesquisa" placeholder="Pesquisar">
<table style="display: none;" class="table table-bordered table-striped table-condensed table-hover" id="mostraTable">
<thead>
<tr>
<a style="cursor: pointer;"><td><input type='checkbox' value="1" id="inputDado" name="inputDado" /><b> Identificador</b><span class="gridSortAsc"></span></td></a>
<td><b>Nome</b><span class="gridSortAsc"></span></td>
</tr>
</thead>
<tbody id="mostraDadosTable">

</tbody>
</table>
</div>
</form>

<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
<button type="button" class="btn btn-primary" id="inserirDado" onclick="insereDado();">Salvar</button>
</div>
</div>
</div>
</div>


this form is inside my Modal. And here my JavaScript with Ajax, which makes the request for my PHP:



<script>
//seleciona os checkbox
$("#checkTodos__").change(function () {
$("input:checkbox").prop('checked', $(this).prop("checked"));
});

$("#checkTodos__").click(function(){
$('input:checkbox').not(this).prop('checked', this.checked);
});

$("#inputDado").change(function () {
$("input:checkbox").prop('checked', $(this).prop("checked"));
});

$("#inputDado").click(function(){
$('input:checkbox').not(this).prop('checked', this.checked);
});

var checkTodos = $("#checkTodos");
checkTodos.click(function () {
if ($(this).is(':checked')){
$('input:checkbox').prop("checked", true);
} else {
$('input:checkbox').prop("checked", false);
}
});

//limpa o campo de pesquisa do modal
$('#Modal').on('hidden.bs.modal', function () {
$('#formulario').each(function() {
$('#pesquisar').val('');
});
});

//mostra a tabela no modal quando clica no Pesquisar
function mostrarTabela(){
document.getElementById('mostraTable').style.display = '';
}

//quando não tiver algo digitado na pesquisa, irá trazer todos os registros
function pesquisaTodosDados(){
$('#mostraDadosTable').empty(); //Limpando a tabela
$('#formulario').on('submit', function(e){
e.preventDefault();
$.ajax({
type:'POST',
dataType: 'json',
url: 'actions.php',
data: {
selecionaDados: "true",
iduser: '1185621'
},
success: function(data){
//alert('sucesso');
for(var i = 0; data.length > i; i++){
//Adicionando registros retornados na tabela
$('#mostraDadosTable').append('<tr><td><input type="checkbox" value="1" id="inputDado" name="inputDado" />&nbsp;&nbsp;'+data[i].idrole+'</td><td>'+data[i].nmrole+'</td></tr>');
}
}
});
});
}

//requisição assíncrona via Ajax e método Post para o arquivo getDados, e trás o que o usuário digitou na pesquisa
function pesquisaDadosFiltrados(){
$('#mostraDadosTable').empty(); //Limpando a tabela
$('#formulario').on('submit', function(e){
e.preventDefault();
$.ajax({
type:'POST',
dataType: 'json',
url: 'getDados.php?pesquisar',
data: {
pesquisar: $('#pesquisar').val()
},
success: function(data){
//Adicionando os registros filtrados na tabela
for(var i = 0; data.length > i; i++){
$('#mostraDadosTable').append('<tr><td><input type="checkbox" value="1" id="inputDado" name="inputDado" />&nbsp;&nbsp;' + data[i].idrole + '</td><td>' + data[i].nmrole + '</td></tr>', '');
};
},
error: function() {
alert('Ocorreu um erro na requisição');
}
});
});
}

//dispara as funções para pesquisar todos os dados ou somente os dados filtrados, conforme requisição
$(document).ready(function(){

$('#pesquisarDados').click(function(){
pesquisa = $('#pesquisar').val()
pesquisarDados(pesquisa);
});

function pesquisarDados(pesquisa){
if (pesquisa == "") {
pesquisaTodosDados();
} else {
pesquisaDadosFiltrados();
}
}
});

//insere dados conforme requisição for disparada no botão salvar do modal
function insereDado(){
$(document).ready(function(){
var arr = ;
$("input:checkbox[name=inputDado]:checked").each(function(){
arr.push($(this).val());
console.log('valor checkbox inputDado: ', arr);
});

$.ajax({
type:'POST',
dataType: 'json',
url: 'insertDado.php',
data: {
insereDados : "true",
inputDado : arr
},
success: function(data){
console.log('dado retornado: ', data);
console.log('valor checkbox inputDado no success: ', inputDado);
for(var i = 0; data.length > i; i++){
$('#tablePrincipal').append('<tr><td>' + data[i].idrole + '</td><td>' + data[i].nmrole + '</td></tr>');
};
},
error: function() {
alert('Ocorreu um erro na requisição');
}
});
});
}
</script>


and finally, my page insertDado.php that does the INSERT in the table



<?php
define('NOSESSION', true);
require_once("../../global.php");
require_once("../specific/se_schulze.php");

$inputDado = $_POST['inputDado'];

function insereDados($inputDado){

global $conn;

$SQL = "INSERT INTO ADROLE (idrole, nmrole)
SELECT ADR.IDROLE, ADR.NMROLE FROM ADROLE ADR WHERE ADR.IDROLE = '" . $inputDado . "' AND ADR.NMROLE = '" . $inputDado . "'";

$cur = $conn->execute($SQL);

$vetor = "";
$registro = "";

if($cur){
$registro["idrole"] = $cur->fields["idrole"];
$registro["nmrole"] = $cur->fields["nmrole"];
$vetor = $registro;
}

echo json_encode($vetor);


}



insereDados($inputDado);


?>



some help?
I've been trying to solve some time










share|improve this question















I'm trying to insert data from a table of my Modal into the table "parent" of my page, basically I have a modal, where I gave a select to bring the data that is not in the parent table and the user insert that data, what happens is that the requests are done correctly, however the data in the parent table comes "null", here my html page:



<div class="container-fluid">
<table class="table table-bordered table-striped table-condensed" id="tablePrincipal">
<thead>
<tr>
<th colspan="4">Papéis funcionais do usuário
<button class="fa fa-trash" aria-hidden="true" name="Delete" value="Delete" id="deletar" ></button>
<button class="fa fa-plus" aria-hidden="true" data-toggle="modal" data-target="#Modal"></button>
</th><br>
</tr>

<tr>
<a style="cursor: pointer;"><td><input type='checkbox' id="checkTodos__" /><b> Identificador</b><span class="gridSortAsc"></span></td></a>
<td><b>Nome</b><span class="gridSortAsc"></span></td>
</tr>
</thead>
<?php
$SQL = "SELECT ADR.IDROLE, ADR.NMROLE, ADR.CDROLE FROM ADUSERROLE ADUR, ADROLE ADR WHERE ADUR.CDROLE = ADR.CDROLE AND ADUR.CDUSER = '".$cduser."'";

$SQL.=" ORDER BY ADR.IDROLE, ADR.NMROLE";

$cur = $conn->execute($SQL);

if($cur){
while(!$cur->EOF){
$linha = "<tbody><tr>";
$linha.= "<td> <input type='checkbox' />&nbsp;&nbsp;".$cur->fields['idrole']."</td>";
$linha.= "<td>".$cur->fields['nmrole']."</td>";
$linha.= "</tr></tbody>";
echo $linha;
$cur->MoveNext();

$cdrole = $cur->fields["cdrole"];
}
}
?>
</table>
</div>

<!-- Modal para exibição dos dados para adicionar na tabela pai -->
<div class="modal fade" id="Modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Insira um novo registro</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">x</span>
</button>
</div>

<form id="formulario">
<div class="modal-body">
<button class="fa fa-search" id="pesquisarDados" onclick="mostrarTabela();"></button>
<label for="pesquisa">Pesquisar</label>
<input type="text" name="pesquisar" id="pesquisar" class="form-control" aria-describedby="pesquisa" placeholder="Pesquisar">
<table style="display: none;" class="table table-bordered table-striped table-condensed table-hover" id="mostraTable">
<thead>
<tr>
<a style="cursor: pointer;"><td><input type='checkbox' value="1" id="inputDado" name="inputDado" /><b> Identificador</b><span class="gridSortAsc"></span></td></a>
<td><b>Nome</b><span class="gridSortAsc"></span></td>
</tr>
</thead>
<tbody id="mostraDadosTable">

</tbody>
</table>
</div>
</form>

<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
<button type="button" class="btn btn-primary" id="inserirDado" onclick="insereDado();">Salvar</button>
</div>
</div>
</div>
</div>


this form is inside my Modal. And here my JavaScript with Ajax, which makes the request for my PHP:



<script>
//seleciona os checkbox
$("#checkTodos__").change(function () {
$("input:checkbox").prop('checked', $(this).prop("checked"));
});

$("#checkTodos__").click(function(){
$('input:checkbox').not(this).prop('checked', this.checked);
});

$("#inputDado").change(function () {
$("input:checkbox").prop('checked', $(this).prop("checked"));
});

$("#inputDado").click(function(){
$('input:checkbox').not(this).prop('checked', this.checked);
});

var checkTodos = $("#checkTodos");
checkTodos.click(function () {
if ($(this).is(':checked')){
$('input:checkbox').prop("checked", true);
} else {
$('input:checkbox').prop("checked", false);
}
});

//limpa o campo de pesquisa do modal
$('#Modal').on('hidden.bs.modal', function () {
$('#formulario').each(function() {
$('#pesquisar').val('');
});
});

//mostra a tabela no modal quando clica no Pesquisar
function mostrarTabela(){
document.getElementById('mostraTable').style.display = '';
}

//quando não tiver algo digitado na pesquisa, irá trazer todos os registros
function pesquisaTodosDados(){
$('#mostraDadosTable').empty(); //Limpando a tabela
$('#formulario').on('submit', function(e){
e.preventDefault();
$.ajax({
type:'POST',
dataType: 'json',
url: 'actions.php',
data: {
selecionaDados: "true",
iduser: '1185621'
},
success: function(data){
//alert('sucesso');
for(var i = 0; data.length > i; i++){
//Adicionando registros retornados na tabela
$('#mostraDadosTable').append('<tr><td><input type="checkbox" value="1" id="inputDado" name="inputDado" />&nbsp;&nbsp;'+data[i].idrole+'</td><td>'+data[i].nmrole+'</td></tr>');
}
}
});
});
}

//requisição assíncrona via Ajax e método Post para o arquivo getDados, e trás o que o usuário digitou na pesquisa
function pesquisaDadosFiltrados(){
$('#mostraDadosTable').empty(); //Limpando a tabela
$('#formulario').on('submit', function(e){
e.preventDefault();
$.ajax({
type:'POST',
dataType: 'json',
url: 'getDados.php?pesquisar',
data: {
pesquisar: $('#pesquisar').val()
},
success: function(data){
//Adicionando os registros filtrados na tabela
for(var i = 0; data.length > i; i++){
$('#mostraDadosTable').append('<tr><td><input type="checkbox" value="1" id="inputDado" name="inputDado" />&nbsp;&nbsp;' + data[i].idrole + '</td><td>' + data[i].nmrole + '</td></tr>', '');
};
},
error: function() {
alert('Ocorreu um erro na requisição');
}
});
});
}

//dispara as funções para pesquisar todos os dados ou somente os dados filtrados, conforme requisição
$(document).ready(function(){

$('#pesquisarDados').click(function(){
pesquisa = $('#pesquisar').val()
pesquisarDados(pesquisa);
});

function pesquisarDados(pesquisa){
if (pesquisa == "") {
pesquisaTodosDados();
} else {
pesquisaDadosFiltrados();
}
}
});

//insere dados conforme requisição for disparada no botão salvar do modal
function insereDado(){
$(document).ready(function(){
var arr = ;
$("input:checkbox[name=inputDado]:checked").each(function(){
arr.push($(this).val());
console.log('valor checkbox inputDado: ', arr);
});

$.ajax({
type:'POST',
dataType: 'json',
url: 'insertDado.php',
data: {
insereDados : "true",
inputDado : arr
},
success: function(data){
console.log('dado retornado: ', data);
console.log('valor checkbox inputDado no success: ', inputDado);
for(var i = 0; data.length > i; i++){
$('#tablePrincipal').append('<tr><td>' + data[i].idrole + '</td><td>' + data[i].nmrole + '</td></tr>');
};
},
error: function() {
alert('Ocorreu um erro na requisição');
}
});
});
}
</script>


and finally, my page insertDado.php that does the INSERT in the table



<?php
define('NOSESSION', true);
require_once("../../global.php");
require_once("../specific/se_schulze.php");

$inputDado = $_POST['inputDado'];

function insereDados($inputDado){

global $conn;

$SQL = "INSERT INTO ADROLE (idrole, nmrole)
SELECT ADR.IDROLE, ADR.NMROLE FROM ADROLE ADR WHERE ADR.IDROLE = '" . $inputDado . "' AND ADR.NMROLE = '" . $inputDado . "'";

$cur = $conn->execute($SQL);

$vetor = "";
$registro = "";

if($cur){
$registro["idrole"] = $cur->fields["idrole"];
$registro["nmrole"] = $cur->fields["nmrole"];
$vetor = $registro;
}

echo json_encode($vetor);


}



insereDados($inputDado);


?>



some help?
I've been trying to solve some time







javascript php ajax






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 9 at 17:26

























asked Nov 9 at 10:57









Bruno Elias de Souza

61




61












  • in your ajax ftn when you populate the table with the results from data, are you certain the results are being populated? In your INSERT, you are assuming it will return a list of records. Try console.log in your JavaScript to see the results, or you can use alert.
    – mcv
    Nov 9 at 13:36










  • this is my problem, when I fill in the results that came from the request, this data is being filled as nulls in the table, that is, console.log ('returned data:', data); comes null
    – Bruno Elias de Souza
    Nov 9 at 13:40












  • If you want a list of records to populate your $vector, you might want to perform a select query.
    – mcv
    Nov 9 at 13:40










  • What does the browser console window display for the output? if NULL or "" it's because you're returning an empty value.
    – mcv
    Nov 9 at 13:48










  • also is the record being stored properly in your database? I don't see a $conn->commit();
    – mcv
    Nov 9 at 13:49




















  • in your ajax ftn when you populate the table with the results from data, are you certain the results are being populated? In your INSERT, you are assuming it will return a list of records. Try console.log in your JavaScript to see the results, or you can use alert.
    – mcv
    Nov 9 at 13:36










  • this is my problem, when I fill in the results that came from the request, this data is being filled as nulls in the table, that is, console.log ('returned data:', data); comes null
    – Bruno Elias de Souza
    Nov 9 at 13:40












  • If you want a list of records to populate your $vector, you might want to perform a select query.
    – mcv
    Nov 9 at 13:40










  • What does the browser console window display for the output? if NULL or "" it's because you're returning an empty value.
    – mcv
    Nov 9 at 13:48










  • also is the record being stored properly in your database? I don't see a $conn->commit();
    – mcv
    Nov 9 at 13:49


















in your ajax ftn when you populate the table with the results from data, are you certain the results are being populated? In your INSERT, you are assuming it will return a list of records. Try console.log in your JavaScript to see the results, or you can use alert.
– mcv
Nov 9 at 13:36




in your ajax ftn when you populate the table with the results from data, are you certain the results are being populated? In your INSERT, you are assuming it will return a list of records. Try console.log in your JavaScript to see the results, or you can use alert.
– mcv
Nov 9 at 13:36












this is my problem, when I fill in the results that came from the request, this data is being filled as nulls in the table, that is, console.log ('returned data:', data); comes null
– Bruno Elias de Souza
Nov 9 at 13:40






this is my problem, when I fill in the results that came from the request, this data is being filled as nulls in the table, that is, console.log ('returned data:', data); comes null
– Bruno Elias de Souza
Nov 9 at 13:40














If you want a list of records to populate your $vector, you might want to perform a select query.
– mcv
Nov 9 at 13:40




If you want a list of records to populate your $vector, you might want to perform a select query.
– mcv
Nov 9 at 13:40












What does the browser console window display for the output? if NULL or "" it's because you're returning an empty value.
– mcv
Nov 9 at 13:48




What does the browser console window display for the output? if NULL or "" it's because you're returning an empty value.
– mcv
Nov 9 at 13:48












also is the record being stored properly in your database? I don't see a $conn->commit();
– mcv
Nov 9 at 13:49






also is the record being stored properly in your database? I don't see a $conn->commit();
– mcv
Nov 9 at 13:49



















active

oldest

votes











Your Answer






StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














 

draft saved


draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53224398%2finsert-modal-data-in-table-via-ajax-php-and-javascript%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown






























active

oldest

votes













active

oldest

votes









active

oldest

votes






active

oldest

votes
















 

draft saved


draft discarded



















































 


draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53224398%2finsert-modal-data-in-table-via-ajax-php-and-javascript%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







Popular posts from this blog

Landwehr

Reims

Schenkenzell