Duda pestañas/tabs Ajax + Jquery

neodani · #1 (**permalink**) 10/06/2010, 14:31

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!

kokoou · #2 (**permalink**) 10/06/2010, 16:53

yo lo haría con $.load()

neodani · #3 (**permalink**) 11/06/2010, 00:07

Buenas,

Lo he probado con load, carga el contenido de la pagina... pero se le puede pasar alguna variable a la pagina tab1_contenido.php ? de ser así como la recibo en tab1_contenido.php?

Código Javascript:

Ver originalsections.click(function(){
        showLoading();
        switch(this.id){
            case "tab1":
                $("#descripcion").load("tab1_contenido.php", hideLoading);
            break;
            case "tab2":
                break;
            case "tab3":
                break;
            default:
                hideLoading();
                break;
        }
 
    });

Gracias de antemano!

chifliiiii · #4 (**permalink**) 12/06/2010, 00:03

en mi web www.timersys.com tengo una navegacion en pestañas con ajax. Mira el código con firebug a ver si te sirve. Saludoss

neodani · #5 (**permalink**) 13/06/2010, 12:29

Cita:

Iniciado por chifliiiii

en mi web www.timersys.com tengo una navegacion en pestañas con ajax. Mira el código con firebug a ver si te sirve. Saludoss

Esta bien, pero no veo que le pases ninguna variable ni por GET ni POST a las paginas que cargas no?

var toLoad= 'programas.php #contenido';
var toLoad= 'index.php #contenido';

Código Javascript:

Ver original$('#programas a').click(function(){
                var toLoad= 'programas.php #contenido';
                $('#contenido').fadeTo('slow',0.1,loadcontent);
                
                function  loadcontent(){
                    $('#contenido').load(toLoad,showContent);
                    $('body').removeClass();
                }
                function showContent(){
                        $('#contenido').fadeTo('slow',1);
                        $('body').addClass('programas');
                        comienzo();
                }
    });                 
    $('#home a').click(function(){
                var toLoad= 'index.php #contenido';
                $('#contenido').fadeTo('slow',0.1,loadcontent);
                
                function  loadcontent(){
                    $('#contenido').load(toLoad,showContent);
                    $('body').removeClass();
                }
                function showContent(){
                        $('#contenido').fadeTo('slow',1);
                        $('body').addClass('index');
                        comienzo();
                }
                
    });

Me interesa poder pasar variables a la pagina que carga, de este modo puedo utilizar una única pagina y según la variable que le envíe me cargue uno u otro contenido, sabéis si esto es posible?

Muchas gracias de antemano

neodani · #6 (**permalink**) 14/06/2010, 06:04

Conseguí pasarle parámetros por GET a la instrucción .load()

Alguien me puede decir como pasarle parámetros por POST a esta instrucción?
En la pagina del manual no lo he visto

http://api.jquery.com/load/

Muchas gracias de antemano

neodani · #7 (**permalink**) 14/06/2010, 07:45

Cita:

Iniciado por neodani

Conseguí pasarle parámetros por GET a la instrucción .load()

Alguien me puede decir como pasarle parámetros por POST a esta instrucción?
En la pagina del manual no lo he visto

http://api.jquery.com/load/

Muchas gracias de antemano

Conseguido! si pones las variables entre llaves de la siguiente forma lo trata como POST

$("#descripcion").load("tabs.php", {'opcion':'1', 'answer':'yes'}, hideLoading);

y en tabs.php puedes tener algo similar a

if ($_POST['opcion']==1){
echo "escogiste la OPCION NUMERO 1";
}

Saludos!