I am trying to fetch some data from a SQL database.
First I load the Primary Keys and some name to a dropdown. When the user clicks on an item, I'm trying to load a table with the rest of the values of the SQL object. I've read that the best way to do it is with Ajax, but turning it into a table-loading format is proving difficult.
Is there somewhere where I can find some reference for loading tables/data from Ajax and displaying it on the same page? (It is relatively simple if I do a POST to a new page, however I'd like to load it on the same page. Like showing a hidden .)
The SQL tables:
CREATE TABLE Cliente (
ClaveCliente int AUTO_INCREMENT primary key,
Nombre varchar(100) not null,
RFC varchar(30) not null
);
CREATE TABLE DatosMes (
ClaveDatos int AUTO_INCREMENT primary key,
FechaDatos date not null,
Ingresos smallint not null,
Depositos smallint not null,
Transferencias smallint not null,
Cheques smallint not null,
Provisiones smallint not null,
Pasivos smallint not null,
Revision smallint not null,
Envio smallint not null,
Pago smallint not null,
Balanza smallint not null,
Catalogo smallint not null,
Informativa smallint not null,
ISR smallint not null
);
CREATE TABLE DatosMesCliente (
ClaveDMC int AUTO_INCREMENT not null,
ClaveCliente int not null,
ClaveDatos int not null,
PRIMARY KEY (ClaveDMC),
FOREIGN KEY (ClaveCliente) REFERENCES Cliente(ClaveCliente),
FOREIGN KEY (ClaveDatos) REFERENCES DatosMes(ClaveDatos)
);
Sorry about the Spanish terms.
Javascript
<script>
$(document).ready(function() {
var populateDatosMes = function(e) {
var populateDatosMesTBody = function(r) {
r = JSON.parse(r);
var tbody = $("#DatosMesTable tbody");
tbody.children().remove();
if(r.length > 0) {
for(var i in r) {
tbody.append(
$("<tr>")
.append($("<td>").text(r[i].Ingresos))
.append($("<td>").text(r[i].Depositos))
.append($("<td>").text(r[i].Transferencias))
.append($("<td>").text(r[i].Cheques))
.append($("<td>").text(r[i].Provisiones))
.append($("<td>").text(r[i].Pasivos))
.append($("<td>").text(r[i].Revision))
.append($("<td>").text(r[i].Envio))
.append($("<td>").text(r[i].Pago))
.append($("<td>").text(r[i].Balanza))
.append($("<td>").text(r[i].Catalogo))
.append($("<td>").text(r[i].Informativa))
.append($("<td>").text(r[i].ISR))
);
}
}
else {
tbody.append(
$("<tr>")
.append($("<td>")
.text("No data to display.")
.attr("colspan", 13))
);
}
};
var ClaveCliente = $("#ClienteSelectBox option:selected").val();
$.ajax({
type: "GET",
url: "/query/DatosMes.php",
/**
* Note:
* DatosMes.php should return a JSON format output similar to this:
* [
* {
* ClaveDatos: "",
* FechaDatos: "",
* Ingresos: "",
* Depositos: "",
* Transferencias: "",
* Cheques: "",
* Provisiones: "",
* Pasivos: "",
* Revision: "",
* Envio: "",
* Pago: "",
* Balanza: "",
* Catalogo: "",
* Informativa: "",
* ISR: ""
* },
* ...
* {
* ClaveDatos: "",
* FechaDatos: "",
* Ingresos: "",
* Depositos: "",
* Transferencias: "",
* Cheques: "",
* Provisiones: "",
* Pasivos: "",
* Revision: "",
* Envio: "",
* Pago: "",
* Balanza: "",
* Catalogo: "",
* Informativa: "",
* ISR: ""
* }
* ]
*
*/
data: {
"ClaveCliente": ClaveCliente
},
success: populateDatosMesTBody,
error: function(jqXHR, textStatus, errorThrown) {
alert("Error on retrieval of DatosMes: " + textStatus);
}
});
};
var populateCliente = function(r) {
var ClienteSelectBox = $("#ClienteSelectBox");
if(ClienteSelectBox.length == 0) {
return;
}
else {
ClienteSelectBox.children().remove();
var r = JSON.parse(r);
if(r.length > 0) {
for(var i in r) {
ClienteSelectBox.append(
$("<option>")
.val(r[i].ClaveCliente)
.text(r[i].Nombre)
);
}
ClienteSelectBox.bind("change", populateDatosMes);
}
else {
alert("No Cliente data retrieved.");
}
}
};
$.ajax({
type: "GET",
url: "/query/Cliente.php",
/**
* Note:
* Cliete.php should return a JSON format output similar to this:
* [
* {
* ClaveCliente: 1,
* Nombre: "asdasd",
* RFC: "qweqwedsa"
* },
* {
* ClaveCliente: 2,
* Nombre: "asdasd",
* RFC: "qweqwedsa"
* },
* {
* ClaveCliente: 3,
* Nombre: "asdasd",
* RFC: "qweqwedsa"
* },
* ...
* {
* ClaveCliente: X,
* Nombre: "asdasd",
* RFC: "qweqwedsa"
* },
* ]
*
*/
success: populateCliente,
error: function(jqXHR, textStatus, errorThrown) {
alert("Error on retrieval of Cliente: " + textStatus);
}
});
});
</script>
HTML
<select id="ClienteSelectBox"></select>
<br>
<br>
<table id="DatosMesTable">
<thead>
<tr>
<th>Ingresos</th>
<th>Depositos</th>
<th>Transferencias</th>
<th>Cheques</th>
<th>Provisiones</th>
<th>Pasivos</th>
<th>Revision</th>
<th>Envio</th>
<th>Pago</th>
<th>Balanza</th>
<th>Catalogo</th>
<th>Informativa</th>
<th>ISR</th>
</tr>
</thead>
<tbody></tbody>
</table>
Sorry for late reply, perhaps you've already found an answer. But this is can be the front-end answer to your problem.
<!DOCTYPE html>
<html lang="en">
<head>
...
<script>
$(document).ready(function() {
var populateDatosMes = function(e) {
var populateDatosMesTBody = function(r) {
var tbody = $("#DatosMes tbody").children().remove();
if(r.length > 0) {
for(var i in r) {
tbody.append(
$("<tr>")
.append($("<th>").text(i + 1 + "."))
.append($("<td>").text(r[i].ClaveDatos))
.append($("<td>").text(r[i].FechaDatos))
.append($("<td>").text(r[i].Ingresos))
.append($("<td>").text(r[i].Depositos))
.append($("<td>").text(r[i].Transferencias))
.append($("<td>").text(r[i].Cheques))
.append($("<td>").text(r[i].Provisiones))
.append($("<td>").text(r[i].Pasivos))
.append($("<td>").text(r[i].Revision))
.append($("<td>").text(r[i].Envio))
.append($("<td>").text(r[i].Pago))
.append($("<td>").text(r[i].Balanza))
.append($("<td>").text(r[i].Catalogo))
.append($("<td>").text(r[i].Informativa))
.append($("<td>").text(r[i].ISR))
);
}
}
else {
tbody.append(
$("<tr>")
.append($("<td>")
.text("No data to display.")
.attr("colspan", 16))
);
}
};
var ClaveCliente = $(this).children("option:selected").val();
$.ajax({
type: "GET",
url: "/query/DatosMes.php",
/**
* Note:
* DatosMes.php should return a JSON format output similar to this:
* [
* {
* ClaveDatos: "",
* FechaDatos: "",
* Ingresos: "",
* Depositos: "",
* Transferencias: "",
* Cheques: "",
* Provisiones: "",
* Pasivos: "",
* Revision: "",
* Envio: "",
* Pago: "",
* Balanza: "",
* Catalogo: "",
* Informativa: "",
* ISR: ""
* },
* ...
* {
* ClaveDatos: "",
* FechaDatos: "",
* Ingresos: "",
* Depositos: "",
* Transferencias: "",
* Cheques: "",
* Provisiones: "",
* Pasivos: "",
* Revision: "",
* Envio: "",
* Pago: "",
* Balanza: "",
* Catalogo: "",
* Informativa: "",
* ISR: ""
* }
* ]
*
*/
params: {
"ClaveCliente": ClaveCliente
},
success: populateDatosMesTBody,
error: function(jqXHR, textStatus, errorThrown) {
alert("Error on retrieval of DatosMes: " + textStatus);
}
});
};
var populateCliente = function(r) {
var ClienteSelectBox = $("#ClienteSelectBox");
if(ClienteSelectBox.length == 0) {
return;
}
else {
ClienteSelectBox.children().remove();
if(r.length > 0) {
for(var i in r) {
ClienteSelectBox.append(
$("<option>")
.val(r[i].ClaveCliente)
.text(r[i].Nombre)
// or .text(r[i].RFC)
);
}
ClienteSelectBox.bind("change", populateDatosMes);
}
else {
alert("No Cliente data retrieved.");
}
}
};
$.ajax({
type: "GET",
url: "/query/Cliente.php",
/**
* Note:
* Cliete.php should return a JSON format output similar to this:
* [
* {
* ClaveCliente: 1,
* Nombre: "asdasd",
* RFC: "qweqwedsa"
* },
* {
* ClaveCliente: 2,
* Nombre: "asdasd",
* RFC: "qweqwedsa"
* },
* {
* ClaveCliente: 3,
* Nombre: "asdasd",
* RFC: "qweqwedsa"
* },
* ...
* {
* ClaveCliente: X,
* Nombre: "asdasd",
* RFC: "qweqwedsa"
* },
* ]
*
*/
success: populateCliente,
error: function(jqXHR, textStatus, errorThrown) {
alert("Error on retrieval of Cliente: " + textStatus);
}
});
});
</script>
</head>
<body>
...
<select id="Cliente"></select>
<table id="DatosMes">
<thead>
<tr>
<th></th>
<th>ClaveDatos</th>
<th>FechaDatos</th>
<th>Ingresos</th>
<th>Depositos</th>
<th>Transferencias</th>
<th>Cheques</th>
<th>Provisiones</th>
<th>Pasivos</th>
<th>Revision</th>
<th>Envio</th>
<th>Pago</th>
<th>Balanza</th>
<th>Catalogo</th>
<th>Informativa</th>
<th>ISR</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
...
</body>
</html>