Question

I have an ASP.NET dropdownlist called #ddlDateRange that contains several items. Possible values in the dropdownlist are:

Year - Current
Year - Previous
Year - Custom

I have two textboxes called txtStartDate and txtEndDate which are filled with values based on what the user selects from the dropdown. (i.e. txtStartDate = ’01-01-2010′ and txtEndDate = ’12-31-2010′) if the user selects Year – Previous.

I also have two calendar controls to the right of the text boxes. These jquery calendar controls allow an end user to select a custom date range IF they choose Custom Date. The jquery portion of the page is:

        $("#<%#ddlDateRange.ClientID%>").blur(function() {
            var value = $('#<%#ddlDateRange.ClientID%>').val();
            var lowerCaseValue = value.toLowerCase();

            if (lowerCaseValue.indexOf('custom') > -1) {
                alert('You selected custom date range: ' + lowerCaseValue);
                // enable the calendar controls                    
            } else {
                alert('You DID NOT select a custom date range: ' + lowerCaseValue);
                // disable the calendar controls
                // .dp-choose-date
                $("a").click(function(e) {
                    alert('howdy!');
                    e.preventDefault();
                });
            }
        });

The code is working correctly except in the else block. I want to disable the anchor tag that has the class of “dp-choose-date”.

<div class="caption">Start Date:</div>
<div class="dateCell">
    <input name="ctl00$Tabs$Panel1$txtStartDate" type="text" 
           id="ctl00_Tabs_Panel1_txtStartDate" class="date-pick" 
           style="width:125px;" />
    <a href="#" class="dp-choose-date" title="Choose date">Choose date</a>
</div>
<br />

I am aware that I can use preventDefault to prevent the default action when clicking on a hyperlink, but the alert(‘Howdy’) never gets fired off when I attempt to debug in Firebug. I believe the reason is that because I’m not clicking on the link right after the dropdown loses focus which makes sense.

So my question is, how do I disable the link? I also tried:

$("a .dp-choose-date").click(function(e) {
    alert('Howdy!');
    e.preventDefault();
});

as my selector. But I am still able to click on the link, which I do not want. In the rendered markup, the class “date-pick” which is used in the textbox generates the anchor tag with the “dp-choose-date” attribute, so I’m not sure if I can toggle this class.

If anyone has any suggestions, I’m all ears…

Answer 1

MY suggestion is to do something like this:

var blurred = true
$("#").focus(function(){
    blurred = false;
});
$("#").blur(function() {
    var value = $('#').val();
    var lowerCaseValue = value.toLowerCase();

    if (lowerCaseValue.indexOf('custom') > -1) {
        alert('You selected custom date range: ' + lowerCaseValue);
        // enable the calendar controls                    
    } else {
        alert('You DID NOT select a custom date range: ' + lowerCaseValue);
        // disable the calendar controls
        // .dp-choose-date
        blurred = true;
    }
});

$("a.dp-choose-date").click(function(e) {
    if ( blurred ){
        alert('howdy!');
        e.preventDefault();
    }
});

Right now you are adding a click event to the a tags every time there is a loss of focus. This is not only unnecessary but can lead to performance issues as the user interacts with the page.