PDA

View Full Version : ajax fetching problem



whoami
01-27-2008, 09:38 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:

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
01-28-2008, 09:49 AM
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
01-28-2008, 03:31 PM
thanks buddy!!! it is working now. don't know i should try it online

whoami
01-28-2008, 06:11 PM
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:

ddadmin
01-28-2008, 06:19 PM
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 (http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/index.htm) (see Demo #1).

whoami
01-29-2008, 02:32 PM
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
01-30-2008, 02:09 AM
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
01-30-2008, 04:00 PM
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
01-30-2008, 04:53 PM
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/dynamicindex17/ajaxtabscontent/ajaxtabs_suppliment.htm

whoami
01-30-2008, 06:36 PM
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.

ddadmin
01-30-2008, 06:45 PM
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.

whoami
01-30-2008, 09:15 PM
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.

ddadmin
01-30-2008, 10:44 PM
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:


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

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


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

whoami
01-31-2008, 02:06 AM
thanks mate! any advice to get rid of the loading gif, when the tab content area is closed?

ddadmin
01-31-2008, 06:40 AM
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.