ajax fetching problem

1) Script Title: Ajax Tabs Content Script (v 2.0)

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

3) Describe problem:

i work the demo on my own computer, it only display the same as it on the web (loading external html's contents within the frame) if using ref="#'iframe". i tried different combinations, but, they all link to the page. could you also tell me how to have the loading.gif displayed?

thanks!
====
my script

<li>
<li><a href="external1.htm" rel="#iframe">Tab 1</a></li>
<li><a href="external2.htm" rel="#countrycontainer">Tab 2</a></li>
<li><a href="external3.htm" rel="#countrytabs">Tab 3</a></li>
<li><a href="external4.htm" rel="#countrydivcontainer">Tab 4</a></li>
</ul>

<div id="countrydivcontainer" style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px"></div>

<script type="text/javascript">

var countries=new ddajaxtabs("countrytabs", "countrydivcontainer")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()
</script>

Do the Ajax option work when you upload your pages online? In IE7, they need to be run online. Please post a link to the page on your site that contains the problematic script so we can check it out.

thanks buddy!!! it is working now. don't know i should try it online

now, when loading the page, a default external content is displayed automatically (without click the tab). how can i stop the default (loading the external page)? i wish to display the external page content when clicking the tabs, not have them automatically loaded.
:confused:

Well, to have the initial tab load inline content (instead of Ajax), just use the default content setting (tab gets "rel="#default" declaration, content DIV gets the default content you wish associated with this tab). This is actually explained on the script page (see Demo #1).

thanks ddadmin!

what i meant is to have the similar effect to the yahoo's log in area(www.yahoo.co.uk). when loading the page, no content displays, but when u click the tab or put the cursor over the tab, the external content is fetched and displayed.

Quote:

---

Originally Posted by whoami

thanks ddadmin!

what i meant is to have the similar effect to the yahoo's log in area(www.yahoo.co.uk). when loading the page, no content displays, but when u click the tab or put the cursor over the tab, the external content is fetched and displayed.

---

Sure, that's possible as well. By default, the script will select the first tab and show its contents if no tabs have been explicitly given the class="selected" attribute. What you want then is to disable this behavior, so if no class="selected" attribute is present, then no tabs are selected nor content shown.

First, for your HTML, you'd simply set up the tabs to be all ajax fetched, with no tabs carrying class="selected". You'll also want to turn off persistence. In the end you'll have something like this:

Code:

---

<ul id="countrytabs" class="shadetabs">
<li><a href="external1.htm" rel="countrycontainer">Tab 1</a></li>
<li><a href="external2.htm" rel="countrycontainer">Tab 2</a></li>
<li><a href="external3.htm" rel="countrycontainer">Tab 3</a></li>
</ul>

<div id="countrydivcontainer" style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px">
</div>

<script type="text/javascript">

var countries=new ddajaxtabs("countrytabs", "countrydivcontainer")
countries.setpersist(false)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()

</script>

---

Now, running the above will cause the 1st tab to be selected. To disable this auto select feature, inside the .js file, find the line:

Code:

---

                if (persisterror) //if an error has occured while trying to retrieve persisted tab (based on its position within its peers)

---

and change that to:

Code:

---

                if (this.enabletabpersistence && persisterror) //if an error has occured while trying to retrieve persisted tab (based on its position within its peers)

---

Now when you run the above example, no tabs are selected, and the content DIV is empty to begin with.

thanks again!!! you have been fantastic!!!

got another question looking for answer.

is it possible to set a close button to close the displayed area? now, it can only be closed by either click other tabs or re-load the page. please advise.

You're welcome. :) It depends on how you define "close" though. You can, for example, create a close link that loads a blank page into the content area when clicked on, something like:

Code:

---

<p><a href="javascript:countries.loadajaxpage('blank.htm')">Close</a></p>

---

See the bottom of this page for more info: http://www.dynamicdrive.com/dynamici...suppliment.htm

that is what i want, but one problem, when click the close button, the loading.gif (image) is still runnding there, thought not loading external content.

Do you mean the loading gif keeps running even after the "blank" page is loaded, or just for a brief second? There is no way to individually turn off the "loading" image when fetching select Ajax content- it's all or nothing.

when click the [x] button, the tab content area can close, but the loading gif and the loading message re-apprears, it won't stop until click a tab.

Hmm make sure "blank.htm" actually exists, so you're not loading a non existent blank page. Another way to create a close button is actually just to empty out the contents of the content DIV, something like:

Code:

---

<p><a href="javascript:document.getElementById('whatever').innerHTML=''">Close</a></p>

---

You'll need to change whatever to the ID of the content DIV:

Code:

---

<div id="countrydivcontainer" style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px">
//Optional default content here.
</div>

---

thanks mate! any advice to get rid of the loading gif, when the tab content area is closed?

Quote:

---

Originally Posted by whoami

thanks mate! any advice to get rid of the loading gif, when the tab content area is closed?

---

Hmm the loading gif should only appear briefly if you're using the "blank" page technique. If you're using the "empty" technique that I posted at the very end, the loading gif should never appear at all when it's run.