Acceso a una etiqueta padre desde una etiqueta hijo en un archivo externo con JQuery

20Ago12

La idea de esto es poder acceder y modificar los atributos de una etiqueta padre desde una etiqueta hijo siendo esta última un archivo aparte en html, php o cualquier otro, haciendo todo esto con JQuery.

Para comenzar, en un archivo inicio.php, escribimos el siguiente código:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Trasitional//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<title>Documento HTML</title>
<script type=”text/javascript” src=”jquery-1.7.2.min.js”></script>
<script type=”text/javascript” src=”funciones.js“></script>
</head>
<body>
<div id=”contenido“>
Texto en contenido padre (inicio.html).
<div id =”dinamico“>
Aca se carga el contenido del archivo externo (dinamico.html).
</div>
</div>
</body>
</html>

Aquí se puede ver que el div “dinamico” es hijo del div “contenido”. A su vez, el div “dinamico” recibirá su contenido desde un archivo dinamico.html.

Le decimos a inicio.html que cargue el contenido de dinamico.html en el div “dinamico” desde el archivo funciones.js. 

El archivo funciones.js contiene el siguiente código:

$(‘document’).ready(function(){
$(‘#contenido’).css(‘background-color’, ‘red’);
$(‘#contenido’).css(‘height’, ‘400’);
$(‘#contenido’).css(‘width’, ‘400’);
$(‘#dinamico’).css(‘background-color’, ‘yellow’);
$(‘#dinamico’).css(‘height’, ‘200’);
$(‘#dinamico’).css(‘width’, ‘350’);
$(‘#dinamico’).load(‘dinamico.html’);
});

La linea importante aquí es la  referente al método load:

Es acá donde se hace la carga del archivo dinamico.html en el div de id=”dinamico” del archivo inicio.html.

Por otro lado, el el archivo dinamico.html, contiene el siguiente código (que puede ser el que quieras):

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Trasitional//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<title>Documento HTML</title>
<script type=”text/javascript” src=”jquery-1.7.2.min.js”></script>
<script type=”text/javascript” src=”funcionesDinamico.js“></script>
</head>
<body>
Texto en contenido hijo (dinamico.html).<br>
<input type=”button” value=”Cambiar color de padre” id=”cambiarColor”/>
</body>
</html>

En este archivo podemos escribir el código que queramos, pero la idea es poder disparar algún evento desde aquí que pueda acceder y modificar atributos del archivo padre inicio.html. Esto último ĺo podemos hacer con un botón, que al apretarlo, disparará el evento click de jQuery (u onClick en javascript). A este comportamiento lo especificamos en el archivo funcionesDinamico.js.

El contenido de funcionesDinamico.js es:

$(‘document’).ready(function(){
$(‘#cambiarColor‘).click(function(){
window.parent.$(‘#contenido’).css(‘background-color’, ‘green’);
})
});

Aquí dice que cuando el botón con id=”cambiarColor”, dispare el evento click, en la página padre (mediante window.parent), se cambien los estilos css del padre.

Esto abre muchas posibilidades, como la de poder recargar un segundo archivo externo (otroArchivo.html) en el div “contenido” del archivo padre, utilidad que me ha resultado muy útil en varias oportunidades.

Anuncios


No Responses Yet to “Acceso a una etiqueta padre desde una etiqueta hijo en un archivo externo con JQuery”

  1. Dejar un comentario

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s


A %d blogueros les gusta esto: