Quite often, I develop web forms containing  heavy elements, in particular large select tags, which can be a bit of a problem. All pages in ASP.NET are technically forms, but in this particular instance I’m talking primarily about ASP.NET MVC with it’s normal html layout.

If you remove just these select elements, the size of the form can often become 2-3 times smaller. In two recent projects, I’ve been trialling the following idea – “What if the page itself contains empty select elements only, but after the page has loaded, all these elements silently get populated via ajax requests?” The concept appears to be working well. It’s impossible to see any “flickering” on the page after it’s loaded, simply because the content of the select elements is invisible by default.

Here is the example of how this can be done in jquery:
 


$(document).ready(function() {
	$("#sBank").load(SiteRoot() + "Details/InsertBanks", null, function() {
		if ($("#bankName").val()) {
			$("#sBank").val($("#bankName").val());
		}
	});
});


Let me know what you think :)

You may also like

“Capitalise” jquery extension

Sometimes there is a requirement to capitalise certain text input elements in web forms, i.e. to make just the first symbol uppercase when the user inputs details. This is often useful in fields like “first name”, “last name” etc. I thought I may share my implementation here with you and save you some precious time.

Keep Reading

ASP.NET selectors in jquery

Jquery is a great javascript library, although it has a significant drawback when used in ASP.NET web applications. Because of the way ASP.NET translates it’s own internal identifiers to html id and name attributes, you cannot really use it in static javascript files.

Keep Reading

Newsletter sign up

Every couple of months we send out an update on what's been happening around our office and the web. Sign up and see what you think. And of course, we never spam.