[SOLUCIONADO] jQuery .load carga parcial no me funciona

quico5 · #1 (**permalink**) 13/04/2013, 02:55

La idea es recargar solo ciertas partes al pulsar un enlace en lugar de cargar la nueva página entera

Por alguna razón que desconozco no me sale
Error

Cita:

$('article').load($(this).attr('href') article);

Ok

Cita:

$('article').load($(this).attr('href'));

EJ jQuery

Cita:

$('#result').load('ajax/test.html #container');

Gracias

Cita:

emprear · #2 (**permalink**) 13/04/2013, 06:41

La forma correcta sería esta

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es-ar">
<head>
<meta charset="utf-8" />
<title>Html5</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$('a').click(function(event) {
event.preventDefault(); // evitar la acción del link al href
var url = $(this).attr('href');
$('article').load(url + ' article');
});
});
//]]>
</script>
</head>
<body>
<a href="load2.html">cargar</a>
<article>
</article>
</body>
</html>

load2.html

Código:

<article>
	cargado con load
</article>
<p>
	aaaaaa
</p>

cuando presentes estos ejemplo es importante que postees también tu html
SAludos

quico5 · #3 (**permalink**) 13/04/2013, 07:12

Muchas Gracias, por cierto y lo siguiente que utilidad tiene

Cita:

//<![CDATA[

Cita:

//]]>

quico5 · #4 (**permalink**) 13/04/2013, 09:22

una ultima cosa, con la Función preventDefault() creo que se anulan totalmente los enlaces, algo he leído sobre apoyar con HASH para habilitar las fechas de navegación del navegador Anterior y Siguiente, no se por donde seguir buscando

Gracias

Cita:

event.preventDefault(); // evitar la acción del link al href

emprear · #5 (**permalink**) 13/04/2013, 11:25

Cita:

Iniciado por quico5

una ultima cosa, con la Función preventDefault() creo que se anulan totalmente los enlaces, algo he leído sobre apoyar con HASH para habilitar las fechas de navegación del navegador Anterior y Siguiente, no se por donde seguir buscando

Gracias

el bloque CDATA se usa para que cuando validás el parser xml no analice el javascript.
no sería relevante en el caso de html5, pero como en las plantillas de mi editor de texto los tengo incorporados, los pongo.
si, con preventDfault conseguis eso, si tuvieses otros links en la página, ponele una clase a los que uses para hacer load. o sencillamente, no uses a, usá otra etiqueta y otro atributo para recuperar la url.
Para navegar con ajax y mantener el historial, utilizá pushState, o buscá documentación sobre history.js
Saludos

quico5 · #6 (**permalink**) 13/04/2013, 16:34

¿porque me sale con un enlace solo y no me sale con un enlace en un nav>ul>li>a?
quizás sea por

Cita:

$('nav').load('nav.html #E1');

la idea es usar esta estructura nav>ul>li>a, quizás como mucho, nav>ul>li>ul>li>a

parece que lo del historial tendré que estudiarlo con calma

gracias

http://anhida.es/responsive/

emprear · #7 (**permalink**) 13/04/2013, 16:45

desarrolla más tu html, porque asi no se entiende para nada, si veo los posts anteriores estás cargando con load dentro de un nav haciendo click en un a que está dentro de ese nav
SAludos

quico5 · #8 (**permalink**) 13/04/2013, 17:07

he descartado cargar nav.html en el TAG NAV para simplificar, me da la sensación de que jQuery no se aplica a las partes cargadas con load, ¿es correcto?

¿mejor así?

Cita:

<!DOCTYPE HTML>
<html lang="es">
<head>
<meta charset="utf-8">
<title></title>

<script src="js/jquery.js"></script>
<script>
//<![CDATA[
$(document).ready(function(){
$('nav a').click(function(event) {
event.preventDefault(); // evitar la acción del link al href
var url = $(this).attr('href');
$('article').load(url + ' article');
$('aside').load(url + ' aside');
});
});
//]]>
</script>

<link rel="stylesheet" type="text/css" href="style/style.css">
</head>
<body>
<header><h1></h1></header>
<nav><ul>
<li><a href="index.html">Pagina_1</a></li>
<li><a href="dos.html">Pagina_2</a></li>
</ul>
</nav>
<article>Cero</article>
<aside>Uno</aside>
</body>
</html>

Cita:

<!DOCTYPE HTML>
<html lang="es">
<head>
<meta charset="utf-8">
<title></title>

<script src="js/jquery.js"></script>
<script>
//<![CDATA[
$(document).ready(function(){
$('nav a').click(function(event) {
event.preventDefault(); // evitar la acción del link al href
var url = $(this).attr('href');
$('article').load(url + ' article');
$('aside').load(url + ' aside');
});
});
//]]>
</script>

<link rel="stylesheet" type="text/css" href="style/style.css">
</head>
<body>
<header><h1></h1></header>
<nav><ul>
<li><a href="index.html">Pagina_1</a></li>
<li><a href="dos.html">Pagina_2</a></li>
</ul>
</nav>
<article>dos</article>
<aside>tres</aside>
</body>
</html>

quico5 · #9 (**permalink**) 13/04/2013, 17:33

Creo que lo voy pillando, gracias ;)

http://anhida.es/responsive

Solo me queda la duda del anterior Post, ¿por ejemplo una galería jQuery se puede llamar por load o en su caso no podría aplicarse el jQuery? en los mensajes anteriores cargaba el menu por load y no se le aplicaba el jQuery

Cita:

<!DOCTYPE HTML>
<html lang="es">
<head>
<meta charset="utf-8">
<title></title>

<script src="js/jquery.js"></script>
<script>
//<![CDATA[
$(document).ready(function(){
$('nav a').click(function(event) {
event.preventDefault(); // evitar la acción del link al href
var url = $(this).attr('href');
$('article').load(url + ' article');
$('aside').load(url + ' aside');
});

$('#previous').click(function(){
window.history.back();
});
$('#forward').click(function(){
window.history.forward();
});

function loadView(view){
$('nav').load('views/'+view+'.html');
}
function printHistoryLength(){
$('span').text(window.history.length);
}

$('nav').on('click','a',function(event){
if (typeof window.history.pushState == 'function') {
event.preventDefault();
var view = $(this).attr('href');
window.history.pushState(view, null, view);
loadView(view);
printHistoryLength();
}
});

window.history.replaceState($('strong').text(), null, $('strong').text());
printHistoryLength();

window.onpopstate = function(event){
loadView(window.history.state);
};

});
//]]>
</script>

<link rel="stylesheet" type="text/css" href="style/style.css">
</head>
<body>
<header><h1></h1></header>
<nav>
<ul>
<li><a href="index.html">Pagina_1</a></li>
<li><a href="dos.html">Pagina_2</a></li>
</ul>
</nav>
<article>Cero</article>
<aside>Uno</aside>
</body>
</html>

quico5 · #10 (**permalink**) 13/04/2013, 18:05

En este ejemplo cargo el menu via PHP (HTACCESS->HTML)

Cada enlace de entrada muestra los enlaces de un color, para distingir que esta funcionando correctamente
http://anhida.es/responsive/index.html
http://anhida.es/responsive/dos.html
http://anhida.es/responsive/tres.html

emprear · #11 (**permalink**) 13/04/2013, 18:12

Cita:

Iniciado por quico5

En este ejemplo cargo el menu via PHP (HTACCESS->HTML)

Cada enlace de entrada muestra los enlaces de un color, para distingir que esta funcionando correctamente
http://anhida.es/responsive/index.html
http://anhida.es/responsive/dos.html
http://anhida.es/responsive/tres.html

Ahora me confundiste, cual es el problema de esas páginas?
y esto
menu via PHP (HTACCESS->HTML)
que significa exactamente?

quico5 · #12 (**permalink**) 13/04/2013, 18:25

Discúlpame emprear, quizás me haya explicado mal, ahora ya me funciona, puse los últimos enlaces como ejemplo para poder comprobar los resultados, al moverse por los enlaces estos conservan el mismo color, pero si se abren en una pestaña nueva tienen distintos colores, comprobando así que funciona correctamente, al menos es lo que me parece, el resultado es una plantilla de trabajo, creo que practica para evitar redundancia, osea, algunas partes siempre se cargan, para agilizar las cargas he pensado que se cargue lo común la primera vez

tengo los archivos con extensión HTML, en estos archivos por defecto no funciona el lenguaje PHP
para uso ocasional he tirado del archivo .HTACCESS con el siguiente codigo

Cita:

AddType x-mapp-php5 .html .htm

para el servidor 1and1

Espero estar llevando unas practicas mas o menos correctas, de todas formas estoy abierto a sugerencias

gracias

P.D: El INCLUDE de PHP lo uso para cargar NAV.HTML

emprear · #13 (**permalink**) 13/04/2013, 18:40

ok, correcto. y es mucho más logico que cargarlo con load

Saludos