Add a new item to html-select list without leaving the page. How?

Question

Hello all,

I've always wondered what is the best way to add a new item to html-select in a website. Yes, this may sound silly but it is a great problem from the usability perspective. I don't want the user to be taken to a new page every time they need to add new item to a html-select.

I like the way Google Reader and Gmail handle this problem in there "add folder" and "add label" functionality. I would like to mimic that but i have no clue how they did that.

I'm using jQuery, so any reference to plugins, code examples or tutorials are welcome. I would like it to be as modular as possible so i can reuse it anywhere.

I'm using ASP.NET 3.5 web-forms, Microsoft Access 2003, jQuery, IIS 5 and Win XP Professional as web server.

Thanks.

Answer 1

The standard technique of doing this is called ajax, which basically means replacing only parts of the page. JQuery ajax and maybe a tutorial should get you going.

Answer 2

A common mistake for this scenario is to add the item on client (using jQuery or plain javascript). It may look that it works until the next post-back. Unfortunately the Asp.NET post-back model does not allow to alter the controls contents on client side only. So basicaly there are two choices:

• Use ajax (the simplest would be to use an UpdatePanel)
• Make a normal postback to add the item (simple and fast to code, if performance is not an issue - for intranet applications for example)

Answer 3

there's a jquery select plugin that might help you with this. I've manipulated select lists client side and had no problem with subsequent form-submits but you'd need to do some experiments w asp.net