I have a web page in joomla that wants that when I update the data it will automatically be reflected without needing to refresh the entire web page.
What should I do?
This is my code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
function crearReloj() {
var ahora = new Date();
var h = ahora.getHours();
var m = ahora.getMinutes();
var s = ahora.getSeconds();
var dd = ahora.getDate();
var mm = ahora.getMonth()+1;
var yyyy = ahora.getFullYear();
m = corregirHora(m);
s = corregirHora(s);
document.getElementById('reloj').innerHTML = dd +"/"+mm+"/"+yyyy+" "+h+":"+m+":"+s;
//TASAS DEL DIA
document.getElementById("MXN").innerHTML = "10.10";
document.getElementById("PEN").innerHTML = "60.00";
document.getElementById("EUR").innerHTML = "232.00";
document.getElementById("PPAL").innerHTML = "184.00";
document.getElementById("PAB").innerHTML = "217.00";
//var t = setTimeout(function(){crearReloj()},1000);
}
setInterval(crearReloj,1000);
function corregirHora(i) {
if (i<10) {i = "0" + i};
return i;
}
</script>
<script>
$(document).ready(function() {
var refreshId = setInterval( function(){
$('#MXN').load('index.php');//actualizas el div
}, 1000 );
});
</script>
<body onLoad="crearReloj()">
<table style="width: 199.567px; margin-left: auto; margin-right: auto;">
<thead>
<tr>
<td style="width: 40px;">México</td>
<td style="width: 40px;"><img src="images/img/mexico.ico" alt="" width="43" height="43" /></td>
<td id="peso" style="width: 148.567px; text-align: right;"><span style="font-size: 18.5pt;"><strong><div id="MXN"></div></strong></span></td>
</tr>
</thead>
<tbody>
<tr>
<td style="width: 40px;">Perú</td>
<td style="width: 40px;"><img src="images/img/sol.png" alt="" width="42" height="42" /></td>
<td id="sol" style="width: 148.567px; text-align: right;"><span style="font-size: 18.5pt;"><strong><div id="PEN"></div></strong></span></td>
</tr>
<tr>
<td style="width: 40px;">España</td>
<td style="width: 40px;"><img src="images/img/eur.png" alt="" width="39" height="39" /></td>
<td id="eur" style="width: 148.567px; text-align: right;"><span style="font-size: 18.5pt;"><strong><div id="EUR"></div></strong></span></td>
</tr>
<tr>
<td style="width: 40px;">PayPal</td>
<td style="width: 40px;"><img src="images/img/ppay.png" alt="" width="39" height="39" /></td>
<td id="eur" style="width: 148.567px; text-align: right;"><span style="font-size: 18.5pt;"><strong><div id="PPAL"></div></strong></span></td>
</tr>
<tr>
<td style="width: 40px;">Panamá</td>
<td style="width: 40px;"><img src="images/img/pab.png" alt="" width="39" height="39" /></td>
<td id="eur" style="width: 148.567px; text-align: right;"><span style="font-size: 18.5pt;"><strong><div id="PAB"></div></strong></span></td>
</tr>
</tbody>
</table>
<p></p>
<head> <meta http-equiv="refresh" content="120"> </head>
<div class="caption" align="center"><span style="font-size: 11pt;"><strong>Actualización: 01/11/2018 - 09:51</strong></div>
<div id="reloj" align="center"></div>