Question

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?

Comments

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

---

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.

---

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

---

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

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

---

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

Saludos.

---

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.

---

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/

---

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

---

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

---

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

Answer 1

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