Este es el codigo.
Primero el html:
Código :
<html>
<head>
<title>Boards 'R' Us</title>
<link rel="stylesheet" type="text/css" href="boards.css" />
<script type="text/javascript" src="text-utils.js"> </script>
<script language="javascript" type="text/javascript">
var request = null;
function createRequest() {
try {
request = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (othermicrosoft) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
request = null;
}
}
}
if (request == null)
alert("Error creating request object!");
}
function getBoardsSold() {
createRequest();
var url = "getUpdatedBoardSales-ajax.php";
// con la direccion completa tampoco funciona, no muestra codigo pero no hace nada
//var url = "http://localhost/boards/boards/getUpdatedBoardSales-ajax.php";
request.open("GET", url, true);
request.onreadystatechange = updatePage;
request.send(null);
}
function updatePage() {
if (request.readyState == 4) {
var newTotal = request.responseText;
var boardsSoldEl = document.getElementById("boards-sold");
var cashEl = document.getElementById("cash");
replaceText(boardsSoldEl, newTotal);
// calcular cuanto dinero se ha ganado
var priceEl = document.getElementById("price");
var price = getText(priceEl);
var costEl = document.getElementById("cost");
var cost = getText(costEl);
var cashPerBoard = price - cost;
var cash = cashPerBoard * newTotal;
/* Actualizar el total en el formulario */
cash = Math.round(cash * 100) / 100;
replaceText(cashEl, cash);
}
}
</script>
</head>
<body>
<h1>Boards 'R' Us :: Informe de Custom Boards </h1>
<div id="boards">
<table>
<tr><th>Snowboards vendidas</th>
<td><span id="boards-sold">1012</span></td></tr>
<tr><th>Por cuanto las vendo</th>
<td>$<span id="price">249.95</span></td></tr>
<tr><th>Lo que me cuesta</th>
<td>$<span id="cost">84.22</span></td></tr>
</table>
<h2>Ganancia:
$<span id="cash">167718.76</span></h2>
<form method="GET">
<input value="Mostrar" type="button"
onClick="getBoardsSold();" />
</form>
</div>
</body>
</html>
Ahora el PHP
Código :
<?php
// Mostrar un numero arbitrario de boards vendidas
$totalSold = 1012;
// mostrar las nuevas ventas
srand((double)microtime() * 1000000);
$totalSold = $totalSold + rand(0,1000);
echo $totalSold;
?>
El js
Código :
function replaceText(el, text) {
if (el != null) {
clearText(el);
var newNode = document.createTextNode(text);
el.appendChild(newNode);
}
}
function clearText(el) {
if (el != null) {
if (el.childNodes) {
for (var i = 0; i < el.childNodes.length; i++) {
var childNode = el.childNodes[i];
el.removeChild(childNode);
}
}
}
}
function getText(el) {
var text = "";
if (el != null) {
if (el.childNodes) {
for (var i = 0; i < el.childNodes.length; i++) {
var childNode = el.childNodes[i];
if (childNode.nodeValue != null) {
text = text + childNode.nodeValue;
}
}
}
}
return text;
}
y el css, por si lo quereis ver mas claro:
Código :
body {
font-family: Verdana, Geneva, Arial, sans-serif;
font-size: small;
text-align: center;
}
h1 {
color: #cc6600;
border-bottom: thin dotted #888888;
font-size: 1.7em;
}
h2 {
font-size: 1.3em;
}
table {
margin-left: auto;
margin-right: auto;
border: thin solid black;
caption-side: bottom;
border-collapse: collapse;
font-size: small;
}
td, th {
border: thin dotted grey;
padding: 5px;
text-align: center;
}
th {
background-color: #fcba7a;
}
