?
Solved

How to disable the reload of JS Page when I click back

Posted on 2003-03-07
12
Medium Priority
?
204 Views
Last Modified: 2007-12-19
I am using Cold Fusion and call a JavaScript Program on my page.  I found that whenever I go to another page and then hit "Back" button in the IE browser, the JavaScript Objects has been reload.  However, I want to keep the JavaScript Object in the previous state.  How can I do so?
0
Comment
Question by:alvinlamck
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
  • 3
  • +2
12 Comments
 
LVL 1

Expert Comment

by:piyush_b
ID: 8087521
Store the values of all the controls in the session object before submitting the form.
When you come back to the same page by pressing the 'back' button, read the values back from the session and populate the controls with the values.

Whenever the page is loaded, read from the session and populate the controls with the session values. If there are no values in the session, it indicates that the form is loaded for the first time and hence give the controls a default selection in that case.
0
 

Author Comment

by:alvinlamck
ID: 8087554
I have two concern based on storing session:

1. I have an array of object

2. I want to reload the objects when I submit this form or click "Reload" on IE.  I just want to keep the previous states when I click "Back" in IE.  How can I do so.

When I click "Back", can the JavaScript Program not reload?
0
 
LVL 1

Expert Comment

by:piyush_b
ID: 8087725
>>I have an array of object

You can store the array in the session as key/value pair.

>>I want to reload the objects when I submit this form or click "Reload" on IE.  I just want to keep the previous states when I click "Back" in IE.  How can I do so.

When you hit 'submit' or 'reload' the page, the values get sent to the server, and since javascript is client-side,  you cannot do anything with just the javascript; get the values back from the server using JSP / Servlet using 'request.getParameter(<control-name>)'. Or recv the values from the session (if you use the session), using  session.getAttribute(key-name) provided you have set the value using session.setAttribute(key-name,value).

0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 8087817
or set a cookie that loads the values onLoad - javascript only
0
 

Author Comment

by:alvinlamck
ID: 8087830
"or set a cookie that loads the values onLoad - javascript only"

How to do so?
0
 
LVL 4

Expert Comment

by:jonnal
ID: 8088066
hi

we need some sample code
0
 

Author Comment

by:alvinlamck
ID: 8088103




<script language=javascript>
/*
// Redirect the user if the browser is crap

imgWidth = 31;
imgHeight = 24;
imgMaxWidth = 50;
imgMaxHeight = 50;                        
imgExt = ".gif";                                    // The image extension.
imgDir = "Images/treeview/";                  // The directory that the images are stored.
nodeImgDir = "Images/treeview/nodes/";      // The directory that the node images are stored.

// Node's
root_noKids = nodeImgDir + "root_noKids" + imgExt;
root_kids_open = nodeImgDir + "root_kids_open" + imgExt;
root_kids_closed = nodeImgDir + "root_kids_closed" + imgExt;

noKids_notLast = nodeImgDir + "noKids_notLast" + imgExt;
kids_notLast_open = nodeImgDir + "kids_notLast_open" + imgExt;
kids_notLast_closed = nodeImgDir + "kids_notLast_closed" + imgExt;

noKids_last = nodeImgDir + "noKids_last" + imgExt;
kids_last_open = nodeImgDir + "kids_last_open" + imgExt;
kids_last_closed = nodeImgDir + "kids_last_closed" + imgExt;

blank = nodeImgDir + "blank" + imgExt;
vertical = nodeImgDir + "verticalLine" + imgExt;

// Used for debuging.
showCode = false;

if (showCode){ arrow = "&lt;" ;      newLine = "<br>"; }
else{ arrow = "<" ; newLine = ""; }

if (document.all){ IE = true ; NS = false; }
else if (document.layers){ IE = false ; NS = true; }
else document.location = "redirect URL";



function treeView(){// OBJECT BUILDER

      this.type                  = new String("TREEVIEW");      // Optional
      this.level                  = -1;
      this.index                  = -1;
      this.i                        = 0;                                    // Variable
      
            // ARRAYS
      this.node                  = new Array;                        // All nodes
      this.node.count            = 0;
      
      this.child                  = new Array;                        // Child nodes = ROOT nodes.
      this.child.count      = 0;
      
            // OBJECTS
      this.doc                  = document;
      this.childObj            // Object not jet created.
      this.treeView            = this
      
            // METHODS
      
      this.addRoot            = treeView_addRoot;                  // Create a new ROOT node.
      this.draw                  = treeView_draw;                  // Only called when all nodes are created.
      
      return this;
}


function treeView_addRoot(caption, img){
      
      newRoot = new node(this, "ROOT", caption , img, img, caption, true);      // Create node as root
      
      this.node[newRoot.index] = newRoot;                  // Add new node to treeview's nodes.
      this.node.count++;
      
      this.child[newRoot.childIndex] = newRoot;      // Add new node to treeview's children (ROOTS).
      this.child.count++;
      
      return newRoot;                                                // Return new node as Root.
}




// This function draws the treeview by calling the draw() function of each of it's children (ROOT nodes).
// Each node first draws it children before it completes it's own draw() so you only call the draw() of the ROOT node.
function treeView_draw(target, bgColor,  header, footer){
      
      if (!bgColor) bgColor = "FFFFFF";                                          // Default background colour.
                        
      this.doc.writeln ("<HTML><HEAD><BASE TARGET='" + target + "'></HEAD><BODY BGCOLOR=" + bgColor + ">")

      if (header)      document.writeln (header + "<br>");                        // If header parameter exists write it.
            
      if (NS) this.doc.writeln('<LAYER ID="treeViewLayer">');
            
      for (i = 0; i < this.child.count; i++) this.child[i].draw();// Draw all root nodes.      
                        
                  
      if (NS){
            this.doc.writeln('</LAYER>');
            this.childObj = this.doc.layers["treeViewLayer"];
            for (i = 0; i < this.child.count; i++)
                  this.child[i].assign();                                                // Assign drawn objects to the nodes (Layers)                  
            }
                  
      if (footer)      this.doc.writeln ("<br>" + footer);                        // If footer write it.
            
}










function eventHolder(){

      //this.onClick            =
      //this.onExpand            =
      //this.onCollapse      =
      //this.onMouseOver      =
      //this.onMouseOut      =


}




















// NODE OBJECT BUILDER
// This function builds nad returns a new node object.
function node(parent, type, caption, imgOpen, imgClosed, href, state){

      if (state == null) state = false;
            
      if (!href)      this.outputText = caption;
      else            this.outputText = arrow + 'A HREF="' + href + '">' + caption + arrow + '/A>';            // Work out href
      
            // CONSTANTS
      this.type                              = type;                                    // The node's type
      this.parent                              = parent;                              // The node's parent
      this.caption                        = caption;                              // The node's caption (may also be hyper link)
      this.href                              = href;                                    // The hyperlink reference; outputed if value not null as <a href=href>caption</a>
      this.noTagsCaption                  = noHTMLTags(caption);            
      this.treeView                        = parent.treeView;
      this.level                              = parent.level + 1;                  // How many levels down the node is frmo it's ROOT
      this.index                              = treeView.node.count;            // The node's index in respect of it's treeview
      this.childIndex                        = parent.child.count;            // The node's index in respect of it's parent
      this.isOpen                              = state;                              // Open or closed
      this.i                                    = 0;                                    // Used due to problems using ordinary variables
      this.decendantLevel                  = 0;                                    // The level to which your youngist decendent is at
      
            // OBJECTS
      this.childObj
      this.doc                              = parent.doc;
      this.events                              = new eventHolder()
      this.tempObj                        = parent
      
            // ARRAYS
      this.img                              = new Array;
      this.child                              = new Array;            // Collection of children arranged within an array
      this.child.count                  = 0;      
      
            // IMAGES
      this.nodeClick                        = new Image();
      this.icon                              = new Image();      
      
      this.iconOpenSrc                  = imgOpen;
      this.iconClosedSrc                  = imgClosed;      
      this.icon.src                        = (this.isOpen) ?      this.iconOpenSrc : this.iconClosedSrc;                  
      this.icon.width                        = (this.icon.width > imgMaxWidth) ?            imgMaxWidth : this.icon.width;

            // METHODS
      this.addFolder                        = node_addFolder;
      this.addFile                        = node_addFile;
      this.remove                              = node_remove;
      
      this.isLastChild                  = node_isLastChild;
      this.getNodeClick                  = node_getNodeClick;
      this.setState                        = node_changeState;
      this.expand                              = node_expand;
      this.collapse                        = node_collapse;
      this.assign                              = node_assign;
      this.draw                              = node_draw;
      
      return this;
}


// PUBLIC
function node_addFolder(caption, imgClosed, imgOpen, href){
      
      if (!imgOpen) imgOpen = imgClosed;
      
      newFolder = new node(this, "FOLDER", caption, imgOpen, imgClosed, href, false);      // Create new node.
      
      this.child[newFolder.childIndex] = newFolder;                              // Add new child node to children.
      this.child.count++;                                                                        // Increase child count by 1.
      
      this.treeView.node[newFolder.index] = newFolder;                        // Add new child node to treeView's nodes.
      this.treeView.node.count++;                                                            // Increase treeView's node count.
      
      return newFolder;                  // Return new node as a new folder.
}


// PUBLIC
function node_addFile(caption, img, href){

      newFile = new node(this, "FILE", caption, img, img, href, null);            // Create new node.
      
      this.child[newFile.childIndex] = newFile;                              // Add new child node to children.
      this.child.count++;                                                                  // Increase child count by 1.                  
      
      this.treeView.node[newFile.index] = newFile;                        // Add new child node to treeView's nodes.                  
      this.treeView.node.count++;                                                      // Increase treeView's node count.
      
      return newFile;                        // Return new node as a new file.
}


// PUBLIC
function node_remove(){

      //if (this.child.count > 0){
      //      for (this.i = 0; this.i < this.child.count; this.i++)
                  
      //}
      
}



// This function tells if the node is the last child of it's parent.
function node_isLastChild(){
      
      if(this.parent.child.count - 1 == this.childIndex)            return true;
      else                                                                              return false;
}


// This function returns the image which is clicked this changes each time the node is clicked.
function node_getNodeClick(){

      if (this.level){
            if (this.child.count){
                  if (this.isLastChild()){
                        if (this.isOpen)      return kids_last_open;
                        else                        return kids_last_closed;
                        }      
                  else{                  
                        if (this.isOpen)      return kids_notLast_open;
                        else                        return kids_notLast_closed;
                        }
                  }
            else{
                  if (this.isLastChild())      return noKids_last;
                  else                              return noKids_notLast;
                  }
            }
      else{
            if (this.child.count){
                  if (this.isOpen)            return root_kids_open;
                  else                              return root_kids_closed;
                  }
            else                                    return root_noKids;
            }
}








function node_changeState(newState){
      //alert(this.childObj.id)
      this.isOpen = newState;
      this.nodeClick.src = this.getNodeClick();
      
      if (newState){
            this.icon.src = this.iconOpenSrc;
            this.nodeClick.alt = "Close : " + noHTMLTags(this.caption);
            this.expand()
            }
      else{
            this.nodeClick.alt = "Open : " + noHTMLTags(this.caption);
            this.icon.src = this.iconClosedSrc;
            this.collapse();
            }

}


function node_expand(){
      
      if (this.childObj){
            if (IE)                  this.childObj.style.display = "";
            else if (NS)      this.childObj.visibility      = "show";
            // Raise Event
            // this.events.onExpand()
            }
}



function node_collapse(){

      if (this.childObj){
            if (IE)                  this.childObj.style.display = "none";
            else if (NS)      this.childObj.visibility      = "hide";
            // Raise Event
            // this.events.onCollapse()
            }
}


function node_draw(){

      // First draw the node within a table so you can position everything correctly
      this.doc.writeln(arrow + "TABLE  BORDER='1' CELLSPACING='0' CELLPADDING='0' >" + newLine);
      this.doc.writeln(arrow + "TR HEIGHT='" + imgHeight + "'>" + newLine);
            
      for(this.i = this.level ; this.i >= 0; this.i--){                  
            if ((this.tempObj.type == "TREEVIEW")||(this.tempObj.type == "ROOT"))
                        this.img[this.i] = blank;
            else{
                  if (this.tempObj.isLastChild())      this.img[this.i] = blank;
                  else                                          this.img[this.i] = vertical;
                  }
            
            this.tempObj = this.tempObj.parent
            }

      for (this.i = 1; this.i < this.level + 1; this.i++)
            this.doc.writeln(arrow + "TD WIDTH='" + imgWidth + "' NOWRAP>" +
             drawImg(this.img[this.i], imgWidth) + arrow + "/TD>" + newLine);
             
      if (IE)
            this.doc.writeln(arrow + "TD WIDTH='" + imgWidth + "' NOWRAP>" +
             drawImg(this.getNodeClick(), imgWidth, ( "nodeClick" + this.index ), null, null) + arrow + "/TD>" + newLine);
      else if (NS)
            this.doc.writeln(arrow + "TD WIDTH='" + imgWidth + "' NOWRAP>" +
             drawImg(this.getNodeClick(), imgWidth, ( "nodeClick" + this.index ), "clickNode(" + this.index + ")", null) + arrow + "/TD>" + newLine);
            
      this.doc.writeln(arrow + "TD WIDTH='" + ( this.icon.width + 5 ) + "' NOWRAP>" +
       drawImg(this.icon.src , this.icon.width, "icon" + this.index) + arrow + "/TD>" + newLine);
      this.doc.writeln(arrow + "TD NOWRAP>" + this.outputText + arrow + "/TD>" + newLine);
      this.doc.writeln(arrow + "/TR>" + newLine);
      this.doc.writeln(arrow + "/TABLE>" + newLine);

      if (IE){
            if (this.child.count > 0){ // If has children

                  this.doc.writeln(arrow + "DIV ID='childObj" + this.index + "'>" + newLine);

                  for(this.i = 0; this.i < this.child.count; this.i++)
                        this.child[this.i].draw();      // Draw each child

                  this.doc.writeln(arrow + "/DIV>" + newLine);      // Close the div containing children

                  }

            // Assign the objects just created to the nodes properties
            this.icon = this.doc.all["icon" + this.index];
            this.nodeClick = this.doc.all["nodeClick" + this.index];
            this.nodeClick.onclick = clickNode;
            this.nodeClick.onmouseover = mouseOverNode;
            this.nodeClick.node = this;
      
            if (this.child.count){
                  this.childObj = this.doc.all["childObj" + this.index];
                  this.setState(this.isOpen);
                  this.nodeClick.style.cursor = "hand";
                        }
            }
      else if (NS){
            //this.icon = this.doc.images[1]
            //alert(this.icon)
            
            if (this.child.count > 0){
      
            this.doc.writeln(arrow + 'LAYER ID="childObj' + this.index + '"  >' + newLine);            // Draw layer that contains children
            
            for(this.i = 0; this.i < this.child.count; this.i++) this.child[this.i].draw();            // Draw each child

            this.doc.writeln(arrow + "/LAYER>" + newLine);

                  }
            }
}




// NS only
function node_assign(){

      if (this.child.count > 0){
      
            this.childObj = this.parent.childObj.document.layers["childObj" + this.index];
            //alert(this.childObj)
            for(this.i = 0; this.i < this.child.count; this.i++) this.child[this.i].assign();
            
            this.setState(this.isOpen)
      }
}






function drawImg(image, width, id, onClick, onMouseOver){

      imageCode = new String(arrow + 'IMG SRC="' + image + '" BORDER="0" ');
      
      if (width) imageCode = imageCode + ' width="' + width + '"';
            
      if (id) imageCode = imageCode + ' ID="' + id + '" Name="' + id + '"';
            
      if (onClick)
            if (IE) imageCode = imageCode + ' onClick="' + onClick + '"';
            else if (NS) imageCode = '<A HREF="javascript:' + onClick + '"  target="_self">' + imageCode + '></A';
      
      if ((IE) && (onMouseOver)) imageCode = imageCode + ' onMouseOver="' + onMouseOver + '"';
      
      imageCode = imageCode + '>';
            
      return imageCode;
}







// NODE EVENTS
function clickNode(index){
// This function is called when the node's plus or minus sign is clicked
      if (index){
            node = treeView.node[index];
            node.setState(!node.isOpen);
            }
      else
            this.node.setState(!this.node.isOpen);
}


function mouseOverNode(index){

      var status = "";
      
      
      if (index != null){
            node = treeView.node[index];
            if (node.child.count)
                  if (node.isOpen)      status = "Close : " + noHTMLTags(node.caption);
                  else                        status = "Open : " + noHTMLTags(node.caption);
            }
      else
            if (this.node.child.count)
                  if (this.node.isOpen)      status = "Close : " + noHTMLTags(this.node.caption);
                  else                              status = "Open : " + noHTMLTags(this.node.caption);
                  
            
      
      self.status = status;                        
            
 }



// This is a simple function which extracts the HTML tags out of the given text.
function noHTMLTags(caption){

      if(!caption)
            return;
            
      caption             = new String(caption)
      var tags       = true;
      var start       = 1;
      var tagStart = 0;
      var tagEnd       = 0;
      
      while (tags){
                  
            tagStart = caption.indexOf("<", start);

            if (tagStart > -1){
                  tagEnd = caption.indexOf(">",tagStart);

                  if (start == 1)      start = 0;
                              
                  if (tagEnd > -1)caption = caption.substring(start, tagStart) + caption.substring(tagEnd + 1, caption.length);
                  else                  caption = caption.substring(start, tagStart);
                  }
            else      tags = false;
            
            }
            
      return caption;
}

</script>



<script language=javascript>
// Site Map script

updated = "<img src='Images/treeView/updated.gif'>";
newFile = "<img src='cnew.gif'>";
fastCode = "<img src='Images/fast.gif'>";

folderOpen = "Images/treeView/folderOpen.gif";
folderClosed = "Images/treeView/folderClosed.gif";
bookOpen = "Images/treeView/bookOpen.gif";
bookClosed = "Images/treeView/bookClosed.gif";

code = "Images/treeView/code.gif";
download = "Images/treeView/download.gif";
register = "Images/treeView/register.gif";


//function node_addFolder(caption, imgClosed, imgOpen, href, state)
//function node_addFile(caption, img, href)



treeView = new treeView("BLUE","Hello there","good buy");

DDSite = treeView.addRoot("Web Site","Images/vbWorld.gif");                                    //1

      vb = DDSite.addFolder("<B>Visual Basic</B>", folderClosed, folderOpen, "vb/Index.htm");            //2
      vbSourceCode = vb.addFolder("Source Code", folderClosed, folderOpen, "vb/code/index.htm");
            vbAddins = vb.addFolder("Addins", folderClosed, folderOpen);

                  vb2html = vbAddins.addFolder("VB2HTML V1.1" + updated, folderClosed, folderOpen);
                        vb2html_info = vb2html.addFile("Info", code, "View Info");
                        vb2html_download = vb2html.addFile("Download", download, "Download VB2HTML");
                        vb2html_register = vb2html.addFile("Register",download, "Register");
                        
                                                            
                                    
                        

                        
                              
            treeView.draw("main")
            
</script>
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 8088286
<script>
fields = new Array()
function saveForm(theForm) {
   for (i=0;i<theForm.elements.length;i++) {
     if (.....) { /* test what type of field it is, only text fields have .value directly */
       fields[theForm.elements.name]=theForm.elements.value
     }
   }
   cook=""
   for (i in fields) cook+='&'+i+'='+fields[i]
   setCookie('formvals',cook.substring(1))
}

function fillForm() {
   formvals = getCookie('formvals');
   if (!formvals) return;
   allFields = formvals.split('&')
   for (i=0;i<allFields.length;i++) {  
      nameVal = allFields[i].split('=')
      document.myForm.elements[nameVal[0]].value=nameVal[0]
   }
}
<body onLoad="fillForm()">


<form name="myForm" onSubmit="saveForm(this)">


the fillForm only works with text and hidden fields, not with dropdowns or radios/checkboxes
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 400 total points
ID: 8088288
get and setCookie is available from irt.org or cookiecentral.com
0
 
LVL 1

Expert Comment

by:piyush_b
ID: 8088945
Cookies have a limitation of 4k and 20 per site. You cannot store 'huge' information using cookies.

Could  you elaborate on your requirement a bit, please?

If you are trying to retain the values of the controls on your pages on hitting back button, suggests that you are 'submitting' the form before setting the values back for the form controls.

In such a situation, going for a server based solution is better.
0
 
LVL 16

Expert Comment

by:jaysolomon
ID: 10098210
No comment has been added lately, so it's time to clean up this TA.
I will leave the following recommendation for this question in the Cleanup topic area:

Accept: mplungjan {http:#8088288}

Please leave any comments here within the next seven days.
PLEASE DO NOT ACCEPT THIS COMMENT AS AN ANSWER!

jAy
EE Cleanup Volunteer
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

800 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question