Geek Answers Handbook

The jQuery download part of the external HTML part

I basically have index.html shown below.

<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>

Loadpage.html cotaints

 <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>

And my goal is to basically load 1 of the div at a time into the main container, I know that the load function can load the full page at the same time, but this is NOT what I need to do.

If some people looked at such issues, but it seems they could not solve this problem.

All help is appreciated thanks guys!

+5
javascript jquery html html5 jquery-load
source share
3 answers

The jQuery .load() function allows you to specify part of the loaded page, not just the entire document.

eg.

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

Check out the jQuery load() documentation , especially where it covers "Loading page fragments . "

+11
source share

To load DIVs one by one, define a counter

 var curDiv = 1; // current Div

somewhere in the beginning (it is better to define the function $(document).ready() to initialize it). Define this function:

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

Define the click event as:

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

and you press the button:

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

Each time you click, you should get the first div, second, etc.

With this approach, you extract JS from HTML, which is always good.

+3
source share

jQuery load can easily load fragments of a page, for example

 $('#mainContainer').load('loadpage.html #nav1div');
+2
source share

More articles:


All Articles