jQuery tabs view state

Posted on May 28, 2009 by Adam Estrada

I recently developed a little web UI that used jQuery tabs. I LOVE jQuery because it’s literally plug and play which means that when you’re in a rush to get the job done, less development is much, much more…

My only issue with the tabs was that they didn’t maintain their view state. If I clicked on tab #3, I would need to have a way to force tab #3 to open again by default when the page was reopened. This functionality is built in (a little hidden) but built in. First, you must include all your jQuery scripts and style sheets in your HTML, ASP, PHP, ASPX, etc. page then simply expand upon what comes with the script on the jQuery example page..

?View Code JAVASCRIPT
1
2
3
4
5
6
7

<script type="text/javascript"><!--
 
         $(function() {
		$("#tabs").tabs();
	});
 
// --></script>

The expanded script is as follows:

?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<script type="text/javascript"><!--
 
            $(function() {
                $("#tabs").bind('tabsselect', function(event, ui) {
                    document.location = '#' + (ui.index + 1);
                });
                // Tabs
                $('#tabs').tabs();
                if (document.location.hash != '') {
                    //get the index from URL hash
                    tabSelect = document.location.hash.substr(1, document.location.hash.length);
                    $("#tabs").tabs('select', tabSelect - 1);
                 }
                });          
               $('#tabs').tabs({
                    select: function(event, ui) {
                        location.href = $.data(ui.tab, 'load.tabs');
                        return false;
                    }
                });
                $('#tabs').tabs({
                    load: function(event, ui) {
                        $('a', ui.panel).click(function() {
                            $(ui.panel).load(this.href);
                            return false;
                        });
                    }
                });
 
// --></script>

You can see from the above code that the script is now looking for the hash (anchor) tag in the “id” of the “div” tag…

?View Code HTML
1
2
3
4
5
6
7
8
9
10

<div id="tabs">
<ul class="tabs">
	<li><strong><a href="home.asp"><span>Home</span></a></strong></li>
	<li><strong><a href="query.asp"><span>Query</span></a></strong></li>
	<li><strong><a href="#map"><span>Map</span></a></strong></li>
	<li><strong><a href="help.asp"><span>Help</span></a></strong></li>
</ul>
<div id="map">
    <object width="100" height="100" data="map/MainMap.swf" type="application/x-shockwave-flash"><param name="quality" value="high" /><param name="bgcolor" value="#FFFFFF" /><param name="allowScriptAccess" value="always" /><param name="src" value="map/MainMap.swf" /></object></div>
</div>

The tabs now report the tab number to the address bar in your browser which looks like this. http://www.mysight.com/#map notice that I typed in the #map hash tag because this is the only tab that is not being loaded by the inherent Ajax capabilities that come standard with jQuery. When the page is being loaded via the Ajax method the tab above it displays the “loading” text but for some reason acts funny when navigating back to it with this method. Thus, only page parts like you see above that are referenced in DIV tags can consistently be loaded by referencing the tag ID.

Now, let’s say you have a map embedded in to one of your tabs like in the example above and you want to do something like zoom to a particular location from a hyperlink in another tab. If your map was developed using Flex and Actionscript 3, you can code your application to listen for changes in the URL parameters. You can initialize the script using the “mx:initialize” tags. This is a good way to initialize several functions at the same time…

?View Code MXML
1
2
3
4
5

<mx:initialize>        
        <![CDATA[    
         setMapLocation();
        ]]>   
</mx:initialize>
?View Code ACTIONSCRIPT3
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

            //Grab the Correct URL and Zoom to 1:25,000
            private function setMapLocation():void            
            {                
                var params:Object = getURLParameters();                
                    if (params["ll"])                
                    {                    
                var latlong:Array = String(params.ll).split(",");                    
                    if (latlong.length == 2)                    
                {                           
                map.centerAt(new MapPoint(latlong[1], latlong[0]));
                map.scale = 25000;                
                }                
             }                 
             }           
 
             //Gets the URL Parameters
             private function getURLParameters():Object            
             {                
             var result:URLVariables = new URLVariables();               
              try                
              {                    
              if (ExternalInterface.available)                    
              {                       
              // Use JavaScript to get the search string from the current browser location.  
              // Use substring() to remove leading '?'.                        
              // See http://livedocs.adobe.com/flex/3/langref/flash/external/ExternalInterface.html                        
              var search:String = ExternalInterface.call("location.search.substring", 1);                        
                  if (search && search.length > 0)                        
                  {                            
                    result.decode(search);                        
                  }                    
                }                
              }                
                 catch (error:Error)                
              {                   
                Alert.show(error.toString());                
               }                
               return result;            
               }      
       ]]>
</mx:initialize>

Now, when you pass a latitude and longitude to another tab in your web page the map will zoom to that location at 1:25,000 scale. The syntax for this is http://www.mysight.com/?ll=39.1234,-95.4321#map

Bookmark and Share

More from Adam Estrada

Adam Estrada Recommends

AdamEstrada has content marketing with Arkayne Socialize.
This entry was posted in Flex, MXML, jQuery and tagged , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Spam protection by WP Captcha-Free