Web Programming , Design, Development, & Code Tutorials

C# MetadataException: Unable to load the specified metadata resource error

2015-07-26T20:08:00.001-07:00

This post will be about how to fix the "MetadataException: Unable to load the specified metadata resource" error in your ASP.NET web MVC and other applications. I'll keep this one short - what is going on is that the connection string that you used to setup the edmx for the entity model is different from the one now in your Web.Config file. How does it happen and what to do about it? Please see the below points -

Check to see if you recently changed connection strings for production deployment. This is actually the most common reason behind this problem.
Check the entity names for csdl, ssdl and msl in the connection string in the Web.Config file. These appear right after the "metadata=res://*/" part of the connection string in the Web.Config file.
One thing to keep in mind (that also follows from the above points) is that the actual database name and connection infromation is most likely correct. I'm saying this because when we think of connection strings, we tend to check only the database name and connection information. In this case it's the stuff that comes before the actual connection info (that is, before the "provider..." part of the string) that is likely to be messed up.
Sometimes we copy paste the conenction strings between different applications. This is fine but remember that if you do it, then you must change the names of the csdl, ssdl and msl as well in addition to key and the actual connection info. Copying pasting connection strings between applications is another thing that usually causes this problem.

So bottomline, if you encounter the "MetadataException: Unable to load the specified metadata resource" error, then check each and every letter in your connection string and ensure that the parts at the beginning (the ones between "metadata=//*/" and "provider") match with what was used to create the edmx entity model initially.

ASP.NET MVC Renders Length=4 in Html.ActionLink

2015-07-24T23:16:00.000-07:00

You might have noticed this really strange behavior in ASP.NET MVC4 (and possibly other versions too) where @Html.ActionLink inexplicably appends the rendered links with "?Length=4". For example,

@Html.ActionLink("My App Header", "Index", "Home", new { //your html attributes })

becomes

<a href="/MyApp/?Length=4">My App Header</a>

This seems to make no sense at all, but there indeed is an explanation but before we get to that, let's first see a few ways of fixing it.

Solution 1 - Just add a null paramter after the Controller name parameter. Sp, change

@Html.ActionLink("My App Header", "Index", "Home", new { //your html attributes }) to

@Html.ActionLink("My App Header", "Index", "Home", null, new { //your html attributes })

Solution 2 - Use @Url.Action instead. So, basically change

@Html.ActionLink("My App Header", "Index", "Home", new { //your html attributes }) to

<a href="@Url.Action("Index", "Home")" //your html attributes>My App Header</a>

So, now with the solutions out of the way, here is the explanation for just where the Length=4 thing comes from - Basically the @Html.ActionLink method that your code runs in these cases is defined as follows -

public static string ActionLink(this HtmlHelper htmlHelper, string linkText, string actionName, object routeValues, object htmlAttributes)

So, when ASP.NET MVC engine comes across a call like @Html.ActionLink("My App Header", "Index", "Home", new { //your html attributes }), it takes "Home" as the routeValues parameter instead! The way routValues parameter works is that it looks for all public properties in the passed object and uses them for routing as per the routing configuratin. In the case of "Home" object, which is a string, the only public property is "Length" Now, since usually you don't have a "Length" route property in your configuration, it just appends the property name and value to querystring instead. Yes, the ASP.NET MVC Convention over Configuration at work here!! This is actually kinda cool when you think about it!! Now, as for why adding null in @Html.Action fixes it, it's because the null object doesn't have a public property (duh!). As a fun experiment, you could try adding another paramter to @Url.Action and you'll find the Length=4 querystring parameter in your rendered links again!

ASP.NET MVC Upload Large Files

2015-07-24T20:10:00.003-07:00

I recently had to setup a website that required uploading huge files ranging from a few MBs to a few GBs. If you have come across this problem, you'll see that the control never reaches the Controller (pun not intended!) when uploading anything over 304 MB. Turns out ASP.NET requires the Web.Config file to be updated with the following -

maxRequestLength attribute - This attribute tells ASP.NET engine the maximum length of the request (duh!). This goes in the httpRuntime tag of your system.web file. The httpRuntime tag should already be present in your Web.Config, so just look it up and add the maxRequestLength attribute in there. For example -
<system.web> <httpRuntime targetFramework="4.5" maxRequestLength="2147483647"/> </system.web>
It is set in KB and is set to 4096KB. .
maxAllowedContentLength attribute - This attribute tells ASP.NET engine the maximum content length (again duh!). This also goes in the Web.Config file, but in the requestLimits tag under requestFiltering under security tags in system.webServer. This might not be already present in your Web.Config file so just copy paste the below underlined code under the system.webServer tag -

<system.webServer> <security> <requestFiltering> <requestLimits maxAllowedContentLength="2147483647" /> </requestFiltering> </security> </system.webServer>
It is set in Bytes. .

And that's it. Now you can upload those huge files without any problems. A few things to note -

The number in the maxRequestLength attribute is in KB (KiloBytes) but the number in the maxAllowedContentLength attribute is in Bytes.
In cases when the sizes mentioned in maxRequestLength and maxAllowedContentLength attrbutes differ, ASP.NET engine will use the smaller one.
The sizes are in unsigned integers, so they do have an upper limit.
This is probably off topic but remember to not use functions like "ReadToEnd()" for reading files.

ASP.NET MVC Form Submitting Twice Error

2015-07-02T07:13:00.001-07:00

In this post I want to present the causes and resolutions of the cases when a form in a web application automatically submits more than once (usually twice). This usually happens with the forms created with @using (Ajax.BeginForm()) approach. A developer new to ASP.NET MVC can spend hours trying to find out the lines in their code that are duplicated resulting in duplicate form submissions. I have been there as well.

So, what causes this error? It happens because jquery.unobtrusive-ajax.js file is referenced more than once in the webpage. This could be as simple as the script tags being accidentally copied-pasted more than once in the page header or as complicated as a result of some idiosyncrasies of ASP.NET MVC Bundling features. Here are a few things that you can do to help locate and fix duplication.

Turn of Bundling optimizations - The first thing to debug it is to set BundleTable.EnableOptimizations = false in the RegisterBundles method of your BundleConfig.cs file in the App_Start folder. This will ensure that the individual script tags for all of the scripts are visible.
Remove the wildcards in ScriptBundle().Include() - Visual Studio usually creates some of the jQuery references using * wildcards. This can be found in the RegisterBundles method in the BundleConfig.cs file. Specifically, you're looking for the following line -
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include("~/Scripts/jquery.unobtrusive*"));
Here jquery.unobtrusive* allows all of the unobtrusive files to be included in the project. But sometimes, if your script folder has both the regular (jquery.unobtrusive-ajax.js) and the minified (jquery.unobtrusive-ajax.min.js) versions of the file, essentially including the same file twice. Once you have isolated this as the cause, you can consider removing non-minified from the production server.
Check if any other views have the same Script.Render lines - Sometimes, visual studio will include the script sections in views by default for ASP.NET MVC projects, which can result in the developer accidentally copying the @Scripts.Render("~/bundles/jqueryval") line in more than one views. So, do a global search for the @Scripts.Render("~/bundles/jqueryval") line and remove it at all places except for the _Layout.cshtml / master page.
Check to ensure that jquery.unobtrusive-ajax.js file is included only once in the ScriptBundle - For this, you can do a seach for jquery-unobtrusive in the BundleConfig.cs file. If the same file or its minified versions appear more than once, then remove them.
Turn off bundling and include the script tags in your page - If nothing else works, you can consider turning off the bundling. You can do this by removing the @Scripts.Render("~/bundles/jqueryval") line from your layout and all other views. Then add the script tags manually to only your layout or master page. This will help rule out the bundling issues. This will most likely fix this problem for good, as much as I like the bundling approach (Note: At the risk of being super cliche`, I should mention that it's not the bundling at fault here, it's how it's used in the application).

How to fix "$ is not a function", "$ or jQuery are not defined" errors

2015-07-01T03:47:00.000-07:00

In this post, I'll be explaining time tested remedies for the below erros commonly seen in ASP.NET MVC applications -

SyntaxError: missing } in compound statement

ReferenceError: jQuery is not defined

ReferenceError: $ is not defined

TypeError: $ is not a function

You're likely to see these errors when deploying a new application or if you have made modifications to the BundleConfig.cs, _Layout.cshtml, master pages or other such files. I realize that the files that I listed are ASP.NET MVC specific, but the resolutions that I will be listing below apply to most technologies out there. BundleConfig.cs and _Layout.cshtml just refer to the places in ASP.NET MVC where we usually tell the ASP.NET MVC application where the scripts and styles are reside.

So, the error message "jQuery is not defined" clearly tells us that the jQuery script reference is missing. But when you you look in your scripts folder, it's there. The other errors don't even explain what could be wrong, but fear not, try out the below decetively simple resolutions and your errors should go away in a jiffy -

Check to ensure that the jquery file with the proper version is indeed present in your Scripts (or wherever you store the script files) folder - The jquery version part seems to cause these issues quite a bit, so ensure that the version referenced in your view/webpage is exactly the same as the version in the name of the file. In ASP.NET MVC world, you have the option to replace the version number with {version}, that is very helpful in avoiding this problem. So, your BundleConfig.cs will look like
bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.js"));
Ensure that the script reference to your jquery file is indeed there in the rendered HTML page - This goes without saying but in an ASP.NET MVC application, sometimes the scripts will be bundled based on the setting of BundleTable.EnableOptimizations, which makes it almost impossible to see which scripts are actually referenced. Try setting BundleTable.EnableOptimizations to false to be able to see the script tags in the rendered page. I'll go further into the details of how to do it and where in the next item.
Check whether Bundle optimizations are on or off - Another commonly overlooked issue results from the default settings of the optimizations. Basically, ASP.NET MVC allows us to pick the minified versions and regular versions of script files based on this configuration setting. If you're not familiar with it, look for BundleTable.EnableOptimizations in the RegisterBundles method of your BundleConfig.cs file. If you see something like
BundleTable.EnableOptimizations = true;
then the application will be looking for the minified version of the scripts regardless of the name of the file in your BundleCollection. For example, if your jquery file is called, jquery-3.0.1.js and your BundleCollection line says ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.js")); and BundleTable.EnableOptimizations is set to true, then the app will be looking for jquery-3.0.1.min.js and not the jquery-3.0.1.js file. The solution here is to just uploading the minified jquery-3.0.1.min.js file. If you don't have the minified file, then you could set the BundleTable.EnableOptimizations to false and that would remedy it. A side benefit of setting the BundleTable.EnableOptimizations to false for testing is that then you'd be able to see the script tags on the rendered HTML page for each of your scripts, as I mentioned in a previous point. On a side note, you'd also want to check whether your Web.Config is set to debug or release mode.
Ensure that the jquery script reference occurs before any other script references in the webapge/view - This is another common problem when some other scripts that need jquery appear in your script reference section before the jquery file reference. These scripts look for jquery but the jquery file is not loaded because it's referenced further down the line. Just put the jquery reference on the top of your scripts section and you should be good.
Ensure that the jquery reference occurs before other references inside the BundleConfig.cs - The scripts added to the ASP.NET MVC ScriptsBundle render in the same order in which they appear in the BundleConfig.cs file. The remedy is simple, just put the ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.js")); line at the top of your RegisterBundles method.
Check the file sizes of the jquery file on your deployment server - This one almost sounds silly but I've seen cases when the file is not properly uploaded during deployment because of FTP errors etc. The way normal FTP works, if something breaks down during the STOR request in the middle of a big upload, at times the files being uploaded will stay on the server even though they were not fully uploaded. In other words, your file gets partially uploaded (or just an empty file is uploaded) when the upload request fails and now a cursory look will reveal that the file is there...but well, not really. If you don't have access to the production server, then it'd help to look at the logs for any errors during uploads (yes, many of the FTP clients are set to keep going in case of errors).
Check the chaching mechanism of your app - Sometimes the app will cache bad files or sections of pages etc and no matter how many times you refresh, the problem won't go away. One less than ideal solution that I use is deleting the BundleCollection contents completely. You can do this by adding the following lines to the top of your RegisterBundles method in the BundleConfig.cs file (you wouldn't want to do it in the production code though) -
bundles.Clear(); bundles.ResetAll();

So, basically to summarize, we want to ensure that the name of the your jquery file matches exactly with the file name that shows up in the script tag in your view, masterpage, _layout.cshtml etc...and the size of the file matches and that the jquery reference script tag appears before all other scripts that you might be including. That's about it. In ASP.NET MVC world, there could be further complications because of the BundleConfig or WebConfig settings, but they're also easy to get around by a few small changes.

ASP.NET MVC Create Editable Views for Collections

2015-06-28T22:32:00.003-07:00

In this post, I want to focus on a few common mistakes when creating editable views for collections in ASP.NET MVC. These mistakes are related to the ASP.NET MVC wiere format and are pretty common and a new ASP.NET MVC programmer can spend hours trying to figure out what's wrong.

If you are new to ASP.NET MVC wire format, here is a quick primer - It is basically about how your model or viewmodel collection objects are rendered in the views. Let's say you have the following class -

public class Person 
{
public int Id {get;set;}
public string Name {get;set;}
}

Your Controller would look like -

public ActionResult PersonAction(Person[] employeeList) { ... }

Your View takes an IEnumerable of the Person class and looks like the below -

@model IEnumerable<Person>

Now, this Person collection/array

Person employeeList[] = new Person[] {new Person() {Id=1, Name="person1" }, new Person() {Id=2, Name="person2"} };

should show up as below in the rendered HTML -

<input type='hidden' value='0' name='employeeList.Index'/>


<input type='text' value='1' name='employeeList[0].Id' />




<input type='text' value='person1' name='employeeList[0].Name' />


<input type='hidden' value='1' name='employeeList.Index'/>




<input type='text' value='2' name='employeeList[1].Id' />


<input type='text' value='person2' name='employeeList[1].Name' />

Note: This hidden index element is needed in case your list is unordered. For example, if your View supports deletion and addition of new collection items then the indexing can get out of order in a hurry.

So, what are the most overlooked things that might save you hours of debugging? Here goes -

The "name" attribute of your HTML elements that render the collection properties must have the
ActionParameterName.PropertyName signature
-
So, if your controller action method looks like
```
public ActionResult GetList(Person[] employeeList)
```
and a property of the Person class is Id, then the name of the input elements must be like
```
<input type='text' value='1' name='employeeList[0].Id' />
```
(As in the the underlined parts). And it goes without saying that this naming convention will be used for all properties that are to be rendered.
The name of the hidden "index" element must have the ActionParameterName.Index signature - Again, if your controller action method looks like
```
public ActionResult GetList(Person[] employeeList
```
)
then the name of the hidden index element will be like
```
<input type='hidden' value='0' name=&#39employeeList.Index'/>
```
The index of all array elements must be same as the value of the hidden "index" element - So, for rendering the first element of the employeeList array (the index is zero), the hidden "index" element will look like
```
<input type='hidden' value='0' name='employeeList.Index'/> 
```
(notice the value is 0) and the element that render the property Id will look like
```
<input type='text' value='1' name='employeeList[0].Id' />
```

MVC4 Uncaught ReferenceError: $ is not defined

2015-06-23T01:16:00.004-07:00

"Uncaught ReferenceError: $ is not defined"

This is a typical newbie error, specially when starting an ASP.NET MVC project. What's really going on is that the browser can't find the jquery file. But since ASP.NET MVC automatically includes the javascript files as Script Bundles via the @Scripts.Render("~/bundles/"), we don't know why the jquery script file is not included even though it is present under References.

Script.Render method basically allows automatic minification (compression) of javascripts and the Visual Studio IDE automatically adds some default bundles and placeholders for an ASP.NET MVC project.It's all nice and good but the problem is that the way ASP.NET MVC project is initially created, it makes it look like the references have already been added. The other equally confusing thing is the place ASP.NET MVC adds those script references by default. Unlike an ASP.NET Webforms application, the actual names of the javascript files don't appear in the aspx or cshtml files. So, they can't be found in the _Layout.cshtml or any other MVC *html file that is around.

So, what do we do? We go to the BundleConfig.cs file in the App_Start folder. Over there there is a method (that has already been created by the ASP.NET MVC project) that contains all of the references to the actual javascript files.

The javascript registration code in BundleConfig.cs file will look something like this -

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));

Now the {version} part in the problematic part there. It doesn't seem to always work. Before I knew better, I thought it was a placeholder for us developers to fill in. But since the Visual Studio IDE doesn't give any indication how this can be fixed or even that something is wrong, a new developer trying to figure things out will never know what's going on.

But fear not, the fix is simple. Simply change the file name to the actual jquery file name. It's not the ideal solution but will work in a pinch -

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-2.8.2.js"));

And add the following to your _Layout.cshtml - @Scripts.Render("~/bundles/jquery")

And you are good to go! That's it. Now the script reference will show up in your browser as - src="/Scripts/jquery-2.8.2.js"

Another Victory! Now go have a beer!

MVC4 - How to Bind Dropdowns lists and retain selected values during postbacks

2015-06-20T07:34:00.000-07:00

I recently had a lot of trouble with dropdowns in MVC4. Either the dropdowns don't get populated, or they don't show the selected value, or they just don't postback the selected values. It's pretty straightforward to do these things in weakly typed Views but I wanted to make it all work with strongly typed Views because it results in a cleaner code in the long run.

So, without much ado, here is the code -

Your ViewModel (or Model depending on the architecture/approach) and helper classes look like the below -

//This class contains the keys, values and whatever other model related data that needs to be bound to the dropdown

public class DropDownItem {
public int DropDownKey  { get; set; }
public string DropDownValue  { get; set; }

//This class is an overly simplified ViewModel

public class DropDownTestViewModel
    {
public DropDownSelectedValue { get; set; } //This represents the actual selected value
public IList DropDownItemCollection  = new List(); //This represents the list of all options in the dropdown
}

//This is the simplified View code -

@Html.DropDownListFor(imf => Model.DropDownSelectedValue, new SelectList(Model.DropDownItemCollection.AsEnumerable(), "DropDownKey", "DropDownValye", Model.DropDownSelectedValue), " -- Please Select --", new { id = "ddl" + rowCount })

The code looks pretty straightforward but the way MVC4 is designed, it'll never work. The dropdownlist will neither show the selected value nor post it back. And it will not tell you what is wrong either!! :)

So, what is wrong here? After many iterations of writing and rewriting different variations of the code, I found that the problem is that the model items **MUST** be properties. So, to fix the above, we just need to add getters and setters as follows -

public IList DropDownItemCollection  = new List();

becomes this -

public IList DropDownItemCollection   { get; set; } //Initialize in constructor etc as needed

And hooray, the dropdown shows and posts back correct selected values and the world makes sense again. :)

WordPress themes installation stuck at Unpacking Error

2011-03-01T21:14:00.000-08:00

A lot of people get this strange error when wordpress seems to get stuck at the "Unpacking the package step. This can happen with both automated admin installations and manual FTP theme uploads. This is a very frustrating error because "unpacking" or unzipping the same theme files locally works just fine, it's just wordpress that doesn't seem to be able to handle them. This gets even more frustrating when we realize that wordpress is supposed to throw a timeout error after 30 seconds, but in this case it just freezes with no debugging messages whatsoever.

Anyways, the reason it happens for in only a few select cases is because of the memory limitation imposted by the host, and as you can see, all we need to do is to increase the total amount of memory available to fix this. Below are the steps to fix it -

Step 1: Connect to your wordpress FTP and drill down to wp-includes folder.
Step 2: Locate and open default-constants.php file in your favorite text editor.
Step 3: Look for the following term - WP_MEMORY_LIMIT (normally it's at line 23).
Step 4: Change define('WP_MEMORY_LIMIT', '32M'); to define('WP_MEMORY_LIMIT', '64M');

Please note that there will be more than one lines with the "define('WP_MEMORY_LIMIT',..." code and we're looking for the one that says 32M and not the one that already is set to 64M.

Please also note that these settings are no longer available in the wp-settings.php file that is located in the wordpress root folder - Earlier this settings file indeed contained this code but since the last upgade, wp-settings.php calls the function wp_initial_constants() and that function is now located in default-constants.php file. It is this function that updates the WP_MEMORY_LIMIT variable depending on whether the wordpress site is multisite (via is_multisite() function) and this is what we change in the default-constants.php -

Below are the before and after code snippets for your reference -

BEFORE:
function wp_initial_constants( ) {
global $blog_id;

// set memory limits
if ( !defined('WP_MEMORY_LIMIT') ) {
if( is_multisite() ) {
define('WP_MEMORY_LIMIT', '64M');
} else {
define('WP_MEMORY_LIMIT', '32M');
}
}

AFTER:
function wp_initial_constants( ) {
global $blog_id;

// set memory limits
if ( !defined('WP_MEMORY_LIMIT') ) {
if( is_multisite() ) {
define('WP_MEMORY_LIMIT', '64M');
} else {
define('WP_MEMORY_LIMIT', '64M');
}
}

Now, it should work but I've also noticed that at times I've to restart the webserver to get it going, this seems to be especially true when you've a windows (as opposed to linux) hosting running on IIS 7. Also, just to avoid confusion - some hosting companies (including godaddy) refer to it as restarting or recycling application pools, implying they restart that particular process running your website (so to say) and not the entire webserver. It frees up any clogs and is the same thing as far as this issue is concerned.

Hope this helps!

YUI Ajax Browser History Back Button Implementation

2010-03-10T11:37:00.000-08:00

I've been looking for some better solutions to the whole Ajax browser back button issue and I think I've found the ideal candidate - YUI. For those who don't know much of this problem, I'll do a little recap. If you already understand the problem, feel free to jump right to the YUI implementation.

Detailed theoretical explanation of the problem and solutions - basically, browser's back (and forward) button is meant to take the user to either the last page the user was on or the last location in the same page the user is currently at. Ajax updates though, just "change" a part of the page - in other words, they don't take the user to a new "location". Consequently, since the location is still the same (only a part of the page changed, but addressbar still has the same location) browser doesn't register it as a "change" and the back button is never updated. So effectively, browser's back button doesn't work for the Ajax updates. This is a big problem since more and more websites are using Ajax updates for streamlined user interaction and without a functional back button, things like navigation menus and wizards become unusable.

There is a nifty solution to this problem though - Since the browsers rely on the changes in location to make the back button functional, we can change the URL fragments and fool the browser into thinking that the page has changed. URL fragments are stuff that comes after "#" in the location and generally they represent internal links. So, by changing the URL fragments with each Ajax update, we can make the back button functional. But since the browsers see the changes in the URL fragments as internal links and not as Ajax updates, they still don't know exactly what changed! As far as the browsers are concerned, changes in URL fragments mean that the user just moved to a different part of the page but the contents of the page are exactly the same. Since they don't track what changed, they can't go back to what was before - meaning, clicking the back button doesn't take the user to the last state, it doesn't do anything. This means that we need to keep track of whenever the user clicks back and forward buttons. We can actually put the state information associated with the Ajax calls in the URL fragments and use it to update the page as back/forward buttons are clicked.

But there is another problem - browsers don't expose any events for back/forward button clicks! So we can't tell when the user is going back or going forward and all that we can do is to poll and assume that the user clicked back/forward based on the current URL fragment. Further, we can use an iframe to store any data because an iframe won't be affected by navigation. This is basically the approach that is used by the popular browser history management solutions. Below is my experience with some of them -

1) ASP.NET Ajax History - This is very easy to use and just requires setting the EnableHistory attribute of ScriptManager and implementing the Navigate event. The problem with this though is that ASP.NET posts the whole page back anyway (whole page is posted and received) - so if the viewstate is even moderately big, it can be very slow. This pretty much defeats part of the purpose of doing Ajax updates where we want to post only the essential data and receive only the updated parts of the page, to make it as quick as we can. This is also the problem with ASP.NET's whole Ajax management system.

2) Really Simple History (RSH) - I've used with ASP.NET Ajax history and as a sole history management solution....and it works.....more or less. The problem is that its somehow hard to get right at the very first attempt. As you'd see in the comments here, pretty much every one had problems trying to set it up. But that's not really a 'problem', per say. The problem is that it hasn't worked for me in some versions of Internet Explorer (IE) and as we all know, IE is the most popular browser out there. It could just be my implementation but the way I look at it - it's just a means to an end, if something else exists that can solve the same problem with less effort then just use that other thing.....

Which brings us to....

3) YUI Browser History Manager - I very recently tried to implement it and I was suprised that it "just worked" in the very first try and without any problems....or may be I've just got smarter...whatever the case may be, I've successfully used it for many of my projects now and would recommend it. Below is some information on how to implement it -

Implementing YUI Browser History Manager:

Step 1: Download the following javascript files and include them:
<script type="text/javascript" src="/jquery.min.js"></script> (jquery needed for YUI)
<script type="text/javascript" src="/yahoo-dom-event.js"></script>
<script type="text/javascript" src="/connection.js"></script>
<script type="text/javascript" src="/history.js"></script> (from YUI - http://developer.yahoo.com/yui/history/)

Step 2: Add the below code right after the body tag
<iframe id="yui-history-iframe" src="assets/blank.html" width="1px" height="1px">
</iframe>
<input id="yui-history-field" type="hidden" />
(Note: iframe is needed only for IE)

Step 3: Add the below code right before the end of the body tag (or wherever you put your javascript)
<script type="text/javascript">
var bookmarked = YAHOO.util.History.getBookmarkedState("state");
var init = bookmarked || query || "page1.aspx";
YAHOO.util.History.register("state", init, OnStateChanged);
try {
YAHOO.util.History.initialize("yui-history-field", "yui-history-iframe");
} catch (e) {
}
YAHOO.util.History.onReady(function () {});
</script>

Now, if all you care about are back/forward buttons for one set of Ajax calls, then you don't need to change anything in the above code. But if you also want page refreshes and bookmarking support, then some more code will go into the onReady method above (I'll be writing another post for bookmarking support).

Step 4: Add the below code to all your Ajax calls.

YAHOO.util.History.navigate("state", param);

Note the "param" argument above - this is where you store the state information that you'll be using when back/forward buttons are clicked. Below is a sample code:

//Ajax call that needs browser's back button to work
function AjaxShowAppleImage()
{
// Ajax code that shows an apple's image
$('#img1').attr('src', 'apple.jpg');
//YUI code
YAHOO.util.History.navigate("state", 'apple');
}
//Another ajax call that needs browser's back button to work
function AjaxShowOrangeImage()
{
// Ajax code that shows an apple's image
$('#img1').attr('src', 'orange.jpg');
//YUI code
YAHOO.util.History.navigate("state", 'orange');
}

Step 5: Implement a OnStateChanged function. This OnStateChanged is called whenever the back/forward buttons are clicked and you use the "state" parameter (from above) to update the page (in our example - show the correct fruit image). Below is a sample explanation -

function OnStateChanged(state)
{
if(state == 'apple')
$('#img1').attr('src', 'apple.jpg');
else if(state == 'orange')
$('#img1').attr('src', 'orange.jpg');
}

And that's all you need to do. Pretty simple, isn't it?

This ends this post. For those who would like to grab some working code as a starting point, you can take the below code. It has been tested on most popular browsers and works perfectly. It basically contains a couple of links that load the content from two pages (page1.aspx and page2.aspx). It assumes that both these pages have a div with the id as "content" and loads their content in a div with an id "loadedContent". Have fun ajaxing! :)

(UPDATE 06-07-2010: Fixed a minor bug related to missing comma in the YAHOO.util.History.register method after "init" in the below code - YAHOO.util.History.register("state", init, function(state)... - Thanks to Mike in the comments for pointing it out)

<iframe id="yui-history-iframe" src="assets/blank.html" width="1px" height="1px">
</iframe>
<input id="yui-history-field" type="hidden" />
<script type="text/javascript" src="/jquery.min.js"></script>
<script type="text/javascript" src="/yahoo-dom-event.js"></script>
<script type="text/javascript" src="/connection.js"></script>
<script type="text/javascript" src="/history.js"></script>
<form id="form1" runat="server">
<div>
<a href="page1.aspx" onclick="$('#loadedContent').load('page1.aspx #content');YAHOO.util.History.navigate('state', 'page1.aspx');return false;">
page1</a> <a href="page2.aspx" onclick="$('#loadedContent').load('page2.aspx #content');YAHOO.util.History.navigate('state','page2.aspx');return false;">
page2</a>
</div>
<div id="loadedContent">
</div>
</form>

<script type="text/javascript">
var bookmarked = YAHOO.util.History.getBookmarkedState("state");
var query = YAHOO.util.History.getQueryStringParameter("divs");
var init = bookmarked || query || "page1.aspx";
YAHOO.util.History.register("state", init, function(state) {$('#loadedContent').load(state + ' #content');});
try {
YAHOO.util.History.initialize("yui-history-field", "yui-history-iframe");
} catch (e) {
}
YAHOO.util.History.onReady(function () {});
</script>

Windows Vista resets user profile/account settings issue

2010-03-10T10:23:00.001-08:00

I've been having this strange problem - Windows Vista resets my profile (user account) to factory settings. This means all my installed programs, settings, desktop, documents simply disappear! The problem seems to happen seemingly randomly whenever I restart my system and I suspect that windows creates a backup of the user profile to install some updates or something and never restores that backed up profile. This means that the documents and settings are still there its just the registry settings, that store the profile information, have got messed up. Below is the solution in case any of you guys encounter this problem -

1. Go to your registry (Start -> Run -> regedit)

2. You will see a treeview on the left side. Expand the following nodes - HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\CurrentVersion\ProfileList

3. Under ProfileList you should see a list of keys with names like S-1-5-18 and S-1-5-21-516313125-3752655690-3918728212-1000 etc. These are the keys that contain your profile information. Below is a screenshot from my registry -

4. Look for a key that has ".bak" at the end of its name. This should be your original profile. Make sure that the ProfileImagePath on the right hand side is pointing to "C:\Users\[your computer name]". Below is a screenshot of how the whole thing looks on my system -

5. Look for another key with the same name but without ".bak" at the end of its name. This is a temporary profile, you'd notice that the ProfileImagePath on the right hand side is pointing to "C:\Users\TEMP.[your computer name]". Below is a screenshot of how the whole thing looks on my system -

6. Rename the temp key (from step 5) to ".bak1" or something and rename actual key (from step 4) to what the temp key was (i.e., remove the ".bak" part)

7. Restart and you should get all your documents/settings/programs back.

(Note: If the problem persists, then undo the changes and contact the system admin. Also, as a disclaimer, I don't represent Microsoft and my advice is as-is)

How to geocode and find distance between two addresses using ASP.NET

2010-03-03T12:15:00.001-08:00

Many websites these days allow the users to find location based points of interests. Examples would be a website that provides a list of schools in your zipcode or restaurants x miles from your address (or current location). Further, the user is allowed to sort or group the points of interests by proximity and so on. In this article, I'll provide step by step process of implementing geocoding and finding distances between two points on a map.

Now, as you see, there is no real way to calculate actual distances solely by zipcodes and addresses. We need to be able to figure out the coordinates (Latitudes and Longitudes) for those zipcodes and addresses. This process of finding Latitude/Longitude for a location is called geocoding. Once we have the Latitudes and Longitudes, we can use the Haversine formula to figure out the actual distance.

Step1: How to Geocode a Zipcode (convert a zipcode into latitude & longitude)

The easiest way to do it by simply getting this data from US census website - http://www.census.gov/geo/www/gazetteer/places2k.html . The file of interest is "ZCTAs (ZIP Code Tabulation Areas)". Below is a sample code that can parse this file:

TextReader tr = File.OpenText(@"C:\zcta5.txt");
while ((line = tr.ReadLine()) != null)
{
    string zip = line.Substring(2, 5);
    string latitude = line.Substring(136, 10);
    string longitude = line.Substring(146, 11);
    //Code to save this to database
}

Note: It would be faster to bulkload this file instead of parsing it line by line, the above code is just for reference.

Step2: How to geocode an address? This is important because we'd like to geocode the actual addresses provided by the user. For example, the user might provide his/her address looking for restaurants within 5 miles of the address. This is also necessary for any non-US zipcodes (or postal codes) or a list of addresses that you might be working with (for example, you might have a list of school's addresses and your website might let the users find schools within 50 miles of a zipcode).

To geocode such addresses we will use Google Maps API's geocoding service. This is basically a RESTful webservice that takes the address and other parameters and returns the Latitudes and Longitudes for the same. A sample uri would look like - http://maps.google.com/maps/geo?q=[your-address]&output=csv&key=[your-key]. You'll have to sign up at http://code.google.com/apis/maps/signup.html to obtain the "key" parameter. Once you have the key, you can run all your addresses through this and obtain the coordinates. Sample C# code is below:

foreach(var address in AddressList)
{
    Uri uri = new Uri("http://maps.google.com/maps/geo?q=" +       System.Web.HttpUtility.UrlEncode(address) + "&output=csv&key=[your key]");
    WebClient webClient = new WebClient();
    string[] geoCodedAddress = webClient.DownloadString(uri).Split(',');

    string latitude = geoCodedAddress[2];
    string longitude = geoCodedAddress[3];

    //Save the extracted coordinates
}
Note: If you are running a console application then System.Web won't seem to expose the HttpUtility class. The solution is to add a reference to System.Web.

Step 3: How to calculate distance between two coordinates (two sets of latitudes and longitudes)? Since earth is spherical (well not exactly), we use what is known as Haversine formula to calculate the distance. The reason being, the distance here is a curve along the surface of earth as opposed to being a straight line between two points. I won't go into the actual formula here though, below is the sample C# code that implements it:

public double GetDistance(Coordinate location1, Coordinate location2)
{
    double diffLat = Math.PI / 180 * Convert.ToDouble((location1.Latitude - location2.Latitude));
    double diffLon = Math.PI / 180 * Convert.ToDouble((location1.Longitude - location2.Longitude));
    return 3960 * 2 * Math.Asin(Math.Min(1, Math.Sqrt(
      Math.Sin(diffLat / 2) * Math.Sin(diffLat / 2) +
      Math.Cos(Math.PI / 180 * Convert.ToDouble(location1.Latitude)) *
      Math.Cos(Math.PI / 180 * Convert.ToDouble(location2.Latitude)) *
      Math.Sin(diffLon / 2) * Math.Sin(diffLon / 2))));
}
Note: Coordinate is just a struct with Latitude and Longitude as exposed properties. The conversions to double can be removed as well as needed.

In conclusion, we covered the extracting geocoded zipcodes from census database, geocoding any random addresses using google map's API and finally Haversine formula for calculating the actual distance between two geocoded locations (distance between Latitudes and Longitudes). This should allow us to find distance between any set of locations given the full or partial addresses or zipcodes.

SQL Server Management Studio not installed with Sql Server 2005 Installation

2009-01-28T09:56:00.001-08:00

I came across this problem when trying to install Sql Server Management Studio and other client tools. Basically, for many different reasons, Management Studio and other client tools will not install after you've installed SQL Server 2005 server components. The error that is thrown is below -

Name: Microsoft SQL Server 2005 Tools Express EditionReason: Your upgrade is blocked. For more information about upgrade support, see the "Version and Edition Upgrades" and "Hardware and Software Requirements" topics in SQL Server 2005 Setup Help or SQL Server 2005 Books Online.
Build version check:
Your upgrade is blocked because the existing component is a later version than the version you are trying to upgrade to. To modify an existing SQL Server component, go to Add or Remove Programs in Control Panel, select the component you would like to modify, and then click Change/Remove.

A screen shot of this problem is here:

The problem here is basically that SQL Server 2005 installer seems to think that a higher version or something of SQL Server is already installed on this machine and therefore blocks the current installation by disabling the checkbox that could've made all our lives much easier.

As the obvious rectification step, I tried to find that missing prior installation of SQL Server but as expected, it was nowhere to be found and also for some reason this problem can't always be rectified by reinstalling SQL Server. So, we can't uninstall the previous version that SQL Server installer thinks is already there and we are stuck. So what gives? It turns out that we can set SKUUPGRADE to 1 while installing from the command prompt - E:\>setup.exe SKUUPGRADE=1 - This enables that silly checkbox to allow installation (or upgradation) of the client components. Below is how this command prompt looks on my system for reference -

Once you run the installer with SKUUPGRADE ON, you should be able to see the option to install SQL Server Management Studio in the installer. Below is a screen shot that shows how it looks now (please ignore the Integration Service thing as that's disabled in the picture for an entirely different reason) -

Now when you click Next, you should see the below -

Now click "Install" button and install the client components! But why is it so, how would a normal user know that he needs to do it via command prompt with some flag, why isn't that flag available as some advanced installation option in UI itself and why doesn't the error message provide some info about this possible (and in many cases, only) solution? Well, I've to say that Microsoft and specifically whoever designed this Sql Server 2005 installed must be [...fill this one yourself...]

Fetching Page Titles using jquery Ajax - RSH page title implementation

2009-01-17T14:44:00.000-08:00

How to fetch Titles of HTML pages from URLs using jquery-ajax

There are many cases when we want to know the Titles of HTML pages without actually visiting them. One particular instance of this problem is when we are using RSH (Really Simple History). This is because with RSH and/or Ajax page navigation, the page never reloads and so browser never changes the title of the page either. In this case, we need to programmatically fetch the titles and update the current page title with the fetched one.

Unfortunately, there is no really clean way of fetching a page title through javascript other then fetching the whole page through Ajax and then parsing the HTML to extract the title. This is the technique that I'm going to elaborate on in this article.

Using jquery, the lines of code required is deceptively simple though! You can get the whole thing done, from fetching the HTML and updating the current title, in just about 2-3 lines of code! Below is how -

$.get('yourlink.com', function(data){
document.title = data.toString().substring(data.toString().indexOf("<title", 0) + 7, data.toString().indexOf("</title", 0));
});

Yes, that was it! I used jquery's $.get(link, callback) method that gets the contents of the link (passed as the first argument) through Ajax and then I just extracted the page title from the fetched HTML by javascript String.substring(indexStart, indexEnd) method. You'll also notice that the $.get()'s callback has the argument called "data" that contains the returned or fetched HTML for the provided link. It works fine performance wise as well as we are not really doing any resource intensive operations on the fetched HTML (like displaying it somewhere, for example)

Another thing I'd like to note is the use of String.substring() method. It's not the cleanest way of doing it and a more "correct" way is to use javascript regular expression as in the below example -

document.title = data.toString().match(/\<title\>(*)\<\/title/);

But the problem is that javascript has some limitations when it comes to regular expressions and the above code throws a invalid quantifier error. So, I decided to use the substring method in this case.

To find how to use RSH (Really Simple History) to solve Ajax back button problem, click - Implementing RSH (Really Simple History) for Ajax driven pages

To learn how to call webservices easily using jquery and JSON, click - Calling Webservices with jquery's Ajax and JSON without using ASP.NET's ScriptManager

The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>)

2009-01-15T10:08:00.000-08:00

The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>)

So recently, I got the above error while trying to inject some dynamic tags into the head section of an ASP.NET 2.0 master page. Turns out that it's not possible to write a code like Header.Controls.Add(yourControl); if you are using code blocks to refer to stylesheets and js files and such -

<link href="<%= ResolveUrl("~/css/style.css") %>" rel="stylesheet" type="text/css" media="screen" />

<script type="text/javascript" src="<%= ResolveUrl("~/js/json.js") %>"></script>
. etc

So what gives? The most obvious solution is to of course get rid of code blocks but that's not always possible and might break some references if the user lands at some subfolders etc in your website.

Next solution is to use databinding....i.e., replace "<%=" with "<%#" in the code blocks. So the above css and js references become the following -

<link href="<%# ResolveUrl("~/css/style.css") %>" rel="stylesheet" type="text/css" media="screen" />

<script type="text/javascript" src="<%# ResolveUrl("~/js/json.js") %>"></script>
. etc

Since we are basically using the data binding expression "<%#" now for the head tag, you need to call the DataBind method after replacing "<%=" with "<%#" . That's just one extra line of code in your page load method -

protected void Page_Load(object sender, EventArgs e)
{
.....
.....
Head1.DataBind();
}

And, that's all there is! Problem solved!

javascript error invalid quantifier in string.match regular expression

2009-01-14T19:12:00.000-08:00

Yesterday I was trying to write some little regular expression to extract the title of a page from it's html and got the below error -

invalid quantifier *)\<\/title

The actual code that generated this error was the following -

data.toString().match(/\<title\>(*)\<\/title/);

The code works just as expected and extracts the page titles but it seems javascript doesn't support back references or something and that results in the "invalid quantifier" error in both Firefox and Internet Explorer.

Anyhow, I replaced it with a substring (looking for <title and <\/title) and that works fine too. But if you know how to write a regular expression that does it without throwing this error, please share....

Could not load file or assembly System.Web.Extensions Version=1.0.61025.0 Culture neutral PublicKeyToken or one of its dependen

2009-01-06T11:48:00.001-08:00

So today I tried to download and compile one of my old ASP.NET projects on a new system and ran into a host of errors! First I thought someone had made changes and checked in buggy code but Vault showed no changes for a few weeks! Among others was the below error -

Could not load file or assembly 'System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=

31bf3856ad364e35' or one of its dependencies. The system cannot find the file specified. C:\Users\Owner\Documents\Visual Studio 2005\Websites\...\web.config

The culprit here is the System.Web.Extensions DLL from the old 1.x version (as the error message indicates). And the solution is to just download and install the Ajax extensions (ASP.net Ajax).

The fun part though is - why Ajax extensions are required at all? That project doesn't use any of the Ajax controls! So why do we need to install an additional library? I guess it's because of the ASP.net Menu control being used in the project. But anyways, the solution is simple so let's just implement and get over with it!

Ajax Extensions can be downloaded from - ASP.NET AJAX 1.0

Once you download, install and restart your system, this particular error should disappear.

In some other cases though (specially for ASP.net Ajax Extensions 3.5 library), the installation doesn't seem to register the DLLs in GAC (Global Assembly Cache). If that happens, just register the following files in GAC -

System.Web.Extensions.dll (this is that ASP.NET Ajax Extensions file)
System.Web.Extensions.Design.dll
Microsoft.Data.WebClient.dll
Microsoft.Data.Web.dll
Microsoft.Data.Web.Design.dll

Please note that some of these files might already be registered in GAC so it might help to look them up first. Also, as you might already know, when checking if the file exists in GAC, always look at the name AND the version of the assembly because in .NET, just the name doesn't uniquely identify an assembly or DLL (this is how we can have System.Web.Extensions.dll Version 1.x and System.Web.Extensions.dll Version 3.x in the same folder in GAC).

So that should take care of the "Could not load file or assembly 'System.Web.Extensions, " error for all versions of System.Web.Extensions.dll

Happy coding and a very wishing a very happy 2009 to you!

To learn how to manage history with Ajax without using ASP.NET ScriptManager, click - Ajax History back button with RSH (Really Simple History)

To see a performance comparison of UpdatePanels with RSH, click - ASP.NET Ajax UpdatePanel slow performance compared to jquery and RSH - When to use and not use UpdatePanels

To learn how to catch textbox change event without using ASP.NET Ajax, click - Textbox onchange event in javascript / client side

Handling textbox onchange event in javascript

2009-01-01T15:28:00.000-08:00

How to detect a change in textbox (or html input) on the clientside (javascript)? This is a common problem when we want to do something as soon as textbox (input box) change "event" is fired.

Different ways textboxes (input fields) can be changed

1) Textbox change event fired by keyboard,

2) Textbox change event raised because of copying into textbox via ctrl-c and ctrl-v (and mac equivalent)

3) Textbox change event raised by copying into textbox via context menu (right mouse click and then left mouse click)

4) Textbox change event fired by Autofill applications - this is often overlooked and difficult to control because the user could be using a variety of form filling applications out there including roboform, google's autofill, yahoo's autofill and so on.

5) Textbox change triggered by the history stored by the browser - This is browser specific (firefox, safari) but still tricky as user hasn't typed anything, he/she has just moved focus to the textbox (via mouse click, tabs etc) and selected the values present in history by either mouse click or pressing enter key!

Specific example: We have a textbox (input field) for zipcodes and as user finishes typing the zipcode we want to update city and state fields to show the city/state for the entered zipcode. This is useful for doing a dynamic real time validation as well so that we can tell the user that his zipcode is invalid as soon as he enters it.

Possible solutions

1) Textbox onblur event - This is very good and works most of the time. But it'll be fired even if you move your mouse over the textbox so if your textbox change event handling mechanism involves any graphical changes (making things visible/invisible etc) then it might be disruptive.

2) Textbox mouseout event - Works but not a complete solution as you need to handle keyboard and copy paste events too. Further, mouseout event is triggered when user clicks somewhere outside the textbox and not when he finishes typing! So, if your text change handler does things like updating another controls etc based on the new text in the textbox, then it won't work.

3) Textbox onchange event - By far the best if combined with some additional code to disable copying/pasting something in the textbox. The copying/pasting can be easily handled in windows by detecting and invalidating control key press. One example of the code would be -

function OnTextChange(obj, e)
{
var isCtrl = false;
if(window.event) {
key = e.keyCode;
isCtrl = window.event.ctrlKey
}
else if(e.which) {
key = e.which;
isCtrl = e.ctrlKey;
}
if(isCtrl)
return false;
}

Code presented above is not optimal and works only in windows but just to give some idea. Further, we still have the Autofill or Form filling applications or selecting the value from history (firefox) that can still change the textbox without triggering any event.

4) Some browser specific solutions - onpaste attribute for input boxes (textbox) in firefox and I believe some safari specific attributes are also present. Some autofill variety of attributes are also present that can stop the autofilling for the whole form.

5) In the context of ASP.net, one solution is to put the textbox in an updatepanel and catch the textbox's server side change event! But in my view UpdatePanels can get very slow in a variety of cases and severely disrupt the user experience and are recommended only if the scope is limited, user responsiveness is not a huge problem or you have a reason to believe that the they will perform consistently across all browsers and operating systems.

Most solutions work as a combinations of above and by limiting the ways the user can actually enter the data, might solve the problem of handling the onchange event. I personally think that limiting the ways user can enter the data again disrupts the experience by violating the principle of least surprise! A user who is used to copying/pasting the SSN, zipcode or address (or any difficult to type/remember field) might hit back if ctrl-v doesn't do anything ("form is broken"). Another user who relies on autofill / form-fillers a lot might again abandon the form midway. Allowing the user to freedom to use whatever tools he wants to use to complete the form will obviously result in better results.

Final Solution for detecting any type of change in textbox

So, as you can see the core issue is that there is no textbox change event built in the browsers! This is logically so too because browser has no way of knowing when the user has finished changing the textbox other then some out of focus or mouse out events but they don't help us if we want to handle the textbox change immediately after use has finished it.

This is more of a hack and not a very neat / clean solution but the good news is that it takes care of *all* scenarios in which the user can change a textbox! Keyboard, mouse, pasting, selecting from history, autofill - they will all be handled perfectly without compromising user's experience.

The basic premise is to check the textbox for any changes every 1-2 seconds and if any change is detected, trigger the onchange event handler. Sample code is below -

1. Include this code in your scripts section -

<script language="javascript" type="text/javascript">
checkLastTextBoxValue($("[id$=textBox]").val());
</script>

This will basically run the checkLastTextBoxValue function as soon as the page is loaded. "textBox" is the id of your textbox (or input field) control. I've added the $ sign to take care of the ASP.net's textbox control's client id issue.

2. A sample function definition would be as follows -

function checkLastTextBoxValue (oldValue)
{
if($("[id$=textBox]").val() != oldValue)
{
if(String($("[id$=textBox]").val()).length == 5) //This is for USA zips
{
zip = $("[id$=textBox]").val();
textBoxOnChangeEventHandler(zip);
}
}
setTimeout("checkLastTextBoxValue('" + $("[id$=textBox]").val() + "')", 1000);
}

This code has three things to be noted -

a. if($("[id$=textBox]").val() != oldValue) - we compare "old value" with the "current value" in the textbox to simulate "onchange" event for the textbox! Not elegant but crafty and wickedly accurate!

b. textBoxOnChangeEventHandler(zip); - we do what needs to be done after we have "detected" a change in the textbox here.

c. setTimeout("checkLastTextBoxValue('" + $("[id$=textBox]").val() + "')", 1000); - pretty much the core of this textbox change event handling mechanism, this basically sets up the checkLastTextBoxValue function to run after a second. This doesn't eat up or block CPU though as we are taking 1000 milliseconds worth of break (and it can be more depending on our requirement) between the calls.

So after much research and caffeine, I figured that this is the most robust and user-responsiveness-friendly solution for detecting textbox or input field changes.

Feel free to comment.

ASP.net UpdatePanel Slow Performance compared to jquery Ajax

2008-12-30T10:36:00.000-08:00

I guess this won't come as a surprise for most of us veterans who have been using UpdatePanels for a little bit. For those who don't know what UpdatePanels are or do, a quick intro - UpdatePanel is a control shipped with ASP.NET Ajax that Ajaxifies server side calls from any controls that are put inside it. You can set the EnableHistory attribute in ScriptManager to true and you get the built in history (Ajax back button problem) as well! It's all out of the box and can save quite a bit of development time only but it's slow as sh-t!

Let's look at a "case study" (that was my own project) -

Problem: Implement a "wizard" like functionality where the user steps through a number of questions presented one at a time.

Catch: Save answers to each question to the database as the user moves to the next question.

Bigger Catch: There must not be any page refreshes as user moves from one question to the next.

Insanely big Catch: Hitting browser's back button should take user to the previous question!

Two Ajax & Browser history solutions:

- ASP.NET Ajax's UpdatePanel with ScriptManager's EnableHistory set to True - UpdatePanel takes care of Ajax and EnableHistory attribute takes care of browser's back button.

- jquery ajax calls to a webservice with RSH (Really Simple History) - basically saving the answers (to the questions in wizard) via asynchronous jquery Ajax calls to some webservice. This takes care of stepping through the wizard and saving data without page refresh problems. Browser's history (back button) problem is solved by using RSH (Really Simple History) library.

Comparison of UpdatePanl ajax and jquery's ajax -

Performance comparison of UpdatePanel and jquery ajax: UpdatePanels suffer from some huge performance problems and can be ridiculously slow. As you see in the screenshot, 13 requests (yeah not a good number!) required 2MB. These requests are made by controls like DropDownLists, RadioButtons and Buttons, all wrapped in an UpdatePanel.

RSH and jquery ajax implementation, on the other hand, is much faster! As you see in the screenshot, we got away with only 103Kb of data with 20 jquery ajax calls! Compared to UpdatePanel, this is like a 300x improvement!

The primary reason is that UpdatePanel posts back too much data but with jquery ajax calls, you send *only* the data you need to, to the server. Further, UpdatePanels try to recreate the whole control tree (Page) before sending it back in the response but with the jquery ajax thing you are in charge and you just need to hide the current question and show the next one (which would obviously be faster)!

Safari problems with UpdatePanel: As expected, UpdatePanels run even more slow in Safari and as expected (again) jquery ajax calls take about the same time. The below screenshots will help it visualize more clearly

UpdatePanel performance in Safari -

jquery ajax performance in Safari

As you can see, the performance gains in Safari are rather huge!

Problems with URL fragments usage by UpdatePanels and RSH: This is again very important if your website has multiple tools / functionalities that rely on URL fragments. UpdatePanels don't play with any other tool / functionality that uses URL fragments. Yes, since UpdatePanels store their "history" in the URL fragments, if something else is also using URL fragments then ScriptManager's Navigate event (triggered by browser's back button) will not find it's "history". This can be resolved though by putting in some checks to ensure that the current URL fragment is the one to be used by the UpdatePanel. Switching to RSH for all history management resolves this issue perfectly.

Development times comparison: Surprisingly, UpdatePanel ajax implementation doesn't save too much time over the jquery ajax implementation. If jquery were to be absent, then yeah UpdatePanel would generate quite a bit of code for us even for regular asynchronous web service calls. You won't be churning out 500 lines of jquery code for every line of UpdatePanel code! With jquery's ajax method, the amount of code written is pretty much the same (if not less)!

Development technologies comparison: This is one of the key factors. With UpdatePanel you can write the code (saving data, moving to next question etc) in a server side language (C#, VB.NET etc) but with jquery ajax you are stuck with a client side language (javascript / jquery). The server side languages generally have better debugging tools and better built in features to allow better implementation from design, maintenance and coding efficiency point of view. But it can very well be a personal thing.

Verdict: jquery ajax calls with RSH prove to be a better option if speed and versatility (across different browsers and OS etc) is a major concern. UpdatePanels might work better if the technological expertise and macro design details is a more important.

To learn how to use RSH, click - RSH (Really Simple History) for Ajax back button problem

To learn how to use jquery ajax, click - jquery ajax calls to webservices

How to call a web service from jquery passing json data

2008-12-29T18:32:00.000-08:00

Ok, so today I was finally able to rewrite all the asynchronous webservice calls with jquery using JSON for passing data from JQuery to Webservice (or is it Web service?) and getting result back from Webservice to jquery. For those who don't know whats going on, here's a little background info - As I noted in my previous posts, RSH (Really Simple History) uses JSON quite a bit and JSON doesn't seem to play well with Microsoft ASP.NET Ajax's (or Ajax.net if you prefer) ScriptManager control and I was using ScriptManager control to access my webservices from javascript (JQuery). Today, I finally figured out the best (or atleast easiest) way of calling webservice methods from jquery and using JSON for passing data (webservice's webmethod's arguments) to the webservice and getting the result back to jquery (result of the webmethod's call, yeah i'm verbose!).

And as you'd expect, it made a hell lot of difference in performance! Now when I compare the approach of using a Webservice via a ScriptManager with this approach of calling the Webmethod directly via jquery, the performance improvement in the webservice calls are ridiculous! This is to be expected though as ASP.NET's Ajax ScriptManager generates a slew of helper client side scripts that totally bog the system down...err..ok not totally but the Webservice calls through ScriptManager do seem to add some kilobytes (can be over 100kb too) of extra code. Obviously, the jquery webservice calls implementation comes with it's own overhead too but I personally think that the jquery's overhead are not really deal breaker if you plan to write some little jquery helper functions yourself for making webservice calls. Besides the little fact that since the direct jquery with json webservice calls thingy doesn't require a ScriptManager, you can do it in any language - asp.net, php, ruby, c, assembly....err not assembly I guess...but you get the picture!

Anyhow, enough of my babbling, lets get on to the good stuff...some sample code to show how to go about calling a webservice from jquery (clientside, javascript whatever) via a ScriptManager (ASP.net ajax) and directly from jquery (again clientside, javascript whatever) using json -

How to call a Webservice from jquery using ScriptManager -

1. Import using System.Web.Script namespace and add ScriptService attribute to your webservice class. For example -

using System.Web.Script;
[ScriptService]
public class OurPotentiallySlowWebService: System.Web.Services.WebService

2. Add WebMethod and ScriptMethod attributes to your web-methods that need to be called from javascript/jquery/clientside/mars....ok not mars. Example -

[WebMethod, ScriptMethod]
public string SaveThisDataComingFromJQuery(string data1, data2)

3. Add the following ScriptManager tag at the top of your form

<asp:ScriptManager runat="server" EnablePageMethods="true" ID="BlahScriptManager"
EnableHistory="true" EnablePartialRendering="true" EnableStateHash="false" OnNavigate="BlahScriptManager_Navigate">
<Services>
<asp:ServiceReference Path="~/OurPotentiallySlowWebService.asmx" />
</Services>
</asp:ScriptManager>

4. Call the SaveThisDataComingFromJQuery method from your javascript -

var finallyIGotResult = OurPotentiallySlowWebService.SaveThisDataComingFromJQuery ("datavalue1", "datavalue2");

Yes, that was it! ASP.NET Ajax ScriptManager has simplified the seemingly complex webservice call to ridiculous levels! But as I said, it came at a great cost of many extra kilobytes that might potentially slow your webpage down giving your visitor to hit back button and find some faster and more response website than yours! But fear not, you can do whatever that faster website did to become faster and stay in the game, read on....

How to call Webservices from jquery and use JSON to pass data back and forth -

(First 2 steps will remain the same as above but I've reproduced them below too just in case you knew the folly of ASP.net's ScriptManager and skipped the above section)

1. Import using System.Web.Script namespace and add ScriptService attribute to your webservice class. For example -

using System.Web.Script;
[ScriptService]
public class OurFastestWebService: System.Web.Services.WebService

2. Add WebMethod and ScriptMethod attributes to your web-methods that need to be called from javascript/jquery/clientside/mars....ok not mars. Example -

[WebMethod, ScriptMethod]
public string SaveThisDataComingFromJQuery(string data1, data2)

3. Here the fun starts, you call the webmethod with the $.ajax method that totally rocks! Example -

$.ajax({
type: "POST",
url: "OurFastestWebService.asmx/SaveThisDataComingFromJQuery",
data: "{'data1':'datavalue1','data2':'datavalue1'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) { var iGotResultAndPageisFaster = msg.d; }
error: function(err) { alert('you don't deserve to write code'); }
});

Holy sh-t! What's that "thing" above! Fear not, the good news is that the bolded part on the right of colons is the only stuff you will change most of the time, still I take this piece of code apart below -

$.ajax({ -> This is the name of the jquery method. The little "{" at the end just means that we are sending the parameters / arguments to $.ajax in JSON format. JSON format is basically - {field1:value1, field2:value2}. JSON is a beauty in itself and I might write about it's advance usage later on but I hope you got the basic idea here.

data -> This is just the list of arguments and their values. Thing to keep in mind is that the the argument names here must match with the argument names used in the WebMethod. As you can see, I've used 'data1' and 'data2' both here and in SaveThisDataComingFromJQuery WebMethod.

Rest of the options are kinda self explanatory and won't change so I won't comment on them and seriously you should just make it work and go hit some clubs or something...but if you are married then you may visit http://docs.jquery.com/Ajax/jQuery.ajax#toptions for a fuller list of options.

Yeah, it was *that* easy! So you see that, even if the ASP.net Ajax ScriptManager does help add some code on our behalf the webservice call easier but the difference is not *that* big even with Ajax. And if you add a helper method then even that little difference is eliminated.

How to write a helper method for making $.Ajax calls to webservice -

function iWannaCallMyFastestWebService(datavalue1, datavalue2)
{
$.ajax({
type: "POST",
url: "OurFastestWebService.asmx/SaveThisDataComingFromJQuery",
data: "{'data1':'datavalue1','data2':'datavalue1'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) { var iGotResultAndPageisFaster = msg.d; }
error: function(err) { alert('you don't deserve to write code'); }
});
}

Now you can call this method everywhere and bingo, you've just eliminated the need (and overhead) of ScriptManager, ASP.net Ajax, Ajax.net, Microsoft, Global Warming, completely.....ok not Global Warming but you got the point. Now let's compare the two method calls -

function iFunWithFastestWebservice()
{
iWannaCallMyFastestWebService("yoyo1", "yoyo2");
OurPotentiallySlowWebService.SaveThisDataComingFromJQuery ("datavalue1", "datavalue2");
}

Holy christ! It looks as if our jquery approach even saves some precious space for web service calls! So, now you the truth! Let the force be on your side, happy coding!

Sys.Res is undefined Sys.Net is undefined Sys.Application is undefined error ajax json

2008-12-24T09:21:00.000-08:00

So, switching to RSH (Really Simple History) for Ajax history back button management I, all of a sudden, started getting the below errors -

Sys.Res is undefined
/ScriptResource.axd?d=pAszYI1Gb4SpsTh8sMT0W6wF1gtmVrXttUVRBvK-ueW1CPqT8yfJ7elHbLz7SUAEaufrYfuec4EOs8rqAu5Babg0xkVae2w4D2gBh1dvVuE1&t=ffffffffa3435222
Line 2798
[Break on this error] if (typeof(val) !== 'number' || ...dOperation(Sys.Res.enumValueNotInteger);

Sys.Net is undefined
[Break on this error] BlahService.registerClass('BlahService',Sys.Net.WebServiceProxy);

Sys.Application is undefined
[Break on this error] Sys.Application.initialize();

Sys.Net is undefined
[Break on this error] BlahService.registerClass('BlahService',Sys.Net.WebServiceProxy);
jsdebug (line 61)
[Exception... "Component is not available" nsresult: "0x80040111 (NS_ERROR_NOT_AVAILABLE)" location: "JS frame :: file:///C:/Program%20Files/Mozilla%20Firefox/components/nsSessionStore.js :: sss_saveState :: line 1908" data: no]
[Break on this error] this._writeFile(this._sessionFile, oState.toSource());

As you can see in the screenshot above as well, these errors are getting generated from inside ajax.net stuff and that's pretty much the most horrible source of errors/bugs thing that you can get! What I mean to say is that if the source of the error is some code written by some human, then it can be debugged and fixed but if the error is originating from some place like ScriptResource.axd?d=pAszYI1Gb4SpsTh8sMT0W6wF1gtmVrXttUVRBvK-ueW1CPqT8yfJ7elHbLz7SUAEaufrYfuec4EOs8rqAu5Babg0xkVae2w4D2gBh1dvVuE1&t=ffffffffa3435222 then there's squat you can do to fix it! And even more so when one of the errors seems to say Sys.Application.initialize(); then you know that you are doomed!

Anyhow, after lots of caffeine, anguish and praying finally the Lord Google revealed the answer - Turns out that Microsoft's Ajax.net is not compatible with JSON (JSON being used by RSH - Really Simple History plugin)! Go figure! Some little proof-of-concept showed that yes if I get rid of the ScriptManager control (that ships with Microsoft's Ajax.net) toolkit then all those errors will disappear.

<asp:ScriptManager runat="server" EnablePageMethods="true" ID="BlahScriptManager"
EnableHistory="true" EnablePartialRendering="true" EnableStateHash="false" OnNavigate="BlahScriptManager_Navigate">
<Services>
<asp:ServiceReference Path="~/DynamicUpdater.asmx" />
</Services>
</asp:ScriptManager>

So we are talking about either getting rid of JSON or getting rid of ScriptManager control (or both for that matter!) as possible solutions. RSH (Really Simple History) unfortunately relies on JSON and all of my asynchronous ajax (web service) calls rely on using ScriptManager with EnablePageMethods set to true (with the webservices referenced in the Services as you can see in the above code). Both RSH and the asynchronous calls (Webservice through the ScriptManager) are integral for the system but since Microsoft ajax.net won't play with JSON, I'm scr-wed. But I guess we are all here to do what we are all here to do and I'll be implementing all the asynchronous webservice calls with regular XMLHttpRequest and I'm guessing that it might even give some little performance boost given Microsoft Ajax's ScriptManager control is rather heavy duty stuff.

Update: Dec 29 2008: I successfully implemented the aforementioned functionality, it turned out to be a much better option than using ScriptManager/ASP.net/Ajax and it didn't require a lot of extra code either. Read more here - Calling Webservices from jquery using JSON

How to implement RSH (Really Simple History) for Ajax History Back Button

2008-12-19T19:10:00.000-08:00

UPDATE (Mar 2010): I've been looking for more easy to implement browser history management solutions and I think that YUI is a better candidate than RSH in terms of the ease of implementation. Here is my new post on overview of history management solutions and a sample YUI implementation - Implementing YUI Browser History Manager

How to use RSH Really Simple History - perhaps one of the best solutions to the Ajax history back button problem. For those who don't know about the ajax browser history and back button problem - browser's back button doesn't work for Ajax asynchronous calls because Ajax results in partial rendering of pages and therefore browser history is not recorded/saved for all Ajax asynchronous calls. Why - again because all Ajax calls result in partial web-page rendering and for browser history to work (for browser to know when to save the current state in history), a full page refresh has to happen. Browser's are just built that way and we can't really control the history management right out of the box. Another problem is that browser's don't have any events for back and forward buttons. So even if we use something like URL Fragments to get the browser's back button to work for Ajax applications, still we wouldn't know if the user is going back or forward without any system that knows how to store the browser history in a stack and pop it when user hits browser's back button (specifically for ajax ofcourse).

After looking at Gmail, Facebook and Orkut, I figured that a good Ajax browser history back button solution will use iframes and URL fragments in some way. Yeah, Gmail, Facebook and Orkut have flawless ajax history (back button) management. Yeah, gmail has the most awesome ajax back button solution in place. Kudos google coders and designers! Facebook is also not lagging behind, you can see the URL fragments in Facebook's URL but it doesn't always seem to work properly (some times the page redirects!). Orkut too, is using some solution that relies on URL fragments and possibly iFrames. So looking at the ajax browser history (back button) managements in these social networking sites, I got some idea about what I'm looking for and found this thing called RSH (Really Simple History) that seems like the perfect solution (so far).

RSH (Really Simple History) uses iFrames (and more for that matter!) to maintain the stack of browser's history. RSH (Really Simple History) also uses URL fragments to store the browser history. Why - because remember that for an ajax asynchronous call browser doesn't even "activate" the back button. This URL fragments technique used by RSH (Really Simple History) is a hack to "activate" the back button because remember that the browser's back button works for all URL fragment clicks. So, by updating the URL fragments Really Simple History (or RSH) create a "state" in browser's history. Yeah, Really Simple History is using iFrames to actually store the browser history stack for ajax calls and it's using URL fragments to make the browser's back button work for each of those ajax calls (tricking the browser into thinking that user navigated to some link! Neat RSH trick!).

Ok, enough with the talk, lets get back to how to implement RSH or Really Simple History. (Yes, that's kinda the main point of the blog because very few sites explain how to use or how to implement Really Simple History (RSH). Please remember that the code samples I provide below come from ASP.NET development environment but being Javascript/JQuery (clientside code basically) there's not much difference.

1: Download JQuery and include in your web page (skip if already using them). JQuery can be downloaded from JQuery Download for RSH (Really Simple History) and JQuery version (1.2.6 in the code below) will change as per the latest JQuery version you download.

<script type="text/javascript" src="<%= ResolveUrl("~/js/jquery-1.2.6.min.js") %>"></script>

2: Download RSH (Really Simple History) library from http://code.google.com/p/reallysimplehistory/downloads/list and include the the minified JQuery and JSON files (again the version numbers will change as per your latest RSH and JSON versions download).

<script type="text/javascript" src="<%= ResolveUrl("~/js/json2007.js") %>"></script>

<script type="text/javascript" src="<%= ResolveUrl("~/js/rsh.compressed.js") %>"></script>

(JSON2007.js and JSON2005.js were included in the Really Simple History package so I didn't have to download JSON separately).

3: FTP or Upload blank.html (that is there in RSH package) to your website where you want to use Really Simple History. This is important because Really Simple History uses the blank.html file to store the browser history stack (as an iframe in your main web page).

4: Create a method that handles any changes in history events. Please remember from earlier in this article that browsers don't have any events for back and forward buttons so we can't handle them (the back button navigation specifically). Now, Really Simple History can handle back (and forward) button on your behalf and all you need to do is to provide a function that takes a stored history state (that you store a bit later in this article) and decides what to do. If this doesn't make a lot of sense, hang on and just look at the sample code for that method below. I'll explain it in more detail in a little bit.

function historyChange(newLocation, historyData)
{

ShowOldContent(newLocation, historyData);

// OR to simplify

alert('hey I'm going back to ' + newLocation);

}

5: Execute the dhtmlHistory.initialize and dhtmlHistory.addListener methods to your onload function to initialize Really Simple History and create the appropriate listeners respectively. Sample code follows and please take a look at the comments for more clarification -

window.onload = function() {
//Simply initializes the dhtmlHistory object. No change needed.
dhtmlHistory.initialize();

//Adds a listener for browser's back/forward navigation. Just change "historyChange" to
// your method of choice. Note that "historyChange" comes from step 4 above.
dhtmlHistory.addListener(historyChange);

//This adds a starting point to the whole browser history thingy. Not really optional though.
dhtmlHistory.add('default.aspx','link');

};

Please note that whatever you put in dhtmlHistory.add() function, as the first argument, will show up as a URL fragment in your webpage. So if your webpage is http://www.mywebpage.com/ then it will become http://www.mywebpage.com/#default.aspx if default.aspx was your first argument to dhtmlHistory.add() function.

6: Call dhtmlHistory.add() function wherever you want to store the browser history for ajax calls! For example, in your buttons that do some ajax calls, you can call it in the onclick() method. What the dhtmlHistory.add() function will do is to call your historyChange() method in turn and execute your history management code.

So, the final sample code looks like -

<script type="text/javascript" src="<%= ResolveUrl("~/js/json2007.js") %>"></script>
<script type="text/javascript" src="<%= ResolveUrl("~/js/jquery-1.2.6.min.js") %>"></script>
<script type="text/javascript" src="<%= ResolveUrl("~/js/rsh.compressed.js") %>"></script>

<script type="text/javascript" language="javascript">
window.onload = function() {
dhtmlHistory.initialize();
dhtmlHistory.addListener(historyChange);
dhtmlHistory.add('default.aspx','link');
};

function historyChange(newLocation, historyData)
{
ShowOldContent(newLocation, historyData);
// OR to simplify
alert('hey I'm going back to ' + newLocation);
}
</script>

Yes! You are done! It's as simple as that!

Sample Implementation: Now let's go over a sample implementation because so far it was all pretty much up in the air and you might not be sure about what to put in historyChange() method and what to pass as arguments in dhtmlHistory.add() method and so on. So, I'll present two sample implementations of RSH (Really Simple History) . One is a a wizard like problem and the other is navigating using links in a fancy ajax way. This is what I had to do myself in various different projects.

How to use RSH (Really Simple History) to implement (anchor tags) navigation - This is a common problem in which the user clicks a link (anchor tag) and the whole page goes back for a second as new page is loaded. This interferes with the user's overall experience and might even drive him away the more impatient ones. No need to say that a seamless link (anchors) navigation can help most e-commerce websites considerably. This was always considered a necessary evil though but with RSH (Really Simple History) has come to our rescue and here I present one easy solution to integrate Ajax with page navigation -

1: Attach dhtmlHistory.Add() to all anchor tags's onclick() event handlers
2: Call $('#').load() in your historyChange() function

And you are done! Yeah, that was it! I'll be writing in more details about it though as I think it's a rather big topic in itself if presented with all the required code etc.

How to use RSH (Really Simple History) to implement Ajax driven wizards - Let's say we have a drop down (select) as step 1 and 2 radio buttons in our body tag -

<h1>Ajax driven Wizard</h1>
<div id="divStep1">
<asp:DropDownList ID="ddlStep1" runat="server">
<asp:ListItem Value="">Please Select</asp:ListItem>
<asp:ListItem Value="itep1">item1</asp:ListItem>
<asp:ListItem Value="itep2">item2</asp:ListItem>
</asp:DropDownList>
</div>

<div id="divStep1">
<asp:RadioButton runat="server" groupName="rbStep2a" ID="rbStep2" />
<asp:RadioButton runat="server" groupName="rbStep2b" ID="rbStep2" />
</div>

We attach the javascript event handlers to above as follows (one of the many ways of attaching event handlers) -

protected void Page_Load(object sender, EventArgs e)
{
ddlStep1.Attributes["onchange"] = "moveNext('step2')";
rbStep2a.Attributes["onclick"] = moveNext('step1')";
}

"moveNext" is just some method here that shows the "next" step of the wizard and and saves the data to database so that you can keep track of the intermediate steps of a wizard in case user leaves in the middle

function moveNext(nextStep)
{
if(nextStep == 'step2')
{
$("#divStep2").show();
$("#divStep1").hide()
}
else if(nextStep == 'step1')
{
$("#divStep1").show();
$("#divStep2").hide()
}
dhtmlHistory.add(nextStep,'WizardStep');
saveToDatabase(nextStep);
}

Yes, the above code will create a cyclic not-so-much-of-a-wizard! Please give special attention to the bolded line. This line actually adds the "next step" to browser history and as soon as it's executed you will see # as a URL Fragment. Yeah, that's RSH at work right there.

Using above as a reference, we can write historyChange method as below. This implementation too just shows the "next" div and looks a lot like moveNext() method above but it can change to do anything as per your requirements.

function historyChange(newLocation, historyData)
{
if(newLocation == 'step2')
{
$("#divStep2").show();
$("#divStep1").hide()
}
else if(newLocation == 'step1')
{
$("#divStep1").show();
$("#divStep2").hide()
}
}

Please note that I haven't use the historyData object at all in the above example because I simply didn't need to store anything else. But if I need to store something then yes, we can put anything we want in the historyData object. So, thats how we can use RSH (Really Simple History) for an Ajax driven wizard that allows the user to use back button to go back to the last question (and saves the data to the database as a bonus) with refreshing the page!

name.replace is not a function - jquery bug

2008-12-15T14:21:00.001-08:00

While trying to implement RSH (Really Simple History, check out my how to implement RSH - Really Simple History and solve ajax history back button problem article for details), I got this dreaded "name.replace is not a function" error! It really drove me nuts as many seem to have got it reported it to the jquery team but for whatever reason jquery bugtracker has almost always marked it as resolved or moved to subcategories. That might all be right but the problem is that this error is still there and seems to emerge right from the jquery core file! I mean it's alright that jquery team has found it to be an invalid bug or resolved issue or relating strictly to jquery plugins (instead of jquery core) but when I see "name.replace is not a function" popping up in my webpage I have to do something to fix it, lol! And I can't do squat because on tracing back, I realize that "name.replace is not a function" is originating from the jquery core file!

So what to do? I personally did the following -

1) Do whatever needs to be done and make sure that the desired functionality is still maintained. That is, isolate the error producing code such that your functionality is not impacted by the error.

2a) Either change the browser settings to not show the error if you have less than 10 users who can't really tell a browser from a pumpkin pie.

2b) If you have some user base and most importantly if it's an internet application then do this thing that is both next best and next worst to the above approach! ;) Yeah, trap the silly "name.replace is not a function" error in a try catch block. This is bad because you've just hidden some error beyond redemption but the thing is that if you've done step 1 correctly then it doesn't matter all that much. So I just went ahead and did it. Below are steps to how to do it -

a) Search for name=name.replace in jquery-1.2.6.min.js file (or the not-minified version and your version number replaces 1.2.6 obviously).

b) Ignore the name=name.replace that has ""float";" before "name=name.replace" part. Yeah, there are two of the name=name.replace thingees.

c) add a try block before name and close it with a catch block just before the immediate "if" statement.

So initially it was like this -

opacity=([^)]*)/)[1])/100)+'':"";}name=name.replace(/-([a-z])/ig,function(all,letter){return letter.toUpperCase();});if(set)elem[name]

And after our little change, it looks like -

opacity=([^)]*)/)[1])/100)+'':"";}try{name=name.replace(/-([a-z])/ig,function(all,letter){return letter.toUpperCase();});}catch(e){}if(set)elem[name]

Bingo! The stupid name.replace has finally decided to be a function now! The error is gone and if you've been struggling to "somehow" make it work before you can hit the clubs tonight then you are free to do so! Yeah, do it before some new yet unknown error pops out!

Browser History Back Button - History/Remote Plugin

2008-12-15T13:58:00.000-08:00

This particular solution applies to the cases when we want to stop any visible page refreshes as the user browses through the website. What we are trying to do basically is to load a new page as the user clicks on a link (navigates via a link) without refreshing the browser - That is, loading the part of the new page in our current page via Ajax by partially rendering the new content in the current page. But because of partial rendering of the page (the fact that the page is never refreshed), the back button gets lost. This plugin solves the back button browser history problem for this scenario using URL fragments.

Step 1: Download the latest jquery library from http://jquery.com/and include it in your project as follows -

<script type="text/javascript" src="<%= ResolveUrl("~/js/jquery-1.2.6.min.js") %>"></script> (Please remember that this is just an example and the method/filenames etc will change depending on the names used in your web-development language / platform and jquery version etc.

Step 2: Download history/remote plugin js files from http://stilbuero.de/jquery/history/ (this is the website of Mr. Klaus Hartl, the gentleman who came up with this solution) and include it in your project as follows -

<script type="text/javascript" src="<%= ResolveUrl("~/js/jquery.history_remote.js") %>"></script>

Step 3: Add a class named "seolink" to all your links (anchor tags) that needs history management. Please note that this class doesn't exist in your css file and doesn't have any display attributes, it's solely for the purpose of history management.

Step 4: Add the below code (jquery script) in the head tag of the webpage (or the master template if you are using asp.net masterpages) -

$(document).ready(function() {
createSeoLinks($("#navigation a").add("a.seolink"));
$.ajaxHistory.initialize(function (){$("#main-content").load(location.href " #main-content > *")});
});

function createSeoLinks(links) {
links.unbind('click').remote('#main-content', function() {
window.createSeoLinks($("#main-content a.seolink"));
});
}

Step 5 (optional): Ensure that all the links (anchor tags) have title attributes properly set

Step 6 (optional): Add the below code to the $(document).ready(function() section -

document.title = convertLinkToTitle(window.location);

If you don't know what Step 6 means, the final code in Step 4 will look like this -

$(document).ready(function() {
createSeoLinks($("#navigation a").add("a.seolink"));
$.ajaxHistory.initialize(function (){$("#main-content").load(location.href " #main-content > *")});
});

function createSeoLinks(links) {
links.unbind('click').remote('#main-content', function() {
window.createSeoLinks($("#main-content a.seolink"));
document.title = convertLinkToTitle(window.location);
});
}

And you are done! Yes, it was that easy!

Now, let explain a few things in the above code -

1) main-content : Refers to the div that contains the content that you want to load whenever a link is clicked. Remember that only the contents of main-content div will change as the user navigates through the website, so you will need to organize your content so that the static elements are kept out of main-content div. It doesn't matter a hell lot though but this organization is a good idea in general.

2) What is in addressbar - Remember that, since the page i snever refreshed, the only thing in addressbar that will change is the url fragment. This is picked from the title of anchor tags and that's why Step 5 is needed. It's not an essential component of the history management process though and if you leave it out then it will be "#remote" followed by some number - (like #remote25 for 25th anchor tag etc)

3) convertLinkToTitle - Again since the page is never refreshed, the page title never really changes. So, I figured that I should update the page title programmatically using the information in the browser's addressbar. So this is a javascript / jquery function that will take the link (in the browser's addressbar) and figure out what the title should be, you will be writing the code yourself depending on what you want in url fragment (or the url itself) and how to translate it into page titles. The way, I wrote it is below -

function convertLinkToTitle(linkStr)
{
var title = new String();
title = String(linkStr);
title = title.substr(title.indexOf('#', 0) 1);
title = title.replace(/_/g, ' ');
return title;
}

So this is how you implement the History/Remote Plugin.....feel free to suggest improvements, ask questions or comment on the code....And click - to read about another (and in my opinion) better Ajax Browser History Back Button solution called RSH (Really Simple History)