ajax fetching problem

[whoami]

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>

[ddadmin]

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.

[whoami]

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

[whoami]

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.

[ddadmin]

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).

[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.

[ddadmin]

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:

<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:

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

and change that to:

		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.

[whoami]

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.

[ddadmin]

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:

<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

[whoami]

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.