1

So I am rewriting the UI for an application that currently loads all the actual page content via iframes and just has a wrapper around it that contains a menu and some other information.

My question is what is the best method to replace these iframes and keep browser history functionality ( back/forward ).

Somethings ive been thinking of:

  • Extending a base template ( this seems like a good method but some of the pages are written in different templating languages so would be a lot of work )

  • Loading via jQuery ( I am trying to do this with the .load() method but it seems the browser history is trickier than I thought )

=====Update=======

So I am trying to use jquery BBQ and queryparam but I am not sure I am using it correctly it wont change the window.location

            $(function(){
                 pageLoadAnimation('{{ framesource }}');

            });

            function pageLoad(url){
                console.log(url);
                $.param.querystring(window.location.href, 'p='+url , 2);
            }
            function pageLoadAnimation(url){
                $('body').css('cursor','wait');
                $('#mainframe').html('');
                $('#page-load-wrap').slideDown();
                $('#page-load-indicator').css('width','80%');

                $.get(url,function(data){
                console.log(data);
                $('#page-load-indicator').css('width','100%');
                $('#page-load-wrap').slideUp('slow',function(){
                    $('#mainframe').html(data);
                });
                $('body').css('cursor','default');
                }); 
            }

So FrameSource is a jinja variable that gets set via an argument in the url called p. It is being read correctly on page load but when I try to click a link nothing happens.

Example Link

<a onclick="pageLoad('%2Fdashboard')">Overview</a>

Console Error

Uncaught TypeError: Object function (a,b){var d=[],e=function(h,l)  {l=c.isFunction(l)?l():l;d[d.length]=
encodeURIComponent(h)+"="+encodeURIComponent(l)};if(b===B)b=c.ajaxSettings.traditional;    if(c.isArray(a)||a.jquery)c.each(a,function(){e(this.name,this.value)});else for(var f in a)da(f,a[f],b,e);return d.join("&").replace(tb,"+")} has no method 'querystring'

Got the back button to work with no plugin but no forward:

changed:

  $.param.querystring(window.location.href, 'p='+url , 2);

to:

  window.location = window.location.origin+window.location.pathname+'?p='+url;
BillPull
  • 6,853
  • 15
  • 60
  • 99
  • I will make use of html div tags. their easy to use and basically serve the same purpose as iframes. you can you jquery .load() method with divs to replace the contents of the div tags – jacqijvv Mar 13 '12 at 18:05
  • ext js 4 could be the answer! – Duke Mar 13 '12 at 18:06

1 Answers1

1

With jQuery/Javascript, you can use html5 history.pushState():

https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history#The_pushState%28%29.C2.A0method

However, if you want more backward-compatible solution, you would use hash tags to track your history, using a hashchange event plugin:

http://benalman.com/projects/jquery-hashchange-plugin/

In this case, whenever you change "pages" you update your hash tag to a unique identifier (i.e. http://www.mysite.com/#page2). You also have to be able to load the correct content when the hash tag changes, hence the plugin.

I have personally used this method with success. It takes a little bit of work to get it running smoothly, but it does the job.

Jeff B
  • 29,943
  • 7
  • 61
  • 90
  • could you provide an example based on the code I added above so far I havent been able to modify any of the hashchange examples to my use case and have had little luck with BBQ as well. – BillPull Mar 13 '12 at 21:42