Hey folks over there, here I came up with simple Ajax Tabs, you guys can show case your valuable content using tabs scenario that to with Ajax. This is simple and elegant way of representing your content when your pages have tons of content to display. If you go through the code its simple and basic Ajax implementation, if you are a web-developer its easy to understand. In the example which I am attaching with this snippet article consists of index.html, ajax.js, tabs.css and lastly the content page named as contentpage1.html
If the required page is not loaded then it will show up and error like the below screen shot:
If the required page is loaded then the content is loaded onto one simple ‘div’ and this will look something similar like the screen shot below:
If there is any problem with the request or response then it will look something similar like the screen shot below:
So do you need the full content, here it is – Snippet Code for Ajax Tabs
Rock up the web world with Ajax, I will strive hard to deliver basic and high level snippets, please let us know your feedback on all the posted articles.
Related Entries...
Hey folks, here is the basic example snippet code which depicts the basic functionality of Ajax and h ...
I am going to share my thoughts on Apollo, Since last week I was working on a sample application, I h ...
Taffy DB, which is well known JavaScript database for your browser, and which is a free and opensourc ...
When I am running my Ajax web application, the application is rendering properly in Mozilla Firefox b ...
Hi developers, today I encountered one error which works fine in Mozilla Firefox but giving an error ...
Just think what Google Chrome would return when we run browser detection code written in JavaScript ? ...
Introduction: This is one of the good example on how we can load a ThickBox (Example: ThickBox relat ...
Introduction Recently, one of my reader came up with a query like "Why JavaScript is not running aft ...
Hi developers, Today I again came up with something nice and simple snippet, which helps us to retrie ...
I am back again with some good snippet on "Placing a Play Icon over the image using CSS", After going ...
29 Responses
Dear Developers, for the above snippet please use web-server for better results. You guys can use windows default server IIS.
[...] Source: http://www.developersnippets.com/?p=22 [...]
[...] Source: http://www.developersnippets.com/?p=22 [...]
[...] @ http://www.developersnippets.com/?p=22 var addthis_pub = ‘codelinkers’; Back to Codelinkers your virtual Link Sharing [...]
[quote comment="14"]Dear Developers, for the above snippet please use web-server for better results. You guys can use windows default server IIS.[/quote]
Um, what?
[...] Snippet Code for Simple Ajax Tabs with cool CSS Stylesat Developer Snippets This is simple and elegant way of representing your content when your pages have tons of content to display. (tags: tabs menu menu.example css design ajax ajax.examples) [...]
Hi Emanuel,
My Intension was to say the developers that if we want to run an Ajax Application, we need a server interaction (I mean any web server).
Ah, gotcha. Wasn’t quite clear what you were implying, thought you were telling people IIS was required to render the tabs
Hello,
I am trying to implement this on IIS and I keep getting the Error message. In fact, when I try to use the default files that I downloaded from your site, I still got the error. Are there some other changes I need to make to ajax.js?
Thanks
Rakesh.
Hi Rakesh, Firstly I would like to thank you for viewing developersnippets site, well coming to your query, in the zip file which I have attached to this article – has got three folders (images, js, style) and two html files (index.html, and contentpage1.html), so when you place this “AjaxSimpleTabs” folder into your IIS server – when you browser to index.html, the first tab would be enabled (selected) and the code will comes up as mentioned above in the second image. And if you select the second tab or third tab – it will give error message like the one which I have mentioned in the first image. I have placed content for only first tab not for tab two and three.
Hope this will solve! you, keep visiting http://www.developersnippets.com
It worked! I was unzipping all the files into the same folder without setting up the hierarchy as you suggested.
Fantastic! Thank you very much for posting this, this was very useful.
Thanks a lot,
Rakesh.
[...] Source: http://www.developersnippets.com/?p=22 [...]
[...] Source: http://www.developersnippets.com/?p=22 [...]
[...] 2. Tabs simple con AJAX y CSS: [...]
[...] 1. Snippet Code for Simple Ajax Tabs with cool CSS Styles [...]
Hey i have unzipped the folder and after that i have run the index.html page.
but when i m clicking on the first link the error message is shown as the first pic over here .and when clicking on the second and third tab its showing only “Content Loading pic”.So what to do??
Hi Hiren,
If you see my first comment on this post, you might got the answer by seeing that only. It says below the same:
“Dear Developers, for the above snippet to work please use any web-server for better results. You guys can use windows default server IIS.”
[...] Snippet Code for Simple Ajax Tabs with cool CSS Styles 2. Using XMLHttpRequest, reading XML data (Adobe AIR Application) 3. Remove special characters [...]
[...] System Error: -1072896658 in IE 2. Snippet Code for Simple Ajax Tabs with cool CSS Styles 3. Using XMLHttpRequest, reading XML data (Adobe AIR Application) 4. Remove special characters [...]
[...] and which is a free and opensource JavaScript Library which acts as a thin layer inside Web 2.0 and Ajax applications. Unique features are: * Under 10K! * Simple, JavaScript Centric Syntax * Fast * Easy to include [...]
[...] articles which you would like to read: 1. Snippet Code for Simple Ajax Tabs with cool CSS Styles 2. Simple steps to develop AJAX Website – DeveloperSnippets 3. JavaScript Visitors Browser [...]
[...] articles which you would like to read: 1. Placing a Play Icon over the image using CSS 2. Snippet Code for Simple Ajax Tabs with cool CSS Styles 3. Simple steps to develop AJAX Website – DeveloperSnippets 4. JavaScript Visitors Browser [...]
Cascading Style Sheets (CSS) web design lessons
Css link Properties Attributes – examles
http://css-lessons.ucoz.com/link-css-examples-1.htm
http://css-lessons.ucoz.com/link-css-examples-2.htm
Its really nice, Can any one tell me how to use multiple instances of this tab panel on same page ?
Hi Nikhil,
Yeah you can use, just make sure you choose unique id’s for each instances.
Thanks,
Vivek
thans for the tip
This is great! very simple and compact.
Though I’m having trouble bringing in external pages to the tab.
Also, how can I get the javascript to run in the tab windows? The javascript in the .jsp pages run fine when viewed as a separate page, but in the tab window they are not working.
very new to ajax.
Hi Steve,
Firstly, I would like to thank you very much for commenting on the article, coming to your query, this is a good query – will write an article on the same today and will let you know! Stay Tuned for the next article.
Mean while if you have an idea about Ext JS? you can go through this article How To: Make Tabs Reload and Evaluate Scripts using ExtJS
Thanks,
Vivek
[http://www.developersnippets.com]
[...] Recently, one of my reader came up with a query like “Why JavaScript is not running after loading a page through AJAX, but if we run the respective page alone without any AJAX – JavaScript is working fine”, Yeah, I do faced this sort of problem while I am loading respective pages through AJAX. To know more about how to load an external page through AJAX, here is the nice post of the same “Snippet Code for Simple Ajax Tabs with cool CSS Styles“. [...]