entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

1voto

Como cargar en un div una página con jquery

Tengo esta función:

<script type="text/javascript">

    $(".enlace").on('click', function(event)
    {
        //alert(event);
        event.preventDefault(); //Se cancela la redirección 

        $.ajax(
        {
            url: $(this).prop("href")
        }
        ).done(function(data)
        {
            $("#contenedor").html(data);
        });
    });
</script>

y el formato del enlace es el siguiente:

<a href="pagina.php?variable1=1&variable2=1" class="enlace">Página</a> 

Pues bien, según el código debería cargarse pagina.php en el div contenedor, pero no lo hace, se carga a página completa, las variables pasadas por get si que llegan de forma correcta. ¿Que es lo que estoy haciendo mal?

0voto

bl4z3r comentado

¿A que te refieres con "a pagina completa"?

0voto

bichomen comentado

A ver normalmente una página web ocupa toda el área del navegador, excepto cuando utilizamos iframes, frames u objects que carga el contenido en una pequeña área delimitada por la altura y ancho que le hallamos dado. Pero también se puede conseguir el mismo efecto con divs.

Por poner un ejemplo practico tu tienes una web con un menú y cada apartado del menú quieres que se cargue en un determinado sitio normalmente con HTML5 entre las etiquetas sectión.

Pues el código de arriba no lo esta haciendo cargas las páginas y envía correctamente las variables, pero abarca todo el body, en vez quedarse dentro del div indicado.

Espero se me entienda mejor ahora lo que quiero conseguir.

3votos

carlossevi comentado

Precisamente la línea de event.preventDefault(); intenta evitar que el enlace se siga por el método tradicional, que es lo que entiendo que te está pasando. Cosas que se me ocurren:

  1. Que no está ejecutándose el Javascript ¿lo has comprobado? ¿El alert() sí que te funciona? Quizá tengas algún error de sintaxis.
  2. Que el elemento está contenido en otro elemento que tiene un disparador que hace que se recargue (otro evento click por ejemplo).

0voto

bichomen comentado

Muchas gracias, me guiaste bien el problema no fue meter el código dentro de esta función:

document.addEventListener("DOMContentLoaded", function()
{
    //codigo
}, 
false); 

2votos

Peter comentado

@bichomen si tienes la solución, por favor compártela en una respuesta nueva y seleccionala como correcta.

Saludos.

0voto

bichomen comentado

Hola, el código funciona a medias:

document.addEventListener("DOMContentLoaded", function()
{
    $(".enlace").on('click', function(event)
        {
            event.preventDefault(); //Se cancela la redirección 

            $.ajax(
            {
                url: $(this).prop("href")

            }
            ).done(function(data)
            {
                var nombre = $(".enlace").data('nombre');
                var me = $(".enlace").data('value');    
                me = "#" +nombre + me;              

                $("#contenedor").html(data);    
                if (nombre == "autor") 
                {
                    $(me).css(
                    {
                    "background-color": "#5677FC",
                    "border-style": "inset",
                    "color": "#FFFFFF"
                    });
                }           

            });
        });
    }, 
    false);
<a href="pagina.php?enlace1=1&enlace2=1" class="enlace" data-nombre="identificador" data-value="1">Pagina</a>

Me explico, tal y como lo pongo aquí hace lo que debe de hacer, hasta aquí todo correcto, esto despliega dentro del div contenedor la pagina.php, esta pagina a su vez tiene un submenu y aunque los enlaces de esos submenus están igual configurados que los enlaces del menú, vuelve a cargarse en pagina completa y no lo entiendo porque tienen la misma clase apuntan a la misma función. pero se cargan en página completa.

PD: no se como se marca una respuesta como solución o una pregunta como solucionada.

0voto

bichomen comentado

Me voy respondiendo a mi mismo, acabo de encontrar esto:

jQuery addClass() y removeClass(): Añadir y eliminar clases del DOM
http://www.anerbarrena.com/jquery-addclass-removeclass-4705/

0voto

Peter comentado

¿@bichomen alguna de todas tus respuestas es la solución?

Para seleccionarla le das al botón de "Seleccionar Respuesta" que tienes enfrente de quien la publica. (En este caso tu mismo)

Saludos.

1voto

x4mp73r comentado

Deberías de mover todas las demás respuestas a comentarios, dejando sola la verdadera y seleccionarla como respuesta correcta :D

0voto

bichomen comentado

Ya seleccione la que me parece la mejor respuesta a la pregunta inicial que puse. gracias a todos

1 Respuesta

0voto

bichomen Puntos2770

Ya encontré el problema, resulta que si a todos los links les pongo la clase "enlace" el código:

var nombre = $(".enlace").data('nombre');
var me = $(".enlace").data('value')

coge el valor siempre el valor del primer elemento que tenga la clase "enlace", con lo que tengo que hacer una clase por link y modificar la función para que primero detecte el nombre de la clase y pasarlo a la función:

var enlace = "." + enlace???
$(enlace).on('click', function(event)

Esto ultimo aún no tengo muy claro como hacerlo

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta