By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
432,070 Members | 1,718 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 432,070 IT Pros & Developers. It's quick & easy.

Ajax dynamic tabbed content script

P: 6
I'm using a ajax script the uses a tabbed div that fetches a remote webpage to display for each tab.when clicked. the script works fine except for one thing. The content of the page i want to display is a javascript image gallery. i am trying to do multiple galleries on one page.
When the page loads the default tab loads the gallery correctly. But when I click on the next tab the javascript gallery fails. The script is exactly the same for each page but I've changed the number of images. I know the ajax script is working because the html part of the page displays correctly.
I need to reset the javascript state so that each time i click on the tab the script is loaded fresh so that there is no variable conflict. Each time a tab is clicked it needs to have a blank javascript state.

Is there an ajax method to clear the javascript cache or state or memory or whatever the correct name is???

Thanks is advance any help would be appreciated.
Sep 21 '07 #1
Share this Question
Share on Google+
8 Replies


acoder
Expert Mod 15k+
P: 16,027
Welcome to TSDN!

To refresh the Javascript state, unload and reload the page.

You could use iframes to keep everything separate or just make all variable names unique. Perhaps you could use objects.
Sep 21 '07 #2

codegecko
Expert 100+
P: 533
Hi jack,

Are you using IE7? There's a flaw in IE7 regarding XMLHTTP objects that means even if you are using the XMLHTTP ActiveX object in IE7, you have to recreate the object as every time it is used it is destroyed and has to be re-created on-demand.

The best way I've found of bypassing this problem is by setting up a function whereby if my user is using any variant of IE then I manually destroy and re-create the AJAX object every time they click on the page body:

Expand|Select|Wrap|Line Numbers
  1. function createAJAXObjs {
  2. if ((navigator.appName.indexOf("Microsoft") > -1) && navigator.appVersion.indexOf("7") > -1)) {
  3.    if (myXmlHTTPObj != null) {
  4.        myXmlHTTPObj.close;
  5.    }
  6. myXmlHTTPObj = new XmlHTTPRequest;
  7. }
  8. }
  9.  
If it's ASP.NET AJAX that you're using then unfortunately I can't help.

medicineworker
Sep 21 '07 #3

P: 6
No I'm not using IE. Here's the code::
The ;javascripts that are loaded using rev= are virtually the same except for the values for captions and number of variables......any examples on using objects?? how do I manually reload the page each time a user clicks on a tab.. I would rather not do that......using objects would seem better.....I"m a newbie to Ajax mainly just use javascript.


[HTML]<ul id="maintab" class="shadetabs" >
<li class="selected"><a href="resgallery.html" rel="ajaxcontentarea" rev="gallery.css, resgallery.js">Residential Pools</a></li>
<li><a href="vrgallery.html" rel="ajaxcontentarea" rev="gallery.css, vrgallery.js">Valley Ranch</a></li>
</ul>
</td>
</tr>
</table>
<div id="ajaxcontentarea" class="contentstyle">

</div>
<script type="text/javascript">
//Start Ajax tabs script for UL with id="maintab" Separate multiple ids each with a comma.
startajaxtabs("maintab")
</script>[/HTML]
Sep 21 '07 #4

P: 6
I just got this ajax script free off the internet.....Do I need to edit the script ajaxtabs and figure out how to use objects or manually reload the page.....ok I guess I'll have to learn some ajax.......is there any other way to reset the javascript state other than reloading the page??? Is there not an ajax command to reset it?
Sep 21 '07 #5

P: 6
So if I used an iframe instead of a div then i wouldn't have this problem?
Sep 21 '07 #6

P: 6
Here's the ajax script: anywhere in there where I can reset the javascript state for each click on a tab? The function loadobjs does the loading of the javascript files.

Expand|Select|Wrap|Line Numbers
  1. var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
  2. var loadstatustext="<img src='ajaxtabs/loading.gif' /> Requesting content..."
  3. var enabletabpersistence=0 //enable tab persistence via session only cookies, so selected tab is remembered (1=yes, 0=no)?
  4.  
  5. ////NO NEED TO EDIT BELOW////////////////////////
  6. var loadedobjects=""
  7. var defaultcontentarray=new Object()
  8. var bustcacheparameter=""
  9.  
  10. function ajaxpage(url, containerid, targetobj){
  11. var page_request = false
  12. if (window.XMLHttpRequest) // if Mozilla, IE7, Safari etc
  13. page_request = new XMLHttpRequest()
  14. else if (window.ActiveXObject){ // if IE
  15. try {
  16. page_request = new ActiveXObject("Msxml2.XMLHTTP")
  17. catch (e){
  18. try{
  19. page_request = new ActiveXObject("Microsoft.XMLHTTP")
  20. }
  21. catch (e){}
  22. }
  23. }
  24. else
  25. return false
  26. var ullist=targetobj.parentNode.parentNode.getElementsByTagName("li")
  27. for (var i=0; i<ullist.length; i++)
  28. ullist[i].className=""  //deselect all tabs
  29. targetobj.parentNode.className="selected"  //highlight currently clicked on tab
  30. if (url.indexOf("#default")!=-1){ //if simply show default content within container (verus fetch it via ajax)
  31. document.getElementById(containerid).innerHTML=defaultcontentarray[containerid]
  32. return
  33. }
  34. document.getElementById(containerid).innerHTML=loadstatustext
  35. page_request.onreadystatechange=function(){
  36. loadpage(page_request, containerid)
  37. }
  38. if (bustcachevar) //if bust caching of external page
  39. bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
  40. page_request.open('GET', url+bustcacheparameter, true)
  41. page_request.send(null)
  42. }
  43.  
  44. function loadpage(page_request, containerid){
  45. if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
  46. document.getElementById(containerid).innerHTML=page_request.responseText
  47. }
  48.  
  49. function loadobjs(revattribute){
  50. if (revattribute!=null && revattribute!=""){ //if "rev" attribute is defined (load external .js or .css files)
  51. var objectlist=revattribute.split(/\s*,\s*/) //split the files and store as array
  52. for (var i=0; i<objectlist.length; i++){
  53. var file=objectlist[i]
  54. var fileref=""
  55. if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
  56. if (file.indexOf(".js")!=-1){ //If object is a js file
  57. fileref=document.createElement('script')
  58. fileref.setAttribute("type","text/javascript");
  59. fileref.setAttribute("src", file);
  60. }
  61. else if (file.indexOf(".css")!=-1){ //If object is a css file
  62. fileref=document.createElement("link")
  63. fileref.setAttribute("rel", "stylesheet");
  64. fileref.setAttribute("type", "text/css");
  65. fileref.setAttribute("href", file);
  66. }
  67. }
  68. if (fileref!=""){
  69. document.getElementsByTagName("head").item(0).appendChild(fileref)
  70. loadedobjects+=file+" " //Remember this object as being already added to page
  71. }
  72. }
  73. }
  74. }
  75.  
Expand|Select|Wrap|Line Numbers
  1. function expandtab(tabcontentid, tabnumber){ //interface for selecting a tab (plus expand corresponding content)
  2. var thetab=document.getElementById(tabcontentid).getElementsByTagName("a")[tabnumber]
  3. if (thetab.getAttribute("rel")){
  4. ajaxpage(thetab.getAttribute("href"), thetab.getAttribute("rel"), thetab)
  5. loadobjs(thetab.getAttribute("rev"))
  6. }
  7. }
  8.  
  9. function savedefaultcontent(contentid){// save default ajax tab content
  10. if (typeof defaultcontentarray[contentid]=="undefined") //if default content hasn't already been saved
  11. defaultcontentarray[contentid]=document.getElementById(contentid).innerHTML
  12. }
  13.  
  14. function startajaxtabs(){
  15. for (var i=0; i<arguments.length; i++){ //loop through passed UL ids
  16. var ulobj=document.getElementById(arguments[i])
  17. var ulist=ulobj.getElementsByTagName("li") //array containing the LI elements within UL
  18. var persisttabindex=(enabletabpersistence==1)? parseInt(getCookie(arguments[i])) : "" //get index of persisted tab (if applicable)
  19. var isvalidpersist=(persisttabindex<ulist.length)? true : false //check if persisted tab index falls within range of defined tabs
  20. for (var x=0; x<ulist.length; x++){ //loop through each LI element
  21. var ulistlink=ulist[x].getElementsByTagName("a")[0]
  22. ulistlink.index=x
  23. if (ulistlink.getAttribute("rel")){
  24. var modifiedurl=ulistlink.getAttribute("href").replace(/^http:\/\/[^\/]+\//i, "http://"+window.location.hostname+"/")
  25. ulistlink.setAttribute("href", modifiedurl) //replace URL's root domain with dynamic root domain, for ajax security sake
  26. savedefaultcontent(ulistlink.getAttribute("rel")) //save default ajax tab content
  27. ulistlink.onclick=function(){
  28. ajaxpage(this.getAttribute("href"), this.getAttribute("rel"), this)
  29. loadobjs(this.getAttribute("rev"))
  30. saveselectedtabindex(this.parentNode.parentNode.id, this.index)
  31. return false
  32. }
  33. if ((enabletabpersistence==1 && persisttabindex<ulist.length && x==persisttabindex) || (enabletabpersistence==0 && ulist[x].className=="selected")){
  34. ajaxpage(ulistlink.getAttribute("href"), ulistlink.getAttribute("rel"), ulistlink) //auto load currenly selected tab content
  35. loadobjs(ulistlink.getAttribute("rev")) //auto load any accompanying .js and .css files
  36. }
  37. }
  38. }
  39. }
  40. }
  41.  
  42. ////////////Persistence related functions//////////////////////////
  43.  
  44. function saveselectedtabindex(ulid, index){ //remember currently selected tab (based on order relative to other tabs)
  45. if (enabletabpersistence==1) //if persistence feature turned on
  46. setCookie(ulid, index)
  47. }
  48.  
  49. function getCookie(Name){ 
  50. var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
  51. if (document.cookie.match(re)) //if cookie found
  52. return document.cookie.match(re)[0].split("=")[1] //return its value
  53. return ""
  54. }
  55.  
  56. function setCookie(name, value){
  57. document.cookie = name+"="+value //cookie value is domain wide (path=/)
  58. }
Sep 21 '07 #7

P: 6
Basically I need to know can you use a script to dynamically switch pages that use the same javascript but with different values to the same variable names???

I'm not exactly familiar with the terminology for ajax/javascript but In c++ i would create an object of type class for each page containing dynamic content.

How to have dynamic content nested in dynamic content. I think I am missing a couple of pieces of the puzzle in my understanding of the object model in ajax/javascript.


The script loads the default page, with the with the javascript gallery, in the ajax-controlled DIV no problem. But even with one item, when I click on the tab it loads the correct tab/page but the javascript no longer functions at all. The html in the div displays correctly. There's only one tab/page ever loaded by ajax and it is the default one. When the user tries to click a tab ajaxtabs script will not load the javascript part of the page. i use a REL property to include the seperate javascript file.
Sep 21 '07 #8

acoder
Expert Mod 15k+
P: 16,027
Can you show the code for one of the scripts that you are using?
Sep 23 '07 #9

Post your reply

Sign in to post your reply or Sign up for a free account.