PDA

View Full Version : Ajax tabs: How can I jump to a certain tab using the url?



Krofinzki
12-09-2007, 10:37 PM
1) Script Title: Ajax Tabs Content Script (v 2.0)

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

3) Describe problem:
How can I jump to a certain tab using the url?

For example, it would be great if I could put in an url like this:
http://www.website.com/blah/index.php?tab=2
and then the website would react like if "javascript: countries.expandit(2)" was executed.

In other words it would grab the value after ?tab= and execute the expand-this-specific-tab function using that value.


Would this be possible?

Thanks in advance.

BYK
12-09-2007, 10:55 PM
var pageVars;

function fillPageVars()
{
var pageVarsTemp=(document.location.hash.length>1) ? document.location.hash.substring(1).split('&') : new Array(0);
if (pageVars)
delete pageVars;
pageVars=new Object();
for (var i=0; i<pageVarsTemp.length; i++)
{
var tempArray=pageVarsTemp[i].split('=');
pageVars[tempArray[0]]=tempArray[1];
}
}

The function above fills the "pageVars" variable from the URL and you can use the "GET" parameters like in PHP. BUT this code uses the anchor, #, not the common ? seperator since if you change the url's ? part it reloads the page, however if you change after the anchor it does not reload.

So you can use a function which looks for pageVars["tab"] variable and then expands the tab according to it. If you want to do this only when the page loads, you can call that function from onLoad, if you want to change the active tab wehenever the url changes, then put your function in an interval.

Krofinzki
12-09-2007, 11:52 PM
Maybe I'm not getting this fully.. But I put the code you provided in (inside <script> tags ofc)

and added:
document.write(pageVars["tab"[0]]);

and thereafter:
document.write(pageVars["tab"]);

but neither returned anything when using urls like this:
http://krof.net/start/#tab=test

ddadmin
12-10-2007, 07:10 AM
Please see this thread, which basically shows the technique to selecting a particular tab via a URL parameter: http://www.dynamicdrive.com/forums/showthread.php?t=26799

BYK
12-10-2007, 07:30 AM
Maybe I'm not getting this fully.. But I put the code you provided in (inside <script> tags ofc)

and added:
document.write(pageVars["tab"[0]]);

and thereafter:
document.write(pageVars["tab"]);

but neither returned anything when using urls like this:
http://krof.net/start/#tab=test

After inserting the code, you should call the function, fillPageVars(), for pageVars variable to be defined. But instead of trying to workout this, I think you can have a look at the link which ddadmin gave ;)

Krofinzki
12-10-2007, 09:30 AM
I ended up using the solution in the link ddadmin provided, works great :)