PDA

View Full Version : AJAX Tabs Script Reloading pages everytime..?



t_anjan
11-13-2006, 04:35 PM
1) Script Title: Ajax Tabs Content script

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

3) Describe problem:

I noticed that even when I click on a tab that I have already visited, I still get the "Loading..." message before the tab contents are displayed. As my connection is relatively fast, I didn't notice this delay until I looked at the same page on a slow connection. The script actually "RELOADS" each tab's content EVERYTIME you click on it. Is this how it is supposed to work? Isn't it the whole point of AJAX to avoid such delays?

Correct me if I'm mistaken. Thanks!

ddadmin
11-15-2006, 09:45 AM
Well it's up to you whether you want the script to try and cache the contents after the intial request. Inside the .js file, locate at the top:


var bustcachevar=0 //bust potential caching of external pages after initial request? (1=yes, 0=no)

Set it to 0.

t_anjan
11-17-2006, 11:36 PM
Thanks. That made the difference.
I thought that option had something to do with it. But the explanation given wasn't too clear. So didn't wanna mess with it.

Thanks Again!

ecastro
11-23-2010, 11:30 PM
I have ddajaxtabssettings.bustcachevar=0 but tabs reload each time the user goes to a different tab and comes back.

We need it tabs to remain static (no refreshing – even if the user clicks on another tab and comes back to the first tab). Content should only refresh in a tab when the user decides to reload a url into that tab. Otherwise content in tab remains as user left it.. so if in tab 2 he had zoomed in an image and scrolled down, and he then clicks on tab 3, when he gets back to tab 2 image is presented zoomed in and scroll where it as last left.

Is this possible?

ddadmin
11-24-2010, 12:17 AM
Ecastro, try the below modified .js file, which should do the trick.

ecastro
11-24-2010, 09:34 AM
Thank you very much. Unfortunately it didn't do the trick... to test it I scrolled down in the page loaded in tab 2, went to tab 3, but then when getting back to tab 2 the page re-loaded. I also followed a link in tab 2 and when getting back it loaded the original url back on the tab.

My code is really simple.. maybe I'm doing something wrong on the main page? :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link rel="stylesheet" type="text/css" href="ajaxtabs/ajaxtabs.css" />

<script type="text/javascript" src="ajaxtabs/ajaxtabs.js">

/***********************************************
* Ajax Tabs Content script v2.2- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>

</head>

<body>

<div id="pettabs" class="indentmenu">
<ul>
<li><a href="http://www.google.com" rel="#iframe" class="selected">Viewer 1</a></li>
<li><a href="http://www.yahoo.com" rel="#iframe">Viewer 2</a></li>
<li><a href="http://www.cnn.com" rel="#iframe">Viewer 3</a></li>
</ul>
<br style="clear: left" />
</div>

<div id="petsdivcontainer" style="border:1px solid gray; width:1000px; height: 500px; padding: 5px; margin-bottom:1em">
</div>


<script type="text/javascript">

var mypets=new ddajaxtabs("pettabs", "petsdivcontainer")
mypets.setpersist(false)
mypets.setselectedClassTarget("link")
mypets.init()

</script>

<p><a href="javascript: mypets.loadiframepage('http://www.unodox.com')">Load "Unodox Homepage" into selected tab</a></p>


</body>
</html>

ddadmin
11-25-2010, 09:03 AM
Ah yes my logic was flawed and you're right, it doesn't work in the above scenario. The fact that we're dealing with pages loaded inside an IFRAME and not Ajax, it complicates matters. There is no easy way to save the entire "state" of a page unless you basically create a separate IFRAME to house each page. I'll give this some more thought, and post a follow up if I come up with a solution.