PDA

View Full Version : New to AJAX Tab Content.



hktvb2001
09-26-2007, 11:08 AM
1) Script Title:
Ajax Tabs Content script

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

3) Describe problem:
I am new to this AJAX Tabs Content, but I know that is the one that I need on my web site. But, on my web site, I am using link on image, and these are in a TABLE, so how can I use the AJAX on image?

Here is my code on my page:

<TABLE WIDTH=598 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD> <a class="toggleopacity" href="index.html">
<img border="0" src="images/1m1.gif" width="108" height="49"></a></TD>
<TD> <a class="toggleopacity" href="index-1.html">
<img border="0" src="images/1m2.gif" width="96" height="49"></a></TD>
<TD> <a class="toggleopacity" href="index-2.html">
<img border="0" src="images/1m3.gif" width="84" height="49"></a></TD>
<TD> <a class="toggleopacity" href="index-3.html">
<img border="0" src="images/1m4.gif" width="99" height="49"></a></TD>
<TD> <a class="toggleopacity" href="index-4.html">
<img border="0" src="images/1m5.gif" width="111" height="49"></a></TD>
<TD>
<img border="0" src="images/1m6.gif" width="100" height="49"></TD>
</TR>
</TABLE>

How can I insert the AJAX into this?

hktvb2001
09-27-2007, 02:23 AM
anyone can help?

codeexploiter
09-27-2007, 03:41 AM
If you want to use the AJAX Tab content script in your page you might have to change the existing structure of your page. You can replace your existing page structure with one that gives you the AJAX Tab content script.

You can make the modification like the following :



<ul id="maintab" class="shadetabs">
<li class="selected"><a href="#default" rel="ajaxcontentarea">Intro</a></li>
<li><a href="index.htm" rel="ajaxcontentarea"><img src='images/1m1.gif' border='0'></a></li>
<li><a href="index-1.htm" rel="ajaxcontentarea"><img src='images/1m2.gif' border='0'></a></li>
<li><a href="index-2.htm" rel="ajaxcontentarea"><img src='images/1m3.gif' border='0'></a></li>
<li><a href="index-3.htm" rel="ajaxcontentarea"><img src='images/1m4.gif' border='0'></a></li>
<li><a href="index-4.htm" rel="ajaxcontentarea"><img src='images/1m5.gif' border='0'></a></li>
<li><a href="index-5.htm" rel="ajaxcontentarea"><img src='images/1m6.gif' border='0'></a></li>
</ul>


The above code can directly replace your table based code (Note that you have to use your own details like page name, image names, etc in the above code.

In 'ajaxtabs.css' file you can find a CSS class - contentstyle where you can find a 'width' property that determines the width of each tab, you can adjust it according to your requirement.

Hope this helps.

davebarnes
09-27-2007, 01:17 PM
This thread http://www.dynamicdrive.com/forums/showthread.php?t=25108 may also give some ideas.

You don't have to give up on using table cells (<td>) as your tab container.

hktvb2001
09-27-2007, 03:16 PM
OK, I got the first move. But I encount a problem. Here is an example of the structure of my page.
-----------
[MENU]
[DEFAULT CONTENT]
[BOTTOM]
-----------
When I press on the link in the [MENU], the tab load in the [DEFAULT CONTENT], which is great. But the problem is when I click on another tab, it doesnt not replace with the [DEFAULT CONTENT], but it pull the [DEFAULT CONTENT] down, and add the tab content.

That's mean, when I click on a tab, the new page struture is like this:
-----------
[MENU]
[NEW CONTENT]
[DEFAULT CONTENT]
[BOTTOM]
-----------

When I click on another tab, it will replace the [NEW CONTENT], but the [DEFAULT CONTENT] is always here...

Why is that?

------ Another question.. Does it work with Mozilla FireFox? I have Mozilla FireFox 2.0.0.6, and when I load the page in IE, it works. But in FF, it doesn't work.... :(

hktvb2001
09-28-2007, 01:33 AM
OMG!!! Im a genius.. I have fix the code myself.. The problem here is the #default in the code. I think that when we use the TAB in image, we have to use the <span> code. So, the default won't work. What I did is I change the whole code to this: ( I remove the #default, and add another page..)


<ul id="maintab" class="shadetabs">
<span class="selected"><a href="index.htm" rel="ajaxcontentarea"><img src='images/1m1.gif' border='0'></a></span>
<span><a href="index-1.htm" rel="ajaxcontentarea"><img src='images/1m2.gif' border='0'></a></span>
<span><a href="index-2.htm" rel="ajaxcontentarea"><img src='images/1m3.gif' border='0'></a></span>
<span><a href="index-3.htm" rel="ajaxcontentarea"><img src='images/1m4.gif' border='0'></a></span>
<span><a href="index-4.htm" rel="ajaxcontentarea"><img src='images/1m5.gif' border='0'></a></span>
<span><a href="index-5.htm" rel="ajaxcontentarea"><img src='images/1m6.gif' border='0'></a></span>
</ul>


In this case, I have changed all "li" to "span" in the ajaxtabs.js

----------------------- All the above are correct now! ----------------

Now, I have got another problem. I think the ajax works with FF, only if we use the <li>. I think FF doesnt support <span>. I am not sure, but I think that is maybe the problem. If it so, how can I change the code in ajaxtabs.js, to make work with FF??

Thanks!

hktvb2001
10-01-2007, 04:22 AM
Now, I have got another problem. I think the ajax works with FF, only if we use the <li>. I think FF doesnt support <span>. I am not sure, but I think that is maybe the problem. If it so, how can I change the code in ajaxtabs.js, to make work with FF??

Thanks!

hktvb2001
10-01-2007, 10:34 PM
Please, can someone help me. I have only that problem, and my site could be up soon. When I was having this prob, I have thought of using the Iframe SSI Script 2 (http://www.dynamicdrive.com/dynamicindex17/iframessi2.htm). That way, I will have to make my code for IE, and FF. Also, these both script doesn't work on Opera..

What can I do now?? Is there any way to make the AJAX script works on both 3 browser???

ddadmin
10-02-2007, 06:34 AM
Now, I have got another problem. I think the ajax works with FF, only if we use the <li>. I think FF doesnt support <span>. I am not sure, but I think that is maybe the problem. If it so, how can I change the code in ajaxtabs.js, to make work with FF??

Thanks!

FF certainly does support the <span> tag. One thing I noticed that is off with your code is the part in red:


<ul id="maintab" class="shadetabs">
<span class="selected"><a href="index.htm" rel="ajaxcontentarea"><img src='images/1m1.gif' border='0'></a></span>
<span><a href="index-1.htm" rel="ajaxcontentarea"><img src='images/1m2.gif' border='0'></a></span>
<span><a href="index-2.htm" rel="ajaxcontentarea"><img src='images/1m3.gif' border='0'></a></span>
<span><a href="index-3.htm" rel="ajaxcontentarea"><img src='images/1m4.gif' border='0'></a></span>
<span><a href="index-4.htm" rel="ajaxcontentarea"><img src='images/1m5.gif' border='0'></a></span>
<span><a href="index-5.htm" rel="ajaxcontentarea"><img src='images/1m6.gif' border='0'></a></span>
</ul>

With the removal of the LI tags, UL is no longer valid, so you should change that to, say, DIV. Then, inside ajaxtabs.js, do a search and replace, replacing all instances of "li" with "span" instead. This should do it.

hktvb2001
10-02-2007, 07:23 PM
Then, inside ajaxtabs.js, do a search and replace, replacing all instances of "li" with "span" instead. This should do it.

I did change the "li" to "span" already.


With the removal of the LI tags, UL is no longer valid, so you should change that to, say, DIV.

When I remove the UL and change to DIV, it doesn't work anymore on any browser. If I reput the UL, it works only with IE, but not with FF, and Opera.
I have tried to change to SPAN, but it doesnt work too..

Please help. Thanks!

hktvb2001
10-02-2007, 09:03 PM
ALLRIGHT!!! YAHOO!! Finally I got it!!!

My full code is:

<TABLE WIDTH=598 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<ul id="maintab">
<TR>
<TD ><span><a class="toggleopacity" href="#default" rel="ajaxcontentarea">
<img border="0" src="images/1m1.gif" width="108" height="49"></a></span></TD>
<TD><span><a class="toggleopacity" href="test.html" rel="ajaxcontentarea">
<img border="0" src="images/1m2.gif" width="96" height="49"></a></span></TD>
<TD><span><a class="toggleopacity" href="test2.html" rel="ajaxcontentarea">
<img border="0" src="images/1m3.gif" width="84" height="49"></a></span></TD>
<TD><span><a class="toggleopacity" href="discuss.html" rel="ajaxcontentarea">
<img border="0" src="images/1m4.gif" width="99" height="49"></a></span></TD>
<TD><span><a class="toggleopacity" href="tutorial.html" rel="ajaxcontentarea">
<img border="0" src="images/1m5.gif" width="111" height="49"></a></span></TD>
<TD>
<img border="0" src="images/1m6.gif" width="100" height="49"></TD>
</TR></ul>
</TABLE>

So, what I did now, is I remove the part <ul id="maintab">, and I put into the <TR>, now it looks like this:

<TABLE WIDTH=598 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR id="maintab">
<TD ><span><a class="toggleopacity" href="#default" rel="ajaxcontentarea">
<img border="0" src="images/1m1.gif" width="108" height="49"></a></span></TD>
<TD><span><a class="toggleopacity" href="test.html" rel="ajaxcontentarea">
<img border="0" src="images/1m2.gif" width="96" height="49"></a></span></TD>
<TD><span><a class="toggleopacity" href="test2.html" rel="ajaxcontentarea">
<img border="0" src="images/1m3.gif" width="84" height="49"></a></span></TD>
<TD><span><a class="toggleopacity" href="discuss.html" rel="ajaxcontentarea">
<img border="0" src="images/1m4.gif" width="99" height="49"></a></span></TD>
<TD><span><a class="toggleopacity" href="tutorial.html" rel="ajaxcontentarea">
<img border="0" src="images/1m5.gif" width="111" height="49"></a></span></TD>
<TD>
<img border="0" src="images/1m6.gif" width="100" height="49"></TD>
</TR>
</TABLE>

And ALSO, now it works with OPERA, FF, and IE. So, I don't need to do the IFRAME SSI Script 2...

WOWHOU!!! Thanks ddadmin.

hktvb2001
10-03-2007, 03:35 AM
ANOTHER PROBLEM!!

Ok, everything is fine now. But when I try to add a link that call another web page that is not in my maintab, it bring me to the whole page. But, I would like to call it in the same tab. How do I do?

Example..

My maintab contains all links of my menu, and on a page, I add a link, but when someone click on the link that call an external page, I would like it to load in the maintab.

Thanks!

hktvb2001
10-04-2007, 04:08 PM
bump..

ddadmin
10-05-2007, 11:48 AM
To get a link inside the fetched Ajax content to also load in the same area (instead of as a regular link), try modifying the link as follows:


<a href="javascript:ajaxpage('newpage.htm', 'ajaxcontentarea', this)">Load New Page</a>

Where the first parameter is the path to the page you wish to load on your server, and the second, the ID of your Ajax Tabs content container.

hktvb2001
10-05-2007, 07:33 PM
I did that, but it doesn't work. It appears an icon of javascript error in the status bar left down the browser. Check back my web site, and you will see...

ddadmin
10-06-2007, 10:28 AM
Ah yes there's an error in my logic. It's actually a little more involved than that. To do this, first, add the below function to the end of ajaxtabs.js:


function loadinlinepage(url, tabcontainerid, contentcontainerid, tabnumber){
var thetab=document.getElementById(tabcontainerid).getElementsByTagName("a")[tabnumber]
ajaxpage(url, contentcontainerid, thetab)
}

Then, your link on the external page fetched via Ajax to load another page in the same container when clicked on looks like this:


<a href="javascript:loadinlinepage('external2.htm', 'maintab', 'ajaxcontentarea', 3)">Load New Page</a>

The 1st param is the path to the page to load, the second is the ID of your Tabs container, the 3rd, the ID of your Ajax Content container, and finally, the 4th should be an integer representing the order of the current active tab (ie: 3=4th tab). I tested the above code, and it works.

BTW, please note that your page is currently in violation of our usage terms, since the credit notice doesn't appear inline on the page. Please reinstate the credit notice: http://www.dynamicdrive.com/notice.htm

hktvb2001
10-06-2007, 07:33 PM
Thank you very much! Because of you, my site can be run in a couples of day. Your help was really appreciate... Thank you again.

I am sorry about the credit, I didn't notice about that. I have just insert it back. Sorry again.

and finally. Thank you!!

hktvb2001
10-17-2007, 10:49 PM
Hi again. Sorry for having a lot of questions. Everything works now. But I have another idea for the ajax. How can I add a javascript BACK that works with the ajax tab?

I use this one: <a href="javascript: history.go(-1)">Back</a>

But it doesnt work.

ddadmin
10-18-2007, 11:29 AM
Ajax and the "Back" button issue has been much discussed on the web. Try doing a search on Google to see what I mean. Since with Ajax it means the page doesn't actually change, using history.go(-1) doesn't work in bringing back the "previous" Ajax page.