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?

bl4z3r comentado Feb 25, 2016

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

bichomen comentado Feb 25, 2016

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.

carlossevi comentado Feb 25, 2016

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).

bichomen comentado Feb 25, 2016

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

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

Peter comentado Feb 25, 2016

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

Saludos.

bichomen comentado Feb 26, 2016

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.

bichomen comentado Feb 26, 2016

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/

Peter comentado Feb 26, 2016

¿@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.

x4mp73r comentado Feb 26, 2016

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

bichomen comentado Feb 29, 2016

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

1 Respuesta

0voto

bichomen Puntos1980

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.

¿Conoces alguien que puede responder?
¡Comparte esta pregunta!


Actividad Reciente

¿Eres Usuario Apple?

...

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

Conecta