Justin Cooney

Web Development Tips and Examples

recent posts

about

I am a Senior Applications Programmer / Analyst with years of experience developing enterprise solutions using the Microsoft technology stack including C#, VB.NET, ASP.NET, AJAX, IIS and SQL Server. I specialize in Web application development with a focus on building secure systems, integrating applications, and designing robust database structures.

  • 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:

    1. I have an ASP.NET DataList that is showing rows of information.
    2. One column of repeating information in the DataList contains a separate Date and Time component
    3. The footer of the DataList is being used to add new rows of information, including a Date and a Time field
    4. The editable time field should display a JQuery DatePicker widget
    5. 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
    6. The DataList is running inside an UpdatePanel control to only refresh the DataList when Server communications happens
    7. 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…)

  • Example of Adding a JQuery Modal Dialog Warning on Blur to an ASP.NET Text Box

    JQuery Dialog on Blur
    JQuery Dialog on Blur

    In this article I will review how to set up a basic JQuery UI Dialog widget to act as a modal alert box that warns the user of a possible problem when they move away from an HTML form field. The traditional JavaScript alert command is functional but doesn’t look very nice but since you can style the markup for the JQuery UI Dialog widget in pretty much any way you like, it makes a lot of sense to use the JQuery dialog instead of a JavaScript alert box.

    Although the title of this article specifically mentions ASP.NET, the code is easily applicable to any server-side language or to pure HTML/JavaScript markup. I will show the example using ASP.NET since the controls it renders at the server-side are dynamically named, so this is a perfect opportunity to show how to reference a server-side control with an auto-generated ID in JQuery.

    If you do like this article and find it useful, leave a comment below since I always like feedback. Also, you can check out other JQuery articles I have written that may also be of interest to you.

    The Desired Behavior

    I would like this example page to be similar to most HTML form pages. I’m including some random fields and text, and intend to add validation logic and a warning to one of the form fields. I intend the result to look like the screen-shot at the start of this article. Here are the requirements in point-form:

    • Basically I want the example page to look like a standard HTML form.
    • The first form text input field requires a data check so that the value entered by the user shouldn’t be higher than 10.
    • If the value is higher than 10 then I want a modal JQuery UI warning dialog to appear when the user moves away from the field (on blur).
    • The dialog should be aligned so that it is flush with the field.

    (more…)

  • JavaScript – Generic Function to Toggle Div Element Visible or Invisible

    JavaScript Open/Close
    JavaScript Open/Close

    If you are writing Web pages and find that you want to dynamically hide or show sections of your pages when the user interacts with the page, then the easiest way to do so is using JavaScript. In general it’s always best to avoid expensive round trips to the server by handling things client-side.

    In this example we have two link elements that are click-able by the user. Each link element will show or hide a corresponding section of the Web page that has some example text. The sections to show/hide are HTML <div elements.

    The nice part of this code is that you can write a single generic JavaScript function to take care of the click events. The link elements themselves pass the name of the <div to open or close. Once in the JavaScript function, the JavaScript determines whether to toggle the passed <div to show or not-show.

    The same functionality of course can be written in several different ways, but most of these are more verbose and prone to breaking if something on the page changes.

    Naturally the idea with this script is to expand on the code. If you are writing using ASP.NET at the server level, then you might use this code in a GridView control, or some sort of repeating list, or you could even use it to show custom page warning messages. The idea is that this functionality is simple to put in place and does not rely on any third party libraries.

    (more…)