sábado, 19 de mayo de 2012

Cargar ajax con el evento load jquery


Cargar ajax con el evento load jquery

En el siguiente ejemplo se cargará mediante load el contenido del archivo ajax.html en el archivo index.html.

$("#div").load("archivo.html", function() {
// la instrucción que quieras tras haber cargado el archivo
}


Para verlo mejor puedes hacer click en el siguiente botón ...




index.html

<!-- By http://jquery-manual.blogspot.com -->
<!DOCTYPE HTML>
<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.2.min.js'></script>
<script type="text/javascript">
$(document).ready(function() {
$(":button#boton").click(function(){
$("#caja").load("ajax.html");
 });
});
</script>
<style>
#caja{
width: 200px; 
height: 15px; 
background-color: yellow;
border-style: solid; 
border-color: blue; 
border-width: 3px;
font-family: Verdana;
padding: 20px;
font-size: 12px;
text-align: center;
color: blue;
}
</style>
</head>
<body>
<input type="button" id="boton" value="Cargar el Ajax con load">
<div id="caja"></div>
</body>
</html>


ajax.html ...

<script type="text/javascript">
var milisegundos = 5000;
tiempo = setTimeout("time()", milisegundos);
document.getElementById("texto").innerHTML = "Espere, por favor ...";
function time() {
tiempo = setTimeout("time()", milisegundos);
if (milisegundos)
{
document.getElementById("texto").innerHTML = "Ya se ha cargado el Ajax";
}
}
</script>
<b id="texto"></b>