[SOLUCIONADO] Cargar contenido en un DIV con función js

[nades]

Hola!
Estoy haciendo un sitio dinámico con PHP.
Lo que necesito es que al seleccionar un link el contenido lo cargue dentro de un div.

Ya lo logre con uno queda así:

Código Javascript:

function cargaContenido() {
    $('#contenido').load('documento.php');
  }
 

y mi link

Código PHP:

<a href="#" onclick="cargaContenido();">Cargar</a>
 

pero tengo varios links en mi pagina y se me hace tedioso hacer eso para cada link a parte de que no creo que sea funcional por lo que he estado buscando la forma de hacer una función en que todos los links me los cargue en el div

Tengo esto

Código Javascript:

document.getElementsByTagName('a').onclick = cargaContenido;
  function cargaContenido() {
      $('#contenido').load(href);   
  }
 

Lo que me falta es leer el href de cada link pero aún no se como.

Mi link ya lo deje normal

<a href="documento.php">Cargar</a>

alguna ayuda

[fhederico]

Hola,

Asumiendo que deseas que sean todos los link de tu pagina, ponemos algo asi

Código:

<script type="text/javascript">
   
    $(document).ready(function()
    {
        $("a").on("click", function(event)
        {
            //Cancela el evento del href, por defecto al pinchar en un link
            // te envia a este, con esto evitamos que ejecute el link
            event.preventDefault();            

           //Cargamos el contenido del enlace
            $('#contenido').load(this.href);
        });
    });

</script>

Y los link

Código:

<div id="contenido"></div>
            
<a href="count.php">Cargar</a>
<a href="count1.php">Cargar1</a>

Ahora si quieres que sea para un determinado sector de tu web puedes envolverlo en un div y ejecutar solo eso

Código:

<div id="divHref">
            
      <a href="count.php">Cargar</a>
     <a href="count1.php">Cargar1</a>
</div>

Y solo cambiaria esto en nuestra funcion JS, le decimos que dentro del div con id "divHref", cargue los link

Código:

       $("#divHref a").on("click", function(event)

Saludos

[nades]

Muchas gracias fhederico pero no me ha funcionado

Me envía a otra página, no me lo esta cargando en el div.

Como yo lo había intentado en un principio me funcionaba

Código Javascript:

function cargaContenido() {
    $('#contenido').load('documento.php');
}
 

Coloque una función para cada link. En realidad en la página principal tengo5 links y funciona bien. Me carga cada contenido de cada página que llamo en el div CONTENIDO. El problema resulta cuando interactuo con las páginas que me carga. Ya que estas también tienen links e incluso formularios, etc. Una vez que quiero continuar enviando un formulario o yendo a un link normal ya no me lo carga en el DIV si no me envia a su página.

Es por eso que estoy intentando que todos lo links me los cargue en contenido. Ya hice pruebas colocando esa función con algunos links que tengo en los sitios y me funciona pero como te comento son muchos y no quiero hacer eso con todos.

Tendrás alguna sugerencia???

[fhederico]

Puedes colocar tu codigo o alguna URL donde pueda verlo en vivo en y en directo?

Saludos

[nades]

Perdon por tardar pero no hallaba donde subirlo. A penas m dieron acceso jeje
Ya mas o menos resolvi mi problema

Coloque este codigo dentro de un js y a todas las paginas le meti que incluyera el js.

Código Javascript:

$(document).ready(function(){
     $("a").each(function(){
        var href = $(this).attr("href");
        $(this).attr({ href: "#"});
        $(this).click(function(){
           $("#contenido").load(href);
        });
     });
  });
 

Todos los links ya se muestran dentro del div CONTENIDO Pero de repente se traba, se queda cargando y ya no me muestra nada. ¿A qué se deberá?

También me queda por resolver como hacer para que todos los formularios al enviarlos me lleve el resultado al mismo DIV

El sitio se encuentra en residencelheritage.com/prueba para que entiendas de lo que hablo

De antemano gracias por tu ayuda

[fhederico]

Hola,

Primero que todo, actualiza tu archivo JQuery, estas ocupando la version 1.4 y ya vamos en la 1.9

Código:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Sobre tu codigo, puse lo que te habia dicho originalmente, con la unica salvedad que como lo llamamos por el class debe ir .menu, si lo llamamos por el ID debe ser #menu, por lo tanto ocupe esto

Código:

 $(document).ready(function()
    {
        $(".menu a").on("click", function(event)
        {
            //Cancela el evento del href, por defecto al pinchar en un link
            // te envia a este, con esto evitamos que ejecute el link
            event.preventDefault();            

           //Cargamos el contenido del enlace
            $('#contenido').load(this.href);
        });
    });

Ya que tu otra funcion lo que hacia era cambiar el href, por lo tanto si intentabas volver a cargar la pagina te cargaba un @2013

No estoy seguro, asi que tendras que confirmarme esto, cuando cargas la pagina por ejemplo "usuarios.php" esta pagina tiene solo el contenido? es decir, no contiene etiquetas html o body cierto? ya que solo estas cargando el contenido de dicha pagina por lo tanto no deberias ponerlo como una pagina web, no se si me explico.

Sobre tu otra pregunta, cuando cargas una web por ajax, y deseas que por ejemplo guarde los datos cuando estas creando un usuario nuevo deberas ocupar AJAX para que ejecute tu consulta sin recargar la pagina, esto obviamente deberia ir dentro de la pagina que estas cargando, es decir, si estas creando un nuevo usuario y cargas la pagina por ejemplo "usuario_new" dentro de esta debera ir la consulta por AJAX.

Por ultimo, tienes comentarios HTML dentro de los JS, esto te producira error ya que no los reconoce, por ejemplo

Código:

<!-- Función que confirma si desea eliminar un registro -->

A se me olvidaba, existe un complemento para firefox, llamado firebug, es MUY util y te permite ver los errores que se generan entre muchas funciones, buscalo.

Saludos

[nades]

Muchas gracias por ayudarme con esto y por tu tiempo! De verdad que ya me estaba haciendo líos.

Probare el código que me has mandado y te avisare si funciona. Solamente que esto solo afectara al menu ¿cierto? Lo que sucede es que las otras páginas cargadas también tienen links y eso no afectará a estos.

Asi es, las páginas cargadas solo tienen contenido php, ninguna etiqueta html.

Muchas gracias por el tip para mis formularios. Buscare algo relacionado con AJAX

En cuanto a los comentarios en los JS los coloque para que no me olvidará de lo que hacia mi función. No crei que causara problema. Gracias por el dato

Saludos

[nades]

Mira que ya me han funcionado bien los enlaces con el tip que me diste pero de repente se me traba. No sea si sea debido al servidor o al sistema o que el script tarde mucho en pensar. Pero bueno ya lo veré más adelante.

Por ahora ya he empezado con el formulario de agregar usuarios

Código Javascript:

<script type="text/javascript">
  $(document).ready( function() {
    $("#registro").click( function() { // Con esto establecemos la acción por defecto de nuestro botón de enviar
      if(validaAltaUsuarios()){ // Primero validará el formulario
        $.post("inc/users_alta.php",$("#formdata").serialize(),function(res){
            $("#formulario").fadeOut("slow");   // Hacemos desaparecer el div "formulario" con un efecto fadeOut lento
                if(res == 1){
                    $("#existe").delay(500).fadeIn("slow");
                } else  {
                    $("#fracaso").delay(500).fadeIn("slow"); 
                }
            });
        }
    });    
  });
</script>
 

Coloco este script para validar mi formulario y cuando este correcto envio por POST mis datos del formulario. Pero no me deja validar por completo. Al momento de darle aceptar cuando me arroja el mensaje me manda a la pagina principal. Lo mismo ocurre cuando coloco todos los datos y no me agrega nada.

[fhederico]

Hola,

Hablemos esto por privado, ya que ahora ya son otros los errores y no terminaremos nunca por aqui xD

Saludos