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' /> ".$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" /> '+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" /> ' + 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
|
show 8 more comments
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' /> ".$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" /> '+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" /> ' + 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
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
|
show 8 more comments
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' /> ".$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" /> '+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" /> ' + 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
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' /> ".$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" /> '+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" /> ' + 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
javascript php ajax
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
|
show 8 more comments
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
|
show 8 more comments
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
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