jQuery Failed Me?

by Jon Davis 10. December 2008 19:52

I had a painful and uncomfortable epiphany today, one that should not go unnoticed. In building up a form consisting of about 30 fields, I processed all of the "submitted values restoration databinding"--that is, re-populating the fields' values after submitting the form because the form failed validation--in script, using jQuery, like so:

(Yes, this is VBScript in ASP Classic:)

	<% For Each field In MyDictionary %>
	$("#<%=field%>").val("<%=Request(field)%>");<%
	Next %>
	

This was a really simple notion, to data-bind all my fields with just three lines of code. And it worked. It worked great. Except for one problem.

With thirty fields, plus code to add highlighting and such, it took jQuery, in IE7 (yes that monstrous piece of doo-doo, Internet Explorer) the browser kept locking up for five seconds every time the page was refreshed (that is, every time the form was posted locally with invalid field values), while it waited for jQuery to find each of these fields and populate their values. Now, I'm sure I could go back and do some optimizations; for example, I could have done the loop in reverse and limited my jQuery selector to a single search, something like:

	var fieldMap = {};
	<% For Each field In MyDictionary %>
	fieldMap["<%=field%>"]="<%=Request(field)%>";<%
	Next %>
	$("input").each(function() {
$(this).val(fieldMap[$(this).attr("name")]); });

But besides the fact that my code just grew, there was another problem with the jQuery approach. Some people turn script off altogether. Ultimately I had to do what I tried so hard not to do, which was this junky markup:

	<input type="checkbox" <%If Request("foobar") = "ABC" Then %>
	checked="checked"<% End If %> name="foobar" value="ABC" />
	<input type="text" value="<%=Request("acme")%>" name="acme" /> 
	

Now all of a sudden I had messy, difficult-to-maintain code. Any time you put implementation detail on the detail, such as here having field instance named data binding, you have messy code; I prefer to go abstract as much as possible.

But I didn't see any way around this.

Generally, people don't run into this problem. They typically settle for something like Web Forms, which imposes View State and ultimately suffers from similar performance issues in different ways.

I was lucky. I was doing my ASP Classic coding in Visual Studio 2008, which I might add would be a GREAT ASP Classic IDE, except for one not-so-small problem: VS crashes every time you quit the ASP Classic debugger. :(  Anyway, Visual Studio gave me the RegEx Find-and-Replce tool, which I spent no time thinking about; as soon as I realized I had to manually inject my binding code into the HTML markup, I started doing things like this:

        Find: name\=:q
Replace With: name\=\1 value\=\"\<\%\=Request(\1)\%\>\"

I did have a lot of bad runs for the several changes I had to make (thank Microsoft for Undo->Replace All), still in the end I saved a few minutes.

The end result was instantaneous refresh. Zero delay.

But after all that, I got up and went for a nature break (too much information?) and started asking myself, wait, what just happened? Till now I've started to sing the praises of jQuery about how wonderful it is and how it is our panacea to all the world's problems and ultimately hunger and disease in Zimbabwe and elsewhere in the world will end after we all adopt jQuery.

Now I'm coming to find that DOM traversing, in general, is not something that should be done on the client for such core operations as data-binding. This had me thinking again about Aptana Jaxer. Jaxer gives you jQuery (actually, browser-compatible Javascript in general) on the server by offering a Mozilla-based browser DOM on the server and spitting out to the client the resulting DOM markup in its modified state. But would this be any more performant?

It would be more performant than IE7 at least. Mozilla's JavaScript runtime is a lot faster than IE's Javascript runtime. But it's still client-side performance before the client ever receives anything. If nothing else, it would at least be perceived performance improvement because you don't see a web page build up all around you and then you have to wait for five seconds while the browser freezes.

Even so, Jaxer is not available in the workplace, nor should I ever expect it in my case.

I ended the day realizing that my curiosity of the notion of migrating all templating and forms and view logic off the server and onto the client might not be as desirable as I thought it would be. This could be a problem, too, for ASP.NET AJAX 4.0, which intends to migrate data binding to the client (something I celebrated when I found out about it).

Add comment


(Will show your Gravatar icon)  

  Country flag

biuquote
  • Comment
  • Preview
Loading




 

Powered by BlogEngine.NET 1.4.5.0
Theme by Mads Kristensen

About the author

Jon Davis (aka "stimpy77") has been a programmer, developer, and consultant for web and Windows software solutions professionally since 1997, with experience ranging from OS and hardware support to DHTML programming to IIS/ASP web apps to Java network programming to Visual Basic applications to C# desktop apps.
 
Software in all forms is also his sole hobby, whether playing PC games or tinkering with programming them. "I was playing Defender on the Commodore 64," he reminisces, "when I decided at the age of 12 or so that I want to be a computer programmer when I grow up."

Jon was previously employed as a senior .NET developer at a very well-known Internet services company whom you're more likely than not to have directly done business with. However, this blog and all of jondavis.net have no affiliation with, and are not representative of, his former employer in any way.

Contact Me 


Tag cloud

Calendar

<<  August 2020  >>
MoTuWeThFrSaSu
272829303112
3456789
10111213141516
17181920212223
24252627282930
31123456

View posts in large calendar

RecentPosts