Setting a Time Form Field with a JQuery DatePicker with an ASP.NET DataList in an UpdatePanel
Sometimes you will want to do something very specific on a Web page using a combination of popular technologies. However the interaction of client and server-side languages such as JQuery and ASP.NET can become confusing, especially when the server side language starts adding client-side functionality such as through an UpdatePanel control.
In this article I’m going to review a very specialized case. Here are the key points that I want the code to handle:
- I have an ASP.NET DataList that is showing rows of information.
- One column of repeating information in the DataList contains a separate Date and Time component
- The footer of the DataList is being used to add new rows of information, including a Date and a Time field
- The editable time field should display a JQuery DatePicker widget
- When a date is selected on the JQuery DatePicker widget, the current time should be set to a separate text field that is beside the Date field
- The DataList is running inside an UpdatePanel control to only refresh the DataList when Server communications happens
- The DataList has an edit button which the user can press to make a row editable. This involves a refresh of the DataList so that JQuery has to know to re-attach the DatePicker control to the newly editable date field
This is a lot of functionality to cover in one article and I hope it is clear for you to understand how I want the JQuery to interact with the ASP.NET. To further explain things I will give some example code of both the JQuery and the markup tags of the DataList, and I will explain how to address the requirements step-by-step.
Before I start into in-depth explanations in this article, I’d like to mention that if you are interested in reading more about ASP.NET, please check out my series of articles covering ASP.NET development. I also have written a very interesting series of articles about using JQuery to add functionality to your pages that is worth taking a look at.
(more…)
Using a JQuery DatePicker with an ASP.NET DataList and UpdatePanel
When you are developing a new Web form there are a number of useful technologies that you can use to enhance the functionality of the form. Today I will review combining an ASP.NET DataList control with a JQuery DatePicker widget, and also with an ASP.NET UpdatePanel. The complexity in this combination of controls comes into play with the interplay of the client side JavaScript along with the partial page reloading of DataList control in an UpdatePanel.
(more…)
How to Extend the Expanded Select List Options for Older Browsers
Example of a Lengthening Select List
When putting together a Web based form space can be at a premium. Select lists are typically auto-adjusted by your browser to be the length of the longest option in the list.
But that just doesn’t work when space is tight and in many of my forms one doesn’t want the select list to automatically size itself to a length beyond what has been allocated for it, especially if the options are dynamically coming from a database.
To handle this gracefully for all browsers is actually not quite as simple as it seems and requires a bit of JavaScript to work universally.
