Buenas,
Quiero hacer un sistema de pestañas, que cuando se pulse cada una de ellas no recargue la página, pero llame a un script vía ajax para que procese la petición y luego muestre el resultado.
La primera duda es si el script que llamo vía ajax, creéis que debería ser el mismo para las 3 pestañas y lo único que cambiara serían los parametros que le paso, o por el contrario, me recomendáis que llame a uno diferente para cada pestaña?
La segunda duda va sobre la implementación. Tengo la estructura de las pestañas montadas pero no consigo que cuando se pulse la pestaña haga la petición en ajax, algo estoy haciendo mal y está en la llamada... me podéis ayudar?
El código es el siguiente:
Código PHP:
Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/v1.98/DTD/v1.98-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Pestañas AJAX</title>
<link rel
="stylesheet" type
="text/css" media
="all" href
="ejemplo1.css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
//Referencias
var sections = $("#tabs li");
var loading = $("#loading");
var content = $("#descripcion");
//Realizar una peticion por cada tab que se pulse
sections.click(function(){
switch(this.id){
case "tab1":
showLoading();
sections.ajax({
url: 'datos.php',
type: 'GET',
async: true,
data: 'tab=1',
success: Recibir_Datos
//error: muestraError
});
break;
case "tab2":
break;
case "tab3":
break;
default:
hideLoading();
break;
}
});
//Mostrar el gif de carga
function showLoading(){
loading
.css({visibility:"visible"})
.css({opacity:"1"})
.css({display:"block"})
;
}
//Ocultar el gif de carga
function hideLoading(){
loading.fadeTo(1000, 0);
};
});
function Recibir_Datos (data){
// Cuando recibimos la respuesta convertimos esa respuesta
// en html y visualizamos esa respuesta en el div
// con id "#descripcion" que teníamos oculto en la página HTML
$("#descripcion").html(data);
$("#descripcion").show();
}
</script>
</head>
<body>
<div id="menuTabs">
<ul>
<li id="tab1"><a href="#">Pestaña 1</a></li>
<li id="tab2" ><a href="#">Pestaña 2</a></li>
<li id="tab3"><a href="#">Pestaña 3</a></li>
</ul>
<div id="descripcion">
<div id="loading">
<img src="loading.gif" alt="Loading..." />
</div>
</div>
</div>
</body>
</html>
El ejemplo se puede ver desde aquí
http://fdw.neodani.com/jquery/tabs/ejemplo1.php
Me podéis ayudar?
Muchas gracias de antemano!