Jquery carga parcial de HTML externo

Basicily Tengo un index.html se muestra a continuación ..Jquery carga parcial de HTML externo

<html> 

<head> 

<title>UI Test: Main Menu</title> 

<script type="text/javascript" src="jquery-1.7.2.min.js"></script> 
<script type="text/javascript" src="general.js"></script> 

</head> 

<body> 

<input type="button" value="Details" onclick="javascript:$('#mainContainer').load('loadpage.html #name1div *');"/><br> 
<div id="mainContainer">   

</div>

Los cotaints loadpage.html

<div id="nav1div><h3>1 DIV </h3> </div> 
<div id="nav2div><h3>2 DIV </h3> </div> 
<div id="nav3div><h3>3 DIV </h3> </div> 
<div id="nav4div><h3>4 DIV </h3> </div>

Y mi objetivo es cargar básicamente 1 de los divs a la vez en el contenedor principal, sé que la función de carga puede cargar la página completa en ce, pero esto NO es lo que necesito hacer.

tenía unos pocos vistazo a preguntas similares, pero no puede parecer a resolver este ..

gracias chicos Toda ayuda se agradece!

Fuente

2012-06-21 LmC

¿Qué error obtienes? – xdazz

El .load jQuery() función le permite especificar una parte de una página se cargue, en lugar de todo el documento.

p. Ej.

$('#mainContainer').load('loadpage.html #nav1div');

Compruébelo usted mismo here y vaya a la sección titulada "Fragmentos" carga de la página.

Fuente

2012-06-21 08:58:33 GShenanigan

@ user983969 No entiendo, ¿el OP no quería los divs uno tras otro en cada clic? – Cranio

Este código lo resuelve, ya que sería el javascript que puse en cada putton para cargar cada div – LmC

@ user983969 Ok, así que quieres cargarlos * selectivamente *, eso no fue claro para mí, pensé que los querías * progresivamente *, uno tras otro, en cada clic en el * mismo * botón – Cranio

jQuery load puede cargar fácilmente fragmentos de página, al igual que

$('#mainContainer').load('loadpage.html #nav1div');

Fuente

2012-06-21 08:58:25

Para cargar DIVs uno tras otro, definir un contador de

var curDiv = 1; // current Div

en algún lugar en el inicio (mejor para definir una función $(document).ready() inicializarlo). Definir esta función:

function loadThing() 
{ 
    if (curDiv<5) $('#mainContainer').load('loadpage.html #nav' + (curDiv++) + 'div'); 
}

Definir el evento de clic como:

$("input#getdiv").click(loadThing);

y botón:

<input id="getdiv" type="button" value="Details" />

con cada clic que debe obtener primero div, segundo, y así en.

Con este enfoque usted JS separado de HTML, que siempre es bueno.

Fuente

2012-06-21 09:00:27 Cranio

NOTA: me alegro por las votaciones ascendentes, pero después de una investigación adicional resultó que el OP quiere más botones, uno para cada DIV (no estaba del todo claro en cuanto a la pregunta), lo que hace innecesario (cargando una página fragmento en el clic del evento de cada botón es suficiente). Entonces toma mi respuesta como un enfoque general. – Cranio

Jquery carga parcial de HTML externo

Respuesta

Cuestiones relacionadas