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.
If you want to ask for a budget, we hare available for hire!.
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.
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:
Lorem Ipsum is simply dummy 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.
Lorem Ipsum is simply dummy 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.
[/code]
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:
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 divisionwhen 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 contentfrom 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:
[code language="html"]
Home
Lorem Ipsum is simply dummy 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.
Lorem Ipsum is simply dummy 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.
We have interviewed Victor Espigares, creator of visualizeus!
[/code]
Here you have external.html:
[code language="html"]
External content!
In this case we are loading the External section from other external file, instead of use jQuery selectors in the sections.html file.
[/code]
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:
[code language="javascript"]
$(document).ready(function(){
// all the code goes here! including functions!!!
});
[/code]
We are going to save references of each used jQuery selector in variables:
[code language="javascript"]
//References
var sections = $("#menu li");
var loading = $("#loading");
var content = $("#content");
[/code]
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:
[code language="javascript"]
//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();
};
[/code]
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:
[code language="javascript"]
//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;
}
});
[/code]
We are showing the loading bar, find the selected section and load the content if needed and finallyhiding 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.
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.
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 :)
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.
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
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.
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.
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
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.
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.
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.
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
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.
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.
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:
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.
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?
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?
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.
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?
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?
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.
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!
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!!
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 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 ?
December 30th, 2008
Here is the layout code:
“Home News Interviews External” these links are too light and no hand cursor on hover.
Nice post!!
$vote++;
Thanks you
happy new year!
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.[...]…
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
Quite easy tutorial to follow, but working GREAT!!! Thanks alot!
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
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!
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
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.
Amazing !!! thanks my friend
[...] See the original post here: How to load content via AJAX in jQuery | yensdesign – Tutorials … [...]
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/
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?
Hi,
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?
hi
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
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/
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.
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
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!
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.
Hi,
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
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?
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.
[...] 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 [...]
Oh !! This really helped me a lot..!!!
Thanks for your post and keep it up!!
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
Excellent source!
CEO Innovative Consulting
http://www.groupiconsulting.com
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
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!!!
Erik
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?
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.
Is it possible to access a particular section from another page link?
Erik
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?
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
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.
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?
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.
[...] 54)How to load content via Ajax in jQuery [...]
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!
Funny how a little thinking gets the wheels turning….great TUT!
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!!
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.
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 ?
Thanks !
great tut, got it to work on Firefox and Safari…
but with Google Chrome it’s not working. any clue on what I’m doing wrong?
thanks!
nevermind the comment above. i ran the site on a local MAMP server and it worked.
Hi, great tutorial, but when i downloaded files, the example don’t work in chrome ??? some solution?
Sir/Ma’am,
I would like to know if a jquery tab will work inside the loaded content?.
I mean the tabs are in the external page.
I’ve done a test but still fail.. do you know what can I do to make a jquery tab that will work inside a loaded content.
Kindly provide a sample please..
Thanks,
Roqz
thanks a lot for providing this information. thanks
you save my day, thank you
Very helpful! Thank you!
How do I fadeIn/fadeOut content instead of the default slideUp/slideDown. I tried various combinations but it doesn’t seem to work.
Please help.
Hey mate,
Nice tut,
the only part i cant figure out is this
” switch(this.id){ ”
Why did you use this.id and what does it mean?
Thanks
Great, but…
It doesn’t work on Chrome 13 and Opera 11.