Preserve Selected Tab Between Refreshes

[dfrazell]

I don't know if this is a javascript issue but I'll start here. I have a page that has three tabs across to display different content for each order number displayed below on the page. For example, tab 1 shows customer info, tab 2 shows dates, tab 3 shows acct mgr info. If the user is viewing the content on tab three and changes the filter options to refine the results, the page refreshed to tab 1 when it returns. I would like it to stay on tab 3. The tabs are done with CSS, div tags, and javascript.
When a tab is selected it stays on the client side.
When a filter option is submitted it goes to the server side to query the database and then returns the result set.
Is there anyway to know tab x was selected when the results are returned?
Thanks

 

[southbeach]

What are you using for server side scripting? This is more of a server side scripting question that it is JS ...

Then again, you can have events trigger a JS function where you can set cookies and then check these cookies as a way to know the state of the page prior to last submit.



--
SouthBeach
The good thing about not knowing is the opportunity to learn - Yours truly, 2008.

 

[dfrazell]

I'm using ASP VB on the server side.

 

[IPGuru]

this sound like a task for an AJAX type request to update the dispaly instead of a full page refresh

 

[southbeach]

Have you considered using AJAX to set ASP variables as tabs are clicked on? By using variables (global or session variables) you should be able to capture this information.

Another approach is to have hidden fields set to blank by default, and using JS script to populate these fields as tabs are clicked.

Then have your ASP look at these fields' values and upon re-rendering the page, you can set the tab attributes as needed.



--
SouthBeach
The good thing about not knowing is the opportunity to learn - Yours truly, 2008.

 

[dfrazell]

I've not done anything with AJAX yet. How would I approach this with an AJAX solution?

 

[southbeach]

Borrowing from another thread posted by akabella123

function getHTTPObject() {
  var xhr = null ;
  try {
    xhr = new XMLHttpRequest() ;
  } catch(e) {
    // standards request failed - try ie
    try {
      xhr = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (e) {
      // both attempts failed
      xhr = null ;
    }
  }
  return xhr ;
}

/*-----------------------------------------------------------------------------------------------*/

function saveTabInfo() {  
    xmlhttp=getHTTPObject();
    if (xmlhttp==null) {
        alert ("Your browser does not support AJAX!");
        return;
    }  
    var url="your_asp_page.asp";

    var tab1="what_ever_you_need_for_tab1";
    var tab2="what_ever_you_need_for_tab2";
    var tab3="what_ever_you_need_for_tab3";

    url=url+"?tab1="+tab1+"&tab2="+tab2+"&tab3="+tab3;
    xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 || xmlhttp.readyState=="complete") {
            // use this section to set document properties if needed!
        }
    }
    xmlhttp.open("GET",url,true);
    xmlhttp.send(null);
}

The above JS could be used to execute an ASP page which can then set variables in ASP environment. I would use session variables and reset them accordingly.

Notice that the method used is GET not POST (you can change this within the xmlhttp.open("GET",url,true) statement). Key is to use an event to trigger/call the JS function saveTabInfo(); you should be able to use onclick ...

Hope this helps!


--
SouthBeach
The good thing about not knowing is the opportunity to learn - Yours truly, 2008.