ajax javascript cambio dinamico contenido div

jmm87 · #1 (**permalink**) 08/07/2014, 06:29

Hola buen dia..tengo una web en html donde hay un contenido de un div que cambia mediante javascript. les paso mi index para que vean como funciona. no tengo explicacion pero funcionaba y dejo de funcionar solo. alguien podria decirme si hay algo mal o si podria hacerlo mas prolijo gracias

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es">
 
<head>
    <title>Munditour</title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" href="css/estilo.css" type="text/css">
    <link rel="stylesheet" href="css/slide.css" type="text/css">
    <link rel="stylesheet" href="css/formulario.css" type="text/css">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.featureList-1.0.0.js"></script>
    <script type="text/javascript" src="js/formResevas.js"></script>
 
    
    <script language="javascript">
    $(document).ready(function() {
 
        $.featureList(
            $("#tabs li a"),
            $("#output li"), {
                start_item  :   1
            }
        );
 
        $('#btnInicio').click(function() {
            $.ajax({
                url: 'inicio.html',
                success: function(data) {
                $('#seccionDos').html(data);
                }
            });
        });
        
        $('#btnEmpresa').click(function() {
            $.ajax({
                url: 'inicio.html',
                success: function(data) {
                $('#seccionDos').html(data);
                }
            });
        });
        
        $('#btnRecorrido').click(function() {
            $.ajax({
                url: 'recorrido.html',
                success: function(data) {
                $('#seccionDos').html(data);
                }
            });
        });
        
        $('#btnChequeras').click(function() {
            $.ajax({
                url: 'reservas.html',
                success: function(data) {
                $('#seccionDos').html(data);
                }
            });
        });
        
        $('#btnVehiculos').click(function() {
            $.ajax({
                url: 'inicio.html',
                success: function(data) {
                $('#seccionDos').html(data);
                }
            });
        });
        
        $('#btnContacto').click(function() {
            $.ajax({
                url: 'contacto.html',
                success: function(data) {
                $('#seccionDos').html(data);
                }
            });
        });
        
        
    });
    </script>
 
</head>
 
<body>
<div id="fb-root"></div>
 
<script>(function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/es_LA/sdk.js#xfbml=1&version=v2.0";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
</script>
 
    <div id="principal">
        <section>
            <!--Contenido-->
            <div id="contenido">
                <!--Cabecera-->
                <header>
                    <nav>
                        <ul>
                            <li><a id="btnInicio" href="javascript:function();">Inicio</a></li>
                            <li><a id="btnEmpresa" href="javascript:function();">Empresa</a></li>
                            <li><a id="btnRecorrido" href="javascript:function();">Recorridos/Horarios</a></li>
                            <li><a id="btnChequeras" href="javascript:function();">Chequeras</a></li>
                            <li><a id="btnVehiculos" href="javascript:function();">Vehiculos</a></li>
                            <li><a id="btnContacto" href="javascript:function();">Contacto</a></li>
                        </ul>
                    </nav>
                </header>
                <!--Fin Cabecera-->
                <div id="seccionUno">
                    
                    <!--Slider-->
                    <div id="feature_list">
                        <ul id="tabs">
                            <li>
                                <a href="javascript:;">
                                    <p>Hola esto es una prueba Hola esto es una prueba Hola esto es una prueba 
                                    Hola esto es una prueba Hola esto es una prueba...</p>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    <p>Hola esto es una prueba Hola esto es una prueba Hola esto es una prueba 
                                    Hola esto es una prueba Hola esto es una prueba...</p>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    <p>Hola esto es una prueba Hola esto es una prueba Hola esto es una prueba 
                                    Hola esto es una prueba Hola esto es una prueba...</p></a>
                            </li>
                        </ul>
                        
                        <ul id="output">
                            <li>
                                <img src="img/sample1.jpg"/>
                            </li>
                            <li>
                                <img src="img/sample2.jpg"/>
                            </li>
                            <li>
                                <img src="img/sample3.jpg" width="620px"/>
                            </li>
                        </ul>
                    </div>  
                    <!--Fin Slide-->
                    
                </div>          
                <!--Fin Seccion 1-->
 
                <div name="seccionDos" id="seccionDos">
                
                    <div id="colIzq">
                        <h1>Comentarios:</h1>
                        <div class="fb-comments" data-href="https://www.facebook.com/MunditourOeste?ref=hl" data-width="300" data-numposts="4" data-colorscheme="light"></div>
                    </div>
                    
                    <div id="colDer">
                        <h1>Munditour...</h1>
 
                        <p>es una empresa líder en el transporte privado de pasajeros 
                        de zona Oeste del gran Buenos Aires. </p>
                        
                        <p>Pioneros en el rubro, volvimos renovados 
                        para ofrecerte el mejor servicio con mejor precio del mercado, 
                        con la calidad y excelencia que nos caracteriza. </p>
 
                        <p>En Munditour ponemos especial énfasis en la seguridad, es por ello que todas nuestras 
                        unidades se encuentran habilitadas en la Comisión Nacional de Transporte, nuestros choferes 
                        cuentan con Licencia Nacional Habilitante expedida por la C.N.R.T. y contamos con las 
                        pólizas de seguro que la ley exige para el traslado de personas, también todos los 
                        vehículos poseen su verificación técnica semestral, esto es una garantía de que ellos 
                        están en condiciones de óptimo mantenimiento.</p>
                        
                        <div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-width="610" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>
                    </div>
                    
                </div>
                <!--Fin Seccion Dos-->
                
                </div>
            <!--Fin contenido-->
        </section>
        
        <!--Pie-->
        <footer>
            <div id="pie">
                <p>Derechos reservados Aptitud Interactiva</p>
            </div>
        </footer>
        <!--Fin Pie-->
    </div>
</body>
</html>

Alexis88 · #2 (**permalink**) 08/07/2014, 09:18

¿En la consola se muestra algún mensaje de error?

jmm87 · #3 (**permalink**) 08/07/2014, 13:00

Cita:

Iniciado por Alexis88

¿En la consola se muestra algún mensaje de error?

comenzo a funcionar solo de nuevo. no se q paso. todo un dia sin funcionar y ahora funciona :S... igual me parece un poco desprolijo. como haria lo mismo con un archivo js externo?

Alexis88 · #4 (**permalink**) 08/07/2014, 13:57

Cita:

Iniciado por jmm87

¿Cómo haría lo mismo con un archivo js externo?

Solamente tendrías que mover el código JS que tienes en el archivo principal hacia el nuevo archivo JS y luego lo incluyes del mismo modo en que hiciste con la librería jQuery y otros archivos que veo por ahí.

Saludos