[SOLUCIONADO] Cargar en un div o iframe de una página el div de otra

[speedmethal]

Buenas a tod@s, hace unas semanas me sacasteis del atolladero en el que me encontraba y por eso recurro a vosotros de nuevo.

Tal vez por el título me digáis que sobre esto ya se ha escrito, pero lo cierto es que navegando por el 99.9% de los post de todo internet no he encantrodo ni uno que solucione mi inquietud. Si alguien sabe de ese 0.1% dónde puede hallar la respuesta bienvenido será. ;)

Os comento. Actualmente tengo en mi "pagina_1" una lista los diferentes temas de varias asignaturas. Lo que quiero es que al pinchar sobre los temas se cargue en un iframe que está dentro de un div el contenido de otro div que está en una "página_2" que está en el mismo dominio (digo esto porque según he visto es algo que puede dar problemas). Pero no la página entera, que es lo que me pasa ahora, sino solo el div. Esta es la página en cuestion: [URL="http://aingenieros.blogspot.com/p/apuntes.html"]http://aingenieros.blogspot.com/p/apuntes.html[/URL]

Una posible solución que vi en este foro era algo similar a esta

Código del enlace:

Código:

<a target="Apuntes" href="http://aingenieros.blogspot.com/p/resistencia-de-materiales-traccion.html#Resistencia-TC">Tracción-Compresión</a>

código del iframe:

Código:

<iframe id="frame" src="" style="width: 100%; height: 100%; margin:5px auto; border:none;" name="Apuntes"></iframe>

Pero no carga solo el div, sino que carga toda la página y la pantalla hace un scrolling hasta el div en cuestión.

También vi que se podía prescindir del iframe y cargar el div directamente en otro div, así que las soluciones aquí pasaban por un poco de javascript con el que para mi ya es el famosísimo

Código:

$("#iddiv").load("contenido a mostrar")

En la página que os dejo un poco más arriba podéis ver que hay un botón "actualizar capa" que debería cambiar el contenido del div que tiene debajo. Al tío de youtube le funcionaba, pero a mi no me hace nada.

Ya he probado de todo y no sé qué más hacer. Alguna sugerencia??

Gracias de antemano y saludos

[speedmethal]

Vale, ya he encontrado la manera de harcelo. Juraría que lo llegué a tener escrito pero no funcionaba.

con este código hace lo que quiero. Al final prescindí del iframe y lo cargo en el div directamente.

Código:

<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
   $(document).ready(function() {
    $("#Traccion-Compresion").click(function(event) {
     $('#div-Apuntes').load('http://aingenieros.blogspot.com.es/p/resistencia-de-materiales-traccion.html #post-body-5725320816205339506');
    });
   });
  </script>

El problema al que me enfrento ahora es el siguiente: Para no generar un script para cada enlace necesito pasar a javascript la URL como parámetro así como el div que quiero cargar. La id de ese div es única para cada página pero siempre tiene el formato: post-body-(número), el número se almacena en una variable llamada data:post.id.

por lo que creo el javascript debería quedar algo así, pero no estoy seguro.

Código:

<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
   $(document).ready(function() {
    $("#Traccion-Compresion").click(function(event) {
     $('#div-Apuntes').load('URL #post-body-"+data:post.id"');
    });
   });
  </script>

donde URL sería el parámetro sacado del enlace y data:post.id sería la variable que contiene la id del div que quiero cargar. Es correcto esto?
Y cómo debería configurar mi etiqueta <a> para que pase estos datos a javascript?

Gracias y saludos

[speedmethal]

Ya encontré la forma,

igual no es lo más ortodoxo, pero funciona!!!!

os dejo el código por si a alguien le ayuda :)

codigo del link

Código:

<a id="Traccion-Compresion" href="http://aingenieros.blogspot.com.es/p/resistencia-de-materiales-traccion.html #post-body-5725320816205339506">Tracción-Compresión</a>

código del script

Código:

<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
   $(document).ready(function() {
    $("#Traccion-Compresion").click(function(event) {
     var urla = $(this).attr("href");
     $('#div-Apuntes').load(urla);
     event.preventDefault();
    });
   });
  </script>

así puedo comunizar el código para todos los links :D.
Lo ideal sería poder "vincular" la variable data:post.id que almacena el div con el href para que fuera un poco más rápido, pero lo haré a pico y pala buscando el #post-body-(numero) de cada una de las páginas

Saludos