My favorites | Sign in
Project Logo
                
Search
for
Updated Feb 04, 2009 by amattie
Labels: Phase-Implementation
Examples  
Some examples of how you can use dsHistory in your app

Example 1

Following is a contrived and condensed pseudo-example based only on functions added to the history stack. It doesn't mess with the visitor's window hash at all, and it's done to show that you don't have to mess with the URI at all if you don't want to for some reason.

<body>
  <script src="dshistory.js"></script>

  <div id="first-tab" onclick="showContent({contentToShow: 'first-block-content', contentToHide: 'second-block-content'})">First tab</div>
  <div id="second-tab" onclick="showContent({contentToShow: 'second-block-content', contentToHide: 'first-block-content'})">Second tab</div>

  <div id="first-block-content">First block content</div>
  <div id="second-block-content" style="display: none;">Second block content</div>

  <script>
  function showContent(contentObject, historyObject) {
    if (!historyObject || !historyObject.calledFromHistory) {
        dsHistory.addFunction(showContent, window, contentObject);
    }

    document.getElementById(contentObject.contentToShow).style.display = 'block';
    document.getElementById(contentObject.contentToHide).style.display = 'none';
  }
  
  dsHistory.addFunction(showContent, window, {
    contentToShow: 'first-block-content',
    contentToHide: 'second-block-content'
  });
  </script>
</body>

Example 2

Now, let's say you want to do the same thing but support bookmarking. You can do something like this:

<body>
  <script src="dshistory.js"></script>

  <div id="first-tab" onclick="showContent({contentToShow: 'first-block-content', contentToHide: 'second-block-content'})">First tab</div>
  <div id="second-tab" onclick="showContent({contentToShow: 'second-block-content', contentToHide: 'first-block-content'})">Second tab</div>

  <div id="first-block-content">First block content</div>
  <div id="second-block-content" style="display: none;">Second block content</div>

  <script>
  function showContent(contentObject, historyObject) {
    if (!historyObject || !historyObject.calledFromHistory) {
        dsHistory.setQueryVar('Showing', contentObject.contentToShow);
        dsHistory.setQueryVar('Hiding', contentObject.contentToHide);
        // this should be treated the same as addFunction as the setQueryVar functions above really don't have any impact yet
        dsHistory.bindQueryVars(showContent, window, contentObject);
        // now, dsHistory.QueryElements['Showing'] = contentObject.contentToShow;
        // now, dsHistory.QueryElements['Hiding'] = contentObject.contentToHide;
    }

    document.getElementById(contentObject.contentToShow).style.display = 'block';
    document.getElementById(contentObject.contentToHide).style.display = 'none';
  }
  
  if (typeof dsHistory.QueryElements['Showing'] == 'string' && typeof dsHistory.QueryElements['Hiding'] == 'string') {
    showContent({contentToShow: dsHistory.QueryElements['Showing'], contentToHide: dsHistory.QueryElements['Hiding']});
  } else {
    dsHistory.addFunction(showContent, window, {
      contentToShow: 'first-block-content',
      contentToHide: 'second-block-content'
    });
  }
  </script>
</body>

Working Demo

If you want to see a working demo, go ahead and take a look.


Comment by mauitz, Mar 07, 2008

I copy and paste the second example into a local htm and does not work. firebug report: dsHistory is not defined file:///C:/Users/maui/Desktop/ajaxNavigation%20example/example.htm Line 13

line 13: dsHistory.setQueryVar('Showing', contentObject.contentToShow);

Can you please help me out. tks

Comment by funliveson, Mar 28, 2008

Can this framework handle page Refresh?

Comment by prideafrica, Jun 02, 2008

Using the first example, I keep getting "historyObject is not defined". And frankly, I do not see where it is being defined in the scripts. Can anyone help me resolve this? How do I get the history object? full example #1 with scripts would be appreciated?.

Comment by chamberlainpi, Sep 13, 2008

You downloaded the source and made it available in the same path (folder) that you're running your HTML on, right?

Comment by cristi.bozga@yahoo.com, Feb 04, 2009

Hi. Is it possible to add in the history stack functions which have more than one parameter? Or do I have to change all the functions to receive just a parameter (which may be a map)? Tx

Comment by amattie, Feb 04, 2009

@Cristi:

Sure you can add functions with more than one parameters! Those parameters will just evaluate to undefined at that point though. You can get around this by using a special binding method where the scope and parameters you specify are closed around an outer function; see the one built into Prototype for more info.


Sign in to add a comment
Hosted by Google Code