PDA

View Full Version : Ajax tabs: Loading external links into tabs div



synergy
09-12-2006, 04:19 PM
1) Script Title:
Ajax Tabs Content

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/index.htm

3)Site URL
http://www.artisanculturedstone.com/new/

4) Describe problem:
This is a fantastic script! What I am trying to do is get the links that are contained in the external pages (i.e. external.htm) to load in the div that the tabs load into. For instance, I want the PRODUCT PAGE link in the sidebar on my site to load into the ajaxcontentarea div and preferrably load with that tab selected. I also want, for instance, the contact us link on the default tab to load contact.html in the ajaxcontentarea div. I hope this makes sense. I searched for quite a while to find a post addressing this but couldn't find anything. Let me know what you guys think would be a good solution for this.

jscheuer1
09-12-2006, 09:48 PM
http://www.dynamicdrive.com/forums/showthread.php?p=48485#post48485

synergy
09-13-2006, 08:23 PM
Thanks. I already read this post but I guess I was unclear about it. I'll try this then.

synergy
09-13-2006, 08:46 PM
http://www.dynamicdrive.com/forums/showthread.php?p=48485#post48485
This isn't really what I want to do. If I understand this right...you would be on a non-tabbed page (index.htm) and want to link to a specific tab on tabs.htm.

What I want is when I already have a tab loaded in the ajaxconentarea div I will have a link or links within that file that I want to load into the same div.

jscheuer1
09-14-2006, 06:09 AM
I see what you mean. OK, the tabs are numbered from 0 to however many you have, and the function ajaxpage() is what really does the switching. So, if you put this function in the head of your Ajax page, the top page, the one with the tabs on it, like so:


<script type="text/javascript" src="ajaxtabs/ajaxtabs.js">

/***********************************************
* Ajax Tabs Content script- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>
<script type="text/javascript">
function linkjax(h, a, n){
ajaxpage(h,a,document.getElementById('maintab').getElementsByTagName('li')[n].firstChild);
}
</script>

Making sure that maintab in the above is the id of the <ul> element (from the demo):


<ul id="maintab" class="shadetabs">
<li class="selected"><a href="#default" rel="ajaxcontentarea">Intro</a></li>
<li><a href="externa . . .

You can now use a link anywhere on the page or within any added tab content (the external#.htm pages in the demo) like so:


<a href="javascript:linkjax('external14.htm', 'ajaxcontentarea', 2)">Link Text</a>

The red 2 is the number of the tab you are targeting, it can be the same tab currently displaying or any tab available on the top page.

Remember the tabs are numbered starting with 0, not 1.

synergy
09-14-2006, 08:35 PM
B-e-a-utiful! Thanks much. That works great! I had to modify it just a hair so I could load links from my second set of tabs too.

<script type="text/javascript">
function linkjax(h, a, n){
ajaxpage(h,a,document.getElementById('maintab', 'facts').getElementsByTagName('li')[n].firstChild);
}
</script>

Thanks again

jscheuer1
09-14-2006, 08:54 PM
I really don't think that will work in most browsers. Try this for the linkjax function:


function linkjax(h, a, n, tid){
ajaxpage(h,a,document.getElementById(tid).getElementsByTagName('li')[n].firstChild);
}

and this for the link:


<a href="javascript:linkjax('external14.htm', 'ajaxcontentarea2', 2, 'facts')">Link Text</a>

The part added in red tells the new linkjax() function which tab set to use.

yurican
02-11-2007, 07:12 PM
Thanks jscheuer1! All works!
But how about "BACK" button?

Example:
My 2 tab named "News" and contents a list of links to news. When I click on some link I scream "B-e-a-utiful! Thanks jscheuer1! All works!" but when I want to go back to news list and click BACK in browser.....

I believe it possible. ))

trippin
02-11-2007, 07:22 PM
When the links within that div are clicked, write a cookie with the current tab info. When the page loads after clicking the back button, it will read from the cookie and go to the specified tab upon page load.

yurican
02-11-2007, 07:42 PM
Thank you.
Where can I get an example of how to write this to the cookie? I'm a total newbie. :)

trippin
02-16-2007, 01:38 AM
Post a link to the webpage in question.

yurican
02-17-2007, 05:52 AM
Thanks for your post.
But my webpage is @localhost yet..
Is it impossible to show how it works on the example with external1,..4.html?

Sorry for this stupid question. :)

yurican
02-17-2007, 07:51 AM
One more question.
If I dont want my external pages to open independently. I.e. www.mysite.com/external.html in browser address bar.
How to define is this page opened in tab or independently? And redirect to main page (with tabs) if it opened not in tab.

THANK YOU VERY MUCH.

harisarc
05-09-2007, 12:19 PM
I have implemented the code provided by jscheuer1. i m new to ajax.now i m facing another problem . i have external login validation file using ajax and php which is not validating the login form.

monaya
01-26-2009, 04:29 PM
This is exactly what I want to do as well, but this doesn't seem to work in Firefox?





I see what you mean. OK, the tabs are numbered from 0 to however many you have, and the function ajaxpage() is what really does the switching. So, if you put this function in the head of your Ajax page, the top page, the one with the tabs on it, like so:


<script type="text/javascript" src="ajaxtabs/ajaxtabs.js">

/***********************************************
* Ajax Tabs Content script- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>
<script type="text/javascript">
function linkjax(h, a, n){
ajaxpage(h,a,document.getElementById('maintab').getElementsByTagName('li')[n].firstChild);
}
</script>

Making sure that maintab in the above is the id of the <ul> element (from the demo):


<ul id="maintab" class="shadetabs">
<li class="selected"><a href="#default" rel="ajaxcontentarea">Intro</a></li>
<li><a href="externa . . .

You can now use a link anywhere on the page or within any added tab content (the external#.htm pages in the demo) like so:


<a href="javascript:linkjax('external14.htm', 'ajaxcontentarea', 2)">Link Text</a>

The red 2 is the number of the tab you are targeting, it can be the same tab currently displaying or any tab available on the top page.

Remember the tabs are numbered starting with 0, not 1.

jscheuer1
01-26-2009, 04:59 PM
Make sure you are using the current version of this script, none of these modifications are required with it. See:

Dynamically selecting a tab using a remote link

on:

http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/ajaxtabs_suppliment.htm