Cargar pagina en div dependiendo del enlace que se clickee

[ir3al]

Hola buenas, estoy liado con una página y ayer estuve por la noche intentando hacer con jquery y javascript que al pinchar en un enlace la página se me abriera en un div. Le paso el id del enlace pero no me lo abre, me lo abre en otra página siempre. ¿Como puedo solucionar esto?
Os dejo mi codigo:

Código Javascript:

<script type="text/javascript">
var s = "";
 
$(document).ready(function(){
   $("#"+s).each(function(){
      var href = $(this).attr("href");
      $(this).attr({ href: "#"});
      $(this).click(function(){
         $("#principal").load(href);
      });
   });
});
 
    
 
function d_id(i){
    return s=document.getElementsByTagName('a')[i].id;
    //alert(s); 
}
</script>
 

Y en cada enlace en el onClick llamo a la función d_id(i) donde i es un valor fijo distinto que le paso en cada enlace.

¿Alguien me puede ayudar?
Un saludo.

[IsaBelM]

con la función d_id pretendes obtener la id de un elemento de la colección y ésta id pasarsela a la función en jquery.

en el jquery no estás invocando a la función d_id por lo tanto jquery busca un elemento con id (s). pero el valor de la variable (s) es vació.

no te haría falta usar javascript para obtener la id del elemento, podrías hacerlo con jquery. pero vamos a ver como se haría con javascript

en lugar de devolver la id, asigna la id a la variable (s). con lo que logras sobre escribirla

s=document.getElementsByTagName('a')[i].id;

ahora (s) tiene la id del link pulsado.

problema?? que en jquery estás usando ready() que se ejecuta antes de que el contenido de la página sea mostrado y no creo que ambos puedan interactuar de la manera que pretendes.

por lo tanto, tienes que hacerlo todo con jquery

[ir3al]

Iniciado por IsaBelM

con la función d_id pretendes obtener la id de un elemento de la colección y ésta id pasarsela a la función en jquery.

en el jquery no estás invocando a la función d_id por lo tanto jquery busca un elemento con id (s). pero el valor de la variable (s) es vació.

no te haría falta usar javascript para obtener la id del elemento, podrías hacerlo con jquery. pero vamos a ver como se haría con javascript

en lugar de devolver la id, asigna la id a la variable (s). con lo que logras sobre escribirla

ahora (s) tiene la id del link pulsado.

problema?? que en jquery estás usando ready() que se ejecuta antes de que el contenido de la página sea mostrado y no creo que ambos puedan interactuar de la manera que pretendes.

por lo tanto, tienes que hacerlo todo con jquery

¿Y como lo podria hacer en JQuery?
He cambiado los enlaces por botones.

¿Me recomiendas algun manual o algo para JQuery?

[IsaBelM]

no uso librerías. por lo tanto mi recomendación irá enfocada a usar javascript.

aunque podrías probar con

$("a").each(function(){

[ir3al]

Vale, de momento todo bien. Ahora tengo un problema que nose como solventarlo. Utilizo botones, la funcion para que me coja el id del boton que he pulsado seria asi no?

Código Javascript:

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

Ahora, ¿Como le puedo yo indicar la pagina que tiene que abrir segun seleccione el botón?

[IsaBelM]

ya te digo que no uso librerías. estas consultas será mejor que las hicieses en el foro adecuado.

prueba cambiando

$(this).attr({ href: "#"});

por

$(this).attr({"id"});

donde id tiene asignada la url hacia la pagina a traer. también sería posible usar "name"

[ir3al]

Ya está solucionado, muchas gracias. Pongo aqui el codigo con el que me ha funcionado.

Código Javascript:

$(document).ready(function(){
   $("input").each(function(){
      var href = $(this).attr("name");
      $(this).click(function(){
         $("#principal").load(href);
      });
   });
});
 

En la propiedad name del boton le indico la página que tiene que abrir.
Muchas gracias.

Una simple dudilla, ¿como puedo poner una pagina de carga hasta que muestra la pagina?

[IsaBelM]

supongo que al igual que ajax posee distintos estados (0, 1, 2, 3, 4). revisa la documentación de la api

[ir3al]

He encontrado un nuevo problema, al poner que se cargue en el div cuando seleccione un input al posicionarme en un text, tambien me hace la carga de la pagina. ¿Como puedo solucionar eso? He probado a poner en donde pone "input" poner button pero nada. ¿Tiene alguna solución?