Introduction
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 customizable 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:
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)
<input type="submit" value="OK"
onclick="sal.SetInnerHtmlFromAjaxResponse('form','div_1');" />
var sal2 = new Salajax();
<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.
function PassAjaxResponseToFunction(urlOrForm, callbackFunction)
{
var SAL = new Salajax();
sal.PresendHtml = null;
sal.OnError = '';
sal.ErrorHtml == null;
sal.PassAjaxResponseToFunction(urlOrForm, callbackFunction);
}
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 on 11/07/2007
