On-The-Fly updated Web Form

.NET
1

Hello. I’ve used ASP.Net 1.1, and some of 2.0, but it’s been a long time since I’ve done any web related work. That time has come again, and there’s a lot of new changes since I last did development work.

I have a particular objective that I want to achieve with a form that a user fills out. I want to be able to update the server every time they enter information, not just when they click “Submit”. So as they enter their name, address, email, and the various item information for their order, I’d like this to be updated on the fly.

That’s a departure from the way I’ve built forms before, and am looking for the best way to do this. The reason is that there are various informational pieces that a user may navigate to during the form filling process, and we don’t want to have them partially fill out an order and then navigate to these information forms and have their order information disappear.

I could pop these in a different window, but that’s been problematic because of the tendency for them to be blocked. I would also make a pop-in that shows them in an IFrame, but they need to be able to print these information pieces as well, which isn’t as intuitive as having them be able to load the page and use the standard print() method.

My initial thought is to have onBlur events for the entry fields that will trigger an Ajax call via jQuery to a web service that will update the server to store the values. However, that’s just from observation and research, not hands-on understanding.

So, is there a standard way to accomplish an on-the-fly updated form? Is there a better way than what I’ve described?

Thanks for any insight.

2

I think you have a pretty good understanding of this. I mean there’s only one way to save that info, the web browser has to talk to the server. And there are basically only two ways to do that; you can either do a postback after each field is entered, or you need to do an asynchronous call in the middle of the page - and that just screams AJAX.

Given the choices, postback seems really heavy handed and performance killing compared to AJAX; this is pretty much exactly the kind of short and sweet server connections AJAX was designed to work on. And while my book isn’t here yet, it seems pretty well established in the industry that jQuery has exceptional AJAX skills so that absolutely seems like the most logical approach. I will know more when my copy of jQuery: From Novice to Ninja arrives - it’s my prize for being one of the week 1 Golden Post winners and as you can tell, I’m not at all excited. :smiley: Anyway, if I come across something that raises any red flags, I will try to update this thread with something useful (or at least a “my bad”).

3

Ajax and jquery is definitely the way you want to go here. When the page loads, you will need to do an insert and save the ID somewhere on the page in maybe in a hidden var or something. Even a session would do for security, so no1 can edit it.

Create a ajax save method like this:


function saveValue(type,val)
{
$.ajax({
url: 'pageToSave.aspx'
data: 'val=' + val + '&type='+type,
type: 'POST',
success: function(msg) {

}

});
}

then on each textbox add the following attribute: onblur=“saveValue(‘name’,this.value);”

then on the page that will handle the saving you get those vars. Either with Request.QueryString or Request.Form depending on if you chose POST or GET in the type above and then grab the session and do database updates.

I hope this helps. Also, make sure you have firebug installed in your firefox to debug the console posts.

Good luck

4

Thanks, both of you, for the insight. This is GREAT. I’m glad I was at least in the ballpark of a correct approach, definitely appreciate your clarification and your help in narrowing down the “how to”.

I installed FireBug on a recommendation, and absolutely wouldn’t want to work without it now. Could have used this a few years ago, that’s for sure. :slight_smile:

Thanks again.