Cache tab content queries in events page

[karthikabinav]

When I click tab 1 it takes some time to fetch the contents of tab 1 . But on re clicking that tab again later when I am on the same page , shouldnt it ideally load faster ? I think its again going all the way till the database to fetch the contents. Shouldnt that data be kept somewhere in a place like memcache and retrieved from there directly ?

[BademiChetan]

Cache queries using javascript and/or local storage.

[BademiChetan]

This was done. Closing the issue. Since there are no pull request, I'm just pasting the diff here.

+    $(function(){
+        // Keep a mapping of url-to-container for caching purposes.
+        var cache = {
+            // If url is '' (no fragment), display this div's content.
+            '': $('.bbq-default')
+        };

-                // Get the hash (fragment) as a string, with any leading # removed. Note that
-                // in jQuery 1.4, you should use e.fragment instead of $.param.fragment().
-                var url = $.param.fragment();
-                if(url)
-                {
-                    if(url.split('submission/')[1])
-                    {
-                        if (url.split('ques/')[1])
-                        {
-                            $(".bbq-item #q_detail").load( url, function(){
-                                    // Content loaded, hide "loading" content.
-                                    $( '.bbq-item' ).show();
-                                });
-                        }
-                        else 
-                        {
-                            $(".bbq-item #maincontent").load( url, function(){
-                                    // Content loaded, hide "loading" content.
-                                    $( '.bbq-item' ).show();
-                                });
-                        }
-                    } 
-                    else
-                    {
-                        $(".bbq-default").hide();
-                        $(".bbq-item").hide();
+        // Bind an event to window.onhashchange that, when the history state changes,
+        // gets the url from the hash and displays either our cached content or fetches
+        // new content to be displayed.
+        $(window).bind( 'hashchange', function(e) {
-                        // Show "loading" content while AJAX content loads.
-                        $( '.bbq-loading' ).show();
-                        // Load external content via AJAX. Note that in order to keep this
-                        // example streamlined, only the content in .infobox is shown. You'll
-                        // want to change this based on your needs.
-                        $( '.bbq-item' ).load( url.split('/tab')[0], function(){
+            // Get the hash (fragment) as a string, with any leading # removed. Note that
+            // in jQuery 1.4, you should use e.fragment instead of $.param.fragment().
+            var url = $.param.fragment();
+            $( '.bbq-item,.bbq-default' ).hide();
+            if(!url) {
+                $('.bbq-default').show();
+                return;
+            }
+            var event_name=url.split('/tab')[0];
+            if(cache[event_name]) {
+                var event = cache[event_name];
+                if(cache[url]) {
+                    event.find(".tabtext").html(cache[url]);
+                } else {
+                    event.find(".tabtext").load( url, function(){
+                                // Content loaded, hide "loading" content.
+                                $( '.bbq-loading' ).hide();
+                                resetabs();
+                                cache[url] = event.find(".tabtext").html();
+                        });
+                }
+                event.show();
+            } else {
+                if(url.split('submission/')[1]) {
+                    // Show "loading" content while AJAX content loads.
+                    $( '.bbq-loading' ).show();
+                    if (url.split('ques/')[1]) {
+                        $(".bbq-item #q_detail").load( url, function(){
+                                // Content loaded, hide "loading" content.
+                                $( '.bbq-item' ).show();
+                            });
+                    } else {
+                        $(".bbq-item #tabtext").load( url, function(){
                                 // Content loaded, hide "loading" content.
-                                $(".bbq-item #maincontent").load( url, function(){
-                                        // Content loaded, hide "loading" content.
-                                       $( '.bbq-loading' ).hide();
-                                       $(".bbq-item").show();
-                                       resetabs();
-                                    });
+                                $( '#tabtext' ).show();
                             });
                     }
+                } else {
+                    cache[event_name] = $( '<div class="bbq-item"></div>' ).appendTo( '.bbq-content' );
+
+                    // Load external content via AJAX. Note that in order to keep this
+                    // example streamlined, only the content in .infobox is shown. You'll
+                    // want to change this based on your needs.
+                    cache[event_name].load( event_name, function(){
+
+                        cache[event_name].find(".tabtext").load( url, function(){
+                                    // Content loaded, hide "loading" content.
+                                    $( '.bbq-loading' ).hide();
+                                    resetabs();
+                                    cache[url] = cache[event_name].find(".tabtext").html();
+                            });
+                        });
                 }
-                else
-                {
-                    $(".bbq-item").hide();
-                    $(".bbq-default").show();
-                }
-            })
-            $(window).trigger('hashchange');
+            }
+        })
+        $(window).trigger('hashchange');
-        });
-        </script>