Problem with jQuery fadeOut with remove

I faced this peculiar problem when trying to remove an element from DOM after fading it out. Ditto for slideUp or other similar methods.

This is what I was trying to do;

$('#elem').fadeOut('slow', function() { $('#elem').remove(); });

But this wasn’t working out as expected. It should have removed the element from the DOM after it finished fadeOut on the element. But to my frustation, it wouldn’t. The element was very much there albeit hidden owing to its display set to ‘none’ courtesy fadeOut.

As usual, my first saviour being Google, I googled. Only to find the same snippet (as above) being suggested on several sites!

After much struggling with it, found out that I was attempting to remove the element within the context, which in effect was failing.

The correct way would be to call the method on the context reference, i.e. ‘this’. So the technique becomes:

$('#elem').fadeOut('slow', function() { $(this).remove(); });

And this works like a charm!

-@bhitalks

Taming Date and Time formats in ASP.Net app ?

 

You have this great web application being developed and you find yourself struggling with handling date/time data. Days and months have switched places, or even worse table columns have gone awry with width, trying to accommodate long dates instead of expected short format! And you start pulling your hair out of their roots trying to figure out whatever happened to the nice “01/03/2010” format, now showing as “Monday, March 1, 2010 11:15:26 PM”?

Am sure most of you must have at some point of time or other, struggled with taming dates in your ASP.Net application. Is yours a similar story? Let me consolidate here a few options of taming dates that I have learnt during my ordeals with such scenarios.

There are actually two parts to handle date/time formats. One while displaying on the webpage, and the other while trying to capture user input. Well, capturing user input is not the topic of discussion here because there are several calendar controls and other validation mechanisms in place always. So maybe a different post for that. Let’s see how we can control display of date/time data.

Scenario:

We want the date field to be displayed in “01-Mar-2010” format, so that there is no confusion. And yes, we are talking VB.Net here.

Option 1: The easiest way

Like an experienced trapeze artiste, do some acrobatics and put in a “Format” or “FormatDateTime” just before you are spitting out your date/time as a string.

dateString = FormatDateTime(dateField, DateFormat.ShortDate)

A “FormatDateTime” would be ideal, but the server’s culture may not be the format we need. Also, it needs a named format as its second parameter and so cannot be customized. So, do a “Format” instead.

dateString = Format(dateField, "dd-MMM-yyyy")

Ah that looks good. Fine go do that everywhere you are spitting out that date in your code. You have that at a hundred places? Go ahead do that, it is the easiest way. You have gridviews and other complex controls? Go ahead tap in the “RowDataBound” event and do something like this:

e.Row.Cells(4).Text = Format(DataBinder.Eval(e.Row.DataItem, "dateField"), "dd-MMM-yyyy")

Option 2: A little difficult way

Change your custom entity class to spit out a string instead of date. And then do a CDate whenever you need a date type in your code.

For example, for your customer class like this…

Class Customer
    Private _dateField As DateTime
    Public Property Datefield() As DateTime
        Get
            Return _dateField
        End Get
        Set(ByVal value As DateTime)
            _dateField = value
        End Set
    End Property
End Class

… change it to …

Class Customer
    Private _dateField As DateTime
    Public Property Datefield() As String
        Get
            Return Format(_dateField, "dd-MMM-yyyy")
        End Get
        Set(ByVal value As String)
            _dateField = CDate(value)
        End Set
    End Property
End Class

Notice the change in property. We are spitting out a string (formatted) and accepting a string which we convert to date just before assigning internally to our object.

So now you need not to worry. Everywhere in our code we will have a nicely formatted string, data-bound controls and all. You have a gridview bound to a List( Of Customer), nothing to change because the property is a string.

What? You do not have access to the entity layer? Or your controls are bound directly to the database (of course it is a small app, fine). Maybe, you do NOT want to change your code or perhaps you just can’t. Try out option #3.

Option 3: The most difficult part

We don’t know what culture the server follows. We don’t have access to that server anyway. So what we do is, we change the culture settings for our application.

We do that at the page level for any or all aspx pages:

<%@ Page Culture="hi-IN" Language="VB" %>

Or at the web.config level for the entire application (under system.web):

<system.web>
    <globalization culture="hi-IN"/>

Great, the above snippet shows that we changed the culture to Hindi-India. But, this will work only for named formats like ShortDate. Remember our discussion on Option 1 (FormatDateTime named formats) problem? We still do not have a control on this culture because we need a custom format.

So, now we add a little piece of code to our global.asax (inside the Application_BeginRequest handler)

Dim myCulture As CultureInfo
myCulture= CType(CurrentThread.CurrentCulture.Clone(), CultureInfo)
myCulture.DateTimeFormat.ShortDatePattern = "dd-MMM-yyyy"
myCulture.DateTimeFormat.DateSeparator = "-"
CurrentThread.CurrentCulture = myCulture

Don’t forget to add reference at the top:

Imports System.Globalization
Imports System.Threading.Thread

So what we are doing here is to implement a custom culture changing the date formats. In order to do this, we clone the current culture and change the required formats. Simple. Every time our application is requested, the culture gets customized. You don’t need to change anything elsewhere. No need to do “Format” or “FormatDateTime” scattered everywhere.

I haven’t touched on “Time” here, but as you can see it is the same. You can have it going yourself.

Hope that helps to ease your pain while dealing with date/time data in your web apps.

-@bhitalks