How to load content via AJAX in jQuery

We available for hire! — Need help with a web or mobile project?

December 30th, 2008

Ey guys! We want to share with you a new tutorial called How to load content via AJAX in jQuery and as you may suppose it will be focused in learn how to load content from other files by using jQuery.

It’s a simple but useful tutorial for those who need to know how to load dynamically some static content in their websites via AJAX. I have decided to write it because Cyanade ( an user from our forums) asks some questions about dynamic content and ajax in their post Integrating jQuery into an app.

Here is a preview image:

You can try the living example before continue reading the tutorial.

Tested in: Firefox, Internet Explorer 6 & 7, Opera, Safari & Chrome.

So I hope He and You find it useful!

A little Introduction

There are a lot of tutorials about loading content via AJAX in different ways, We will do it by using jQuery and without controlling the current section via URL, but I want to say you that if You are interested in that, you can see our tutorial focused in dynamic sections based on anchor navigation named Creating AJAX Websites Based on Anchor Navigation, it may be useful.

So We will create a minimalist page with a loading bar that is displayed only when the selected section is loading via AJAX. It will be interesting to see that we can import the section’s content in 2 ways:

All sections are in the same external file, organized in different divisions.
All sections in different external files (just load the entire file).

We will achieve our goal by using the power of load function (to load external files) and selectors of jQuery.

Let’s dive into the tutorial guys!

Step 1: The layout

In this case we will create a simple and clean layout with a main division called container with these divisions:

top
- menu: contains list of sections
loading: contains the loading bar
content: contains the content of the current section

I know guys, names are clear enough… but who knows? Here is the layout code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta name="keywords" content="yensdesign, tutorial, ajax, jquery, javascript, load content" />
	<meta name="description" content="How to load content via AJAX in jQuery - yensdesign.com"/>
	<title>How to load content via AJAX in jQuery. By yensdesign.com</title>
	<link rel="stylesheet" type="text/css" media="screen" href="css/main.css" />
</head>
<body>
	<div id="container">
		<div id="top">
			<h1><a href="/">yensdesign - Tutorials, Web Design and Coding</a></h1>
			<ul id="menu">
				<li id="home">Home</li>
				<li id="news">News</li>
				<li id="interviews">Interviews</li>
				<li id="external">External</li>
			</ul>
			<span class="clear"></span>
		</div>
		<div id="loading">
			<img src="css/images/loading.gif" alt="Loading..." />
		</div>
		<div id="content">
			<h2>Home</h2>
			<p>
				Lorem Ipsum is simply <a href="">dummy</a> text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
			</p>
			<p>
				Lorem Ipsum is simply dummy text of the printing and <a href="">typesetting industry</a>. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
			</p>
		</div>
		<div id="footer">
			<p>Made by <a href="http://www.yensdesign.com">yensdesign.com</a>. We hope you find this tutorial useful for your personal projects :)</p>
		</div>
	</div>
	<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"></script>
	<script type="text/javascript" src="menu.js"></script>
</body>
</html>
</body>

Nothing special… just continue reading guys, let’s see the CSS!

Step 2: Adding style to our minimalist example

We will make use of yensdesign header for save time, well and because our header is cool hehe Here is the main.css file:


@CHARSET "UTF-8";
/******* GENERAL RESET *******/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
 tfoot, thead, tr, th, td {
border: 0pt none;
font-family: inherit;
font-size: 100%;
font-style: inherit;
font-weight: inherit;
margin: 0pt;
padding: 0pt;
vertical-align: baseline;
}
body{
	line-height: 14px;
	font-size: 12px;
	background: #fff;
	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
	margin: 0pt;
	cursor: default;
}
table{
	border-collapse: separate;
	border-spacing: 0pt;
}
caption, th, td{
	font-weight: normal;
	text-align: left;
}
blockquote:before, blockquote:after, q:before, q:after{
	content: "";
}
blockquote, q{
	quotes: "" "";
}
input, textarea, select{
	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
}
strong{
	font-weight: 700;
}
ul{
	list-style: outside;
}
a{
	cursor: pointer;
	color: #296ba5;
	text-decoration: none;
}
.clear{
	clear: both;
	height: 0;
	visibility: hidden;
	display: block;
}
/******* /GENERAL RESET *******/
/******* REUSE *******/
h1, h2, h3, h4, h5, h6{
	font-weight: 700;
	color: #6ea6fb;
	line-height: 1.8em;
}
h2{
	font-size: 22px;
}
/******* /REUSE *******/
/******* CONTAINER *******/
#container{
	width: 960px;
	margin: 0pt auto;
	color: #fff;
}
/******* /CONTAINER *******/
/******* TOP *******/
#top{
	margin: 0 auto;
	padding: 20px 0 0 0;
}
#top h1 a{
	background: transparent url(images/logo.jpg) no-repeat scroll left top;
	display: block;
	float: left;
	height: 46px;
	text-indent: -999999px;
	width: 205px;
}
/******* /TOP *******/
/******* MENU *******/
#top #menu{
	float: left;
	list-style-type: none;
	margin: 12px 0 0 26px;
}
#top #menu li{
	float: left;
	margin-right: 16px;
	text-transform: uppercase;
	color: #c2c2c2;
}
#top #menu li:hover{
	color: #6fa5fd;
	cursor: pointer;
}
/******* /MENU *******/
/******* LOADING *******/
#loading{
	text-align: center;
	visibility: hidden;
}
/******* /LOADING *******/
/******* CONTENT *******/
#content{
	color: #7e7e7e;
	margin: 0 0 20px 0;
	line-height: 1.3em;
	font-size: 11px;
}
#content p{
	margin-bottom: 0.7em;
}
#content a{
	font-weight: 700;
	color: #6fa5fd;
	border-bottom: 1px dotted #6fa5fd;
}
/******* /CONTENT *******/
/******* FOOTER *******/
#footer{
	background: #efefef;
	border: 1px solid #d0ccc9;
	padding: 10px;
	color: #7e7e7e;
	font-size: 11px;
	text-align: right;
}
/******* /FOOTER *******/

As you can see We didn’t use link elements for sections of the menu, We don’t need them because We will manage all this interaction with javascript.

Now pay attention, It’s interesting and important:

We have used visibility:hidden for our #loading division because We don’t want to lose the height of this division when we hide or change the opacity because It produces an ugly and strange visual effect. Remember that We didn’t use display:none becauase it produces the same visual “problem“.

Come on guys, let’s go to the jQuery part

Step 3: Loading content dynamically with jQuery

As we said, We will load content in 2 ways: locating each section in the same file (sections.html) and loading all the content from an external file (external.html).

So first of all, We are going to create these 2 external files with their content.

Here you have sections.html:


<div id="section_home">
	<h2>Home</h2>
	<p>
		Lorem Ipsum is simply <a href="">dummy</a> text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
	</p>
	<p>
		Lorem Ipsum is simply dummy text of the printing and <a href="">typesetting industry</a>. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
	</p>
</div>

<div id="section_news">
	<h2>News</h2>
	<p>
		We have released our forums, <a href="http://forums.yensdesign.com">check it out</a>!
	</p>
</div>

<div id="section_interviews">
	<h2>Interviews section</h2>
	<p>
		We have interviewed Victor Espigares, creator of <a href="http://www.visualizeus.com">visualizeus</a>!
	</p>
</div>

Here you have external.html:


<div id="section_external">
<h2>External content!</h2>
In this case we are loading the External section from other external file, instead of use jQuery selectors in the sections.html file.</div>

Creating different divisions for each section will help Us to load the desired content, mainly for the sections.html file.

Let’s take a look to our menu.js file, remember that the entire following code will be in the ready event of jQuery, including functions, because We will make use of jQuery references in variables. So I repeat, all the following code in the ready event:


$(document).ready(function(){
   // all the code goes here! including functions!!!
});

We are going to save references of each used jQuery selector in variables:


//References
	var sections = $("#menu li");
	var loading = $("#loading");
	var content = $("#content");

We will create 2 functions to manage the loading bar called: hideLoading() and showLoading() to hide & show the loading section respectively . Here you have the code:


//show loading bar
function showLoading(){
	loading
		.css({visibility:"visible"})
		.css({opacity:"1"})
		.css({display:"block"})
	;
}
//hide loading bar
function hideLoading(){
	loading.fadeTo(1000, 0);
	content.slideDown();
};

Easy right? Only comment:

We have used fadeTo instead of fadeOut because the fadeOut applies a display:none at the end of the animation (I didn’t know that or just changed in recent versions?).

So We only need to manage the click event on each element of the menu to finish this part, one more time jQuery makes it easy:


//Manage click events
sections.click(function(){
	//show the loading bar
	showLoading();
	//load selected section
	switch(this.id){
		case "home":
			content.slideUp();
			content.load("sections.html #section_home", hideLoading);
			break;
		case "news":
			content.slideUp();
			content.load("sections.html #section_news", hideLoading);
			break;
		case "interviews":
			content.slideUp();
			content.load("sections.html #section_interviews", hideLoading);
			break;
		case "external":
			content.slideUp();
			content.load("external.html", hideLoading);
			break;
		default:
			//hide loading bar if there is no selected section
			hideLoading();
			break;
	}
});

We are showing the loading bar, find the selected section and load the content if needed and finally hiding the loading bar.

We have used jQuery selectors to find and load an specific division of an external file (sections.html) to load the content of these sections: home, news and interviews.
In the other hand, we just load all the entire content of external.html for the external section.

And that’s all guys! Easy as always

Step 4: Testing our dynamic content!

And that’s all guys, as you can see it’s easier than You thought

I hope you enjoy this tutorial and thanks Cyanide for inspiring me to write this tutorial.

You can try the tutorial online here to see how It is working and download here all sources.

One more thing guys! Remember that you can fint the answers to your doubts and help others visiting yensdesign forums and follow os on Twitter to know more about what are we doing in any moment!

See you on next tutorial!

One more thing…

Subscribe for best quality 642-812 practice questions and answers prepared by our certified team to provide you guaranteed success. The 70-647 prep tools are designed to fit into every schedule so you will prepare and pass your exam on time. Such a flexible 70-649 study plan that you would never found anywhere else.

Gemstone rings are the most coveted accessory items to date. LusterForever earrings are a must to try on.

Tags: ajax, content, jquery, load, tutorial
Category: Coding, Tutorials

This entry was posted on Tuesday, December 30th, 2008 at 1:27 pm and is filed under Coding, Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Enjoy this post?

Your vote will help us to grow this website and write more entries like this one :)

We available for hire! — Need help with a web or mobile project?

From yensdesign we develop technology projects based on web apps, mobile apps, consulting and databases. We are young and hard workers, passionate about innovation and focused in new technologies. We try to help you, sharing our knowledge acquired on worked projects, while helping the community and showing our capabilities.

If you want to ask for a budget, we hare available for hire! Don't doubt in get in touch with us!.

Murugan

December 31st, 2008

“Home News Interviews External” these links are too light and no hand cursor on hover.

Nice post!!
$vote++;

Adrián Mato Gondelle

Thanks you happy new year!

Web 2.0 Announcer

How to load content via AJAX in jQuery…

[...]It’s a simple but useful tutorial for those who need to know how to load dynamically some static content in their websites via AJAX.[...]…

nucklear

January 2nd, 2009

Any example send and load with Jquery?
Happy new year ñ.ñ

@nuklear: I will try to publish a tutorial sending and receiving data via ajax with php and jquery

James

January 6th, 2009

Quite easy tutorial to follow, but working GREAT!!! Thanks alot!

Gustavo Baldera

January 7th, 2009

Thanks a lot for this tutorial it helps me a lot to develop my studio website..I will post my finals results when I finish..thanks again and keep doing this great job

That’s great Gustavo! Remember that you can show your projects in our forums on this category: http://forums.yensdesign.com/index.php/board,10.0.html

January 8th, 2009

Adrian now I have something wrong, for example in my dynamic content I have implemented some other Ajax scripts like thickbox but it doesn’t work when i load the new content.

Did you included the script for the thickbox in the specific section? What kind of error show you the firebug console?

hablas español? asi puedo explicarte mejor…

anyway, I put a example on http://gprueba.awardspace.com/prueba/prueba.html, if you hover the mouse on the las image called “VERANO” (the yellow one) yo can see that it loads and another image using a tooltip script or if you click on it it loads thickbox, but if you load the second section (using the pagination below) you can see that the scripts dont work..I tried to include every one of them in the sections but it doesn’t work either…can you check it out

@Gustavo Yes I am from Spain, so I speak spanish, but it will be better in english to let people understand it

I am not pretty sure but I think you have a problem with dinamic content. By creating new content dinamically yo need to reapply the events to the new DOM elements that you have created dinamically.

You can do that manually or using Live jQuery plugin: http://plugins.jquery.com/project/livequery

Good luck!

January 9th, 2009

thanks for your help…I’m not a jQuery programer so I made some test and I found a solution..if you use a mouse event like “onmouseover” “onmouseout” your script will work…thanks anyway for the advice

That’s great Gustavo

Janis

January 12th, 2009

Hi.
I am having the same problem as Gustavo. Everything works just fine when i load a div containing normal html, but on some of the pages I want to embed a movie and I cant get it to work.
I see that you suggested to use livequery and I was wondering if you could give me an example on how I can do this? I am a beginner with javascript and jquery.

Here is the code in the content:

var cnt = document.getElementById(”mediaspace”);
var src = ’silverlight/wmvplayer.xaml’;
var cfg = {
file:’movies/mymovie.wmv’,
height:’300′,
width:’400′,
windowless:’true’,
overstretch:’fit’
};
var ply = new jeroenwijering.Player(cnt,src,cfg);
cnt.style.paddingTop = ‘10px’;
cnt.style.marginLeft = ‘auto’;
cnt.style.marginRight = ‘auto’;

It works fine if I go directly to the page, but when I load it with Ajax it doesn’t.
Any help would be appreciated.

The tags didn’t show up, but it is contained in script-tags.

@Janis Hi there! Take a look at this example: http://docs.jquery.com/Plugins/livequery#Overview

It’s very easy to use and it will do the nasty work for you

Thanks for the tip.
I have now managed to get the links in the loaded content to work like the menu-links do, however I still wonder how I can get the javascript in the loaded content to work.
I would imagine it to be: $(’script’).livequery(function(){ (or something like that) ,but what should the function contain? I want it to load when the content loads.
I am also having a problem with the charset, but thats not so important right now.
But I would like to find out how to bind the javascript along with the links.

@Janis If I am not wrong, you need to define all functions using livequery, so it will test if something was created so you dont need to redeclare in two times the same functions, right?

I am not shure if I understand you correctly.
But just to be shure that you understand what I am trying to do:
I have a index.php with a #menu and a #content
page2.php and page3.php also contain a #menu and a #content. On page2.php the #content consists of text and page3.php #content consists of text and some javascript( embedded movie).
What happens now is that when i load the content in page3 into index only the text shows up and the javascript is ignored.
I want it so that when I load the content the javascript is also loaded, but I am very unshure on how to manage this.
I am a beginner with javascript and jquery and therefore have little or no idea on how to do this.

Santana

January 19th, 2009

Amazing !!! thanks my friend

How to load content via AJAX in jQuery | yensdesign - Tutorials … | Apni Library

January 21st, 2009

[...] See the original post here: How to load content via AJAX in jQuery | yensdesign - Tutorials … [...]

dcoder405

February 6th, 2009

Thanks for this great tut. I have a question. What if I want to load an external file form another website ie that file is not in my website?

Thanks in advance

@dcoder405 Thank you too! Just try it by yourself or try this: http://yensdesign.com/2008/10/create-a-professional-interface-for-your-web-applications-using-jquery/

D. K.

February 8th, 2009

Hi,

Awesome work…

But…I guess I have the same problem as Janis and don’t know how the livequery plugin could be used in my case.

I have an image rotator which function is called in my index.html:

$(’#cycle’).cycle({
fx: ‘fade’,
speed: 500,
timeout: 5000,
pause: 1
});

Now I need to use the same functionality in an external page. But it doesn’t work when the external content is loaded.

I tried to link to the jquery files directly from the external page but whith no result.

Could someone please help me?

I managed to get it to work with the livequery plugin (thank you Adrián Mato Gondelle for the tip), so my previous post can be ignored.

There is only one thing. When the new content is loaded, all the images are shown for a brief moment and when they are binded (bound?) by livequery the cycle works like a charm.

What I want to do now is to remove the brief moment that the images are all shown…let it load first or faster.

Does anybody have a solution for this?

steven

February 17th, 2009

i wopuld like tu use the upper code but there is a problem, the page contents will not be loaded

that´s the line which should do it: $(”#aktivitaet”).load(”aktivitaet.html”, hideLoading);

the loading apears the slide too but now content is shown …..

any ideas?

sorry i made a mistake, the line in code is: $(”#tabcontent”).load(”discussion.php”, hideLoading);

i also tried get,and post insted of load, but the things the php file should create are not shown.
normaly a list like the one at http://test.divexit.de/dashboard/latest.php should be created via the discussion.php

thx

Jottae

February 18th, 2009

Just do not understand something.
How do I load external links. Instead of just links anchors.

Example:
Thus:
content.load ( “sections.html,” hideLoading);

I like:
content.load ( “http://www.myhost.com/sections.html” hideLoading);

I thanks if you can help me.

@Jottae take a look at this tutorial. Here we are loading external webpages: http://yensdesign.com/2008/10/create-a-professional-interface-for-your-web-applications-using-jquery/

Jesse Smith

February 25th, 2009

Wonderful tutorial, works like a charm, this is the first AJAX I have used, thankyou so much.

I have a question, which I believe should be very easy to answer. Essentially, Im trying to make a webpage just like your tutorial AJAX page, except with multiple AJAX divs - for simplicity’s sake, lets just imagine I want exactly your tutorial, but I just want to stack 3 of the AJAX menu elements on top of one another on the same webpage. I have tried manipulated the elements to do this, but no matter what I do the second one, etc are all inactive. I assume this has to do with the “livequery” binding stuff, but I read that link and I was pretty confused - I’m n00b. Any help would be lovely, thanks in advance.

Here is where im working on it: http://www.punditpolitics.com/political-iq-statistics.php

Nevermind I fixed it, I just had some typos. Thanks again, tutorial favorited.

March 1st, 2009

Ok now I have a real question, which hopefully Ill solve before you get to it, but I’m trying to pass some external dynamic javascript through an AJAX tab that initializes a graph. It looks like the javascript is passing through, but nothing happens. Im wondering if there is a simple piece of code to add that activates the javascript properly? Right now, if I specify a div, only the html displays, but if I don’t specify a div, like your “external.html” tab example, it displays the javascript initialized graph, but on a new page…I need it to be on the same page.

Here is the code: http://erxz.com/pb/paste

John P

March 5th, 2009

Congratulations!
I have just a little experience with jQuery and found this tutorial really useful. It’s the best I’ve come across because it’s so easy to understand and so practical. I understood the code and adapted it easily for a site I’m building.

However, I want visitors without JavaScript enabled to use the links. So I need my site to have unobtrusive JavaScript.

I created normal .php pages for each item and added anchor tags to the list items in your code, like this:

Home
News
Interviews
External

But I couldn’t get it to work at all. I’m sure I got bogged down trying to adapt the jQuery file: menu.js.

Can you suggest any solution to my problem? Any help would be much appreciated and I’m sure would be useful to many other programmers.

I’ll be a regular visitor to your site now that I’ve discovered it.
Many thanks. Great work!

mani

March 8th, 2009

I wanted to write a article myself on JQuery AJAX usages and suddenly found yours on Google. This is exactly what i needed to reference to my guys at cwebconsultants. Thank you very much, this is really a great work and have saved my time a lot.

Alan

Great tutorial, but I can’t get it to work for my content as it contains its own $(document).ready(function(){.

Any suggestions? Reading the comments it seems that quite a few people have similar queries.

Thanks,
Alan

QuynhTD

March 26th, 2009

I used this article for a MasterPage :

when click link a#, divHolder set to invisible
But after ContentPlaceHolder load an long content (right scroll of browse appear ) , then click a# to load ajax content the height of page not change (right scroll of browse still appear ). How can I change the page’s height to fit with the loading content?

Beschi

April 18th, 2009

Great! this code is very simple and i have developed a lot from this way.

Thank you very much, this tutorial helped me to start coding on my own with jquery and ajax.

Ajax Pagination with Jquery,PHP,Mysql « Beschi’s Portfolio

April 20th, 2009

[...] thanks to http://yensdesign.com , this post http://yensdesign.com/2008/12/how-to-load-content-via-ajax-in-jquery/ of him just give me an idea to do [...]

Dilishious

May 12th, 2009

Oh !! This really helped me a lot..!!!
Thanks for your post and keep it up!!

Cyber

May 19th, 2009

Hi and big thanks for this tut

Once problem doh…

is there any limits on how many links you can have ??
No matter what i do, there seems to be only 4 that works?!

I got it working on 4 of my sites, but the last 9 dosen`t.. any clues ??

Thanks again

sham

May 28th, 2009

Excellent source!
CEO Innovative Consulting
http://www.groupiconsulting.com

Carl

June 9th, 2009

Very useful text, thanks! Do you know any way to handle forms with this approach? The present data within the form will be lost?

Keep the good work up, I really like this site!

B.R
Carl

Erik

July 3rd, 2009

NEED HELP!! Does anyone know how to make the text links remain changed after clicked? Using CSS, I change the image link (via background position) upon HOVER, but how do I change the image link once selected?

Novice programmer needs help!!!

I’m getting errors in IE 7.

The script works great everywhere else.

Here is my link!

http://www.enaturalskin.com/needhelp.htm

Can anyone offer any suggestions?

Harry M

July 7th, 2009

Using this on a job where I am rewriting an admin. I have tabs that scroll you through content and ran into an issue where each tab is to use this code. I had to rewrite slightly to add variables for each tab and have a switch for each so there are no overlap, but with some extremely simple alterations it worked fantastico…thanks you saved me hours.

July 13th, 2009

Is it possible to access a particular section from another page link?

ktsixit

July 29th, 2009

Hi there,
I really like this tutorial but I have a question. Is there someway to add a “home” link into the pages that are loaded (inside the #section_home, #section_news, #section_interviews DIVS content). And this link should load the “Home” content. Is that possible? Can you help a little please?

Chhinh Sovath

August 26th, 2009

Hi there!

I found it’s very useful not only for me but also for the other developer.

However, this one you show how to load content by id within one page. What if i want to load a whole content from another page?

Can someone available to write this code for sharing???

Keep up best work!!!

Sovath

luislopez

September 3rd, 2009

Hi, I want to do something like this: http://bit.ly/1ocI0X , can anyone help me with any hints? thanks. thepanchi, where? at google mail. thx.

matt

September 8th, 2009

hey thanks for this. this is elegant and looks great and was relatively simple to implement.
One thing, I’ve had friends report that it’s not working in the latest Internet Explorer. Any thoughts on how to work around this?

Cpt. Murphy

October 5th, 2009

Hey there.
It doesn’t completely work for me. I have this code written in an .aspx page and trying to load multiple .aspx pages. It attempts to load the external aspx page but it only slideDown for a second and then it disappears. what in the world is going on?!?! The external pages have C# code behind as well as SQL Datasources.

78 jQuery Scenarios to Fall in Love | ProgrammerFish - Everything that's programmed!

October 8th, 2009

[...] 54)How to load content via Ajax in jQuery [...]

Works Great...but

October 15th, 2009

Hey so what a great Tut first off…2nd, is there anyway to have more than 4 links, when I add a five and a six, it always loads the 4th…any answers??? Thanks!

NEVER MIND

Funny how a little thinking gets the wheels turning….great TUT!

chris

October 16th, 2009

Could some of you that also had this problem please make the livequery changes in order for this to work on lower level pages? [same problem Janis had] Thank you!!

Esther

December 5th, 2009

Thanks a lot. It really a nice post.

But just not clear one thing. In menu.js,

sections.click(function(){
.
.
}

The word “sections” is come from where? As I can’t find this word in index.html

Thanks.

Daniel

February 16th, 2011

Hello,

Thanks a lot; its the most helpful posting i’ve foind so far !
Im wondering if there is a way to have another level of tabs under the list item ?
Like a sub case, in css it would look like - but how would i define it in JavaScript ?

Thanks !

Hello (nevermind the previous post),

Thanks a lot; its the most helpful posting i’ve found so far !
Im wondering if there is a way to have another level of tabs under the list item ?
Like a sub case, in css it would look like ul li ul - but how would I define it in Javascript ?