Click here to Skip to main content
Click here to Skip to main content

Salajax: simple Ajax library solving back button and bookmarks for Ajax web applications

, 11 Jul 2007
Rate this:
Please Sign up or sign in to vote.
An article on AJAX [Asynchronous JavaScript and XML], providing back button and bookmark functionality in a simplified class. Written in JavaScript, demonstrated in ASP.NET and can be used with any server-side scripting language.

Introduction

Screenshot - ajax.gif

Salajax is a simplified Ajax library that handles back buttons, bookmarks and is extremely simple to use. Yes, Ajax is great. It does have some minor issues though, like the back button not working and the inability to use bookmarks. This library provides a simple class that will handle all these issues and more, without you having to think about it too much.

The Simple Ajax Library Ajax class (Salajax) tries to:

  • Make the back button work with Ajax
  • Make bookmarks work with Ajax
  • Run JavaScript contained in the Ajax response
  • Keep the .NET Viewstate
  • Submit forms as an Ajax request
  • Specify OnStart and OnEnd JavaScript functions to call
  • Specify an OnError JavaScript function to call when the Ajax response is an error
  • Set the HTML to display when updating a div with an Ajax request
  • Set the HTML to display when there is an error making the Ajax request
  • Be extremely simple to use

Basically, I'm hoping that the Salajax class will make it very easy to do everything and anything you could possibly want to do using Ajax.

Background

This article presents a simplified Ajax library written in JavaScript. Hopefully many developers will find it useful. Ajax is an exciting new technology that will change the way we develop our web applications. That was the introduction to the fist article I wrote on Ajax, presenting a simplified Ajax library with only two methods. I called it SAL, for Simplified Ajax Library. You can read about it here.

Yes, Ajax was the big buzzword. It was going to revolutionise the web and the way we developed applications. Then somebody noticed a few minor problems, i.e. the back button did not work properly; users would most likely end up at the previous site they were visiting or become confused. Also, developers found that they couldn't run the JavaScript that was returned in the Ajax responses, plus more problems.

That's why I decided to build the next simplified Ajax library or SAL version 2. Things I wanted to add at the beginning were: making it a self-contained class, making the back button work, accounting for Viewstate, and giving backwards compatibility with SAL v1. Things I added on the way were: OnEvents, having customisable HTML when updating or at an error, and getting bookmarks to work. Also, updating multiple sections seems to be run on different threads now.

Not all the code is mine. I found some code on the internet that fits well and have maybe edited it. One example of this is the hash listener class, for which I have left the original comments of the author. However, a lot of the code is written by me. I can't guarantee that this will work on all browsers, however. It really does use a lot of complex JavaScript to make the back buttons work, etc. I have tested it in FireFox 2.0.0.3 and IE 6.0.2900.2180; it works well with those.

Using the code

Well, initially you will have to include the JS file in the head of your page like this:

<script language="JavaScript" src="Salajax.js"></script>

Here is the comment contained at the top of the Salajax.js class:

/*
The Salajax Class.
Ajax class that allows use of the back button and bookmarks.
Written by Nigel Liefrink.

Usage:
    //set up the Salajax settings. Do this in the <head> of the page
    var SAL = new Salajax();
    sal.Debug = 0;
    sal.EnableBackButton(true); //turns on the back buttons.
    sal.EnableBookmarks(true); 
        //saves state in the clients cookies so bookmarks will work
        //provided they havn't deleted their cookies.
    sal.OnStart = 'TestOnStart()'; //enables a script to run before 
        //the request is made. e.g. change pointer/icon/loading section of 
        //page.
    sal.OnEnd = 'TestOnEnd()'; 
        //enables a script to run after the request is returned. 
        //e.g. change pointer/icon/loading section of page.
    sal.PresendHtml = '<img border="0" src="loading24-1.gif"/>';
        //When calling  setInnerHTMLFromAjaxResponse the div will 
        //be updated with this html, set to null to turn off this feature.
    sal.OnError = 'DefaultOnError()';
        //set a function to pass to if there is an error.
    sal.OnErrorHtml = 
        '<img border="0" 
        src="error_icon.gif" /><font color="red">Error!</font>'; 
        //When calling  setInnerHTMLFromAjaxResponse and there is 
        //an error, this will be displayed. set to null to turn off 
        //this feature.
    sal.EvalScripts = true;  
        //if set to true, will evaluate any JavaScript in the responseText. 
        //NOTE: to use/override functions returned in your responseText you 
        //must declare the functions in your Ajax response like this:
        //         var FunctionToChange = function(var1,var2) 
        //not like this : function FunctionToChange(var1,var2)
        //         { 
        //             //do stuff
        //         }
        //            
    this.KeepDotNetViewState = true; 
    //if set to true will post the current viewstate when using .NET 
    //not recommended when using bookmarks as viewstate can be huge.
    //end setting the Salajax settings.
    
    
    Some examples of main usage in a web page: (onclick events etc...)
    
    sal.PassAjaxResponseToFunction('/myscript.*?getsomehtml=1', 
        'FunctionToHandleTheResponse');
    sal.PassAjaxResponseToFunction(document.forms[0], 
        'FunctionToHandleTheResponse');

    sal.SetInnerHTMLFromAjaxResponse('/myscript.*?getsomehtml=1', 
        'id_of_div'); //using get and string of id div.
    sal.SetInnerHTMLFromAjaxResponse(document.forms[0], 
        object);//using post and object to change the innerhtml of.
    sal.SetInnerHTMLFromAjaxResponse('form', 
        'id_of_div');//using post ('form' will submit forms[0]'), 
                     //object to change the innerhtml of.

    Read function definitions for more detail.
    Note that initial values are all false for backward compatability.
*/

If you want back buttons to work for some calls but not others, simply create another instance of the class.

var SAL = new Salajax();
sal.EnableBackButtons(true)
//in the web page
<input type="submit" value="OK" 
    onclick="sal.SetInnerHtmlFromAjaxResponse('form','div_1');" />

var sal2 = new Salajax();
//in the web page
<input type="submit" value="OK" 
    onclick="sal2.SetInnerHtmlFromAjaxResponse('?gethtml=1','div_2');" />

For backwards compatibility with SAL version 1, I have included these two functions at the top of the script. THey demonstrate how you can use many instances to handle Ajax requests differently.

/* Backward compatability. */
function PassAjaxResponseToFunction(urlOrForm, callbackFunction)
{
    var SAL = new Salajax();
    sal.PresendHtml = null;
    sal.OnError = '';
    sal.ErrorHtml == null;
    sal.PassAjaxResponseToFunction(urlOrForm, callbackFunction);
}

/* Backward compatability. */
function SetInnerHTMLFromAjaxResponse(urlOrForm, obj_id)
{
    var SAL = new Salajax();
    sal.PresendHtml = null;
    sal.OnError = '';
    sal.ErrorHtml == null;
    sal.SetInnerHTMLFromAjaxResponse(urlOrForm, obj_id);
}

There's not much more to it than that. Just create the instance, set the properties and then start using the 2 main functions of the Salajax class in JavaScript events. To get the demo project working, unzip the Salajax_demo.zip file to an appropriate location like wwwroot, but anywhere will do. Create a virtual directory in Information Services Manager/IIS under the "Default Web Site" with an alias of "sal_demo" and the directory path referencing the sal_demo folder you unzipped. Opening the project in Visual Studio, you should now be able to compile, debug and run the demo project.

Points of interest

Cookies can only hold 4 Kb of data. So if you are keeping a lot of data in your forms, such as the .NET Viewstate, keeping bookmarks and the back button working with Ajax may not be the ideal solution for you.

Threading for each of the JavaScript calls now seems to work differently -- multiple threads -- now that the calls are wrapped up in an instance class.

The complexity of the JavaScript used to make the back button work makes me think that this code will most likely not be compatible with some browsers. It would be good to get feedback on compatibility from people.

History

  • First version of SAL is in this article here
  • Second version of SAL (this article) first posted 11/07/2007

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Share

About the Author

Nigel Liefrink 3

United States United States
No Biography provided

Comments and Discussions

 
Generalhandle form post Pinmemberpras0109198123-Jul-09 5:35 
GeneralRe: handle form post PinmemberNigel Liefrink 323-Jul-09 14:53 
GeneralHere is a simpler solution to the ajax back button problem Pinmembernone6-Nov-08 17:52 
I went onto zedwood.com and found a pretty cool back button fix for ajax.[^]
 
What you think?
GeneralRe: Here is a simpler solution to the ajax back button problem PinmemberNigel Liefrink 323-Jul-09 14:58 
QuestionThis seems a nice one, but how does it work with Php serverside scripts? Pinmemberjeanray27-Oct-08 6:53 
AnswerRe: This seems a nice one, but how does it work with Php serverside scripts? PinmemberNigel Liefrink 327-Oct-08 17:38 
NewsSomeone's review about this library PinmemberNigel Liefrink 214-Aug-08 16:03 
AnswerYou can use ASP.NET 3.5 Histroy Control. PinmemberMember 32683603-Aug-08 19:31 
GeneralLongAjaxCall button freezes all other ajax calls PinmemberMichael Ulmann30-Apr-08 14:58 
GeneralRe: LongAjaxCall button freezes all other ajax calls PinmemberNigel Liefrink 39-Jun-08 21:14 
GeneralOr PinmemberRazvyB16-Jul-07 19:49 
GeneralRe: Or PinmemberNigel Liefrink 34-Dec-07 13:28 
GeneralMethod PinmemberAshley van Gerven11-Jul-07 20:28 
GeneralRe: Method PinmemberNigel Liefrink15-Jul-07 21:17 
GeneralRe: Method Pinmemberyulin113-Dec-07 17:34 
GeneralHi PinmemberRanjan.D11-Jul-07 8:19 
GeneralRe: Hi Pinmembersameeraperera11-Jul-07 17:30 
GeneralRe: Hi PinmemberRanjan.D13-Jul-07 5:20 
GeneralRe: Hi Pinmembersameeraperera13-Jul-07 5:36 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web02 | 2.8.140827.1 | Last Updated 11 Jul 2007
Article Copyright 2007 by Nigel Liefrink 3
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid