Question

I am using the JQuery DatePicker plugin for my ASP.Net MVC 3 Web Application. I have used the DatePicker alot of times previously in other applications without any trouble.

However, I have come across an issue in my current app, whereby, the JQuery DatePicker works only intermittently. What I mean by this is, for example, I have the following JavaScript file

$(document).ready(function () {

    //Equal Opps
    $('#DOB').datepicker({ dateFormat: 'dd/mm/yy', changeMonth: true, changeYear: true, yearRange: "1900:2030" });


});

This file is referenced in my Razor View (along with all the other files needed to make DatePicker work) and then I have the following TextBox which once clicked on, the DatePicker should pop up.

<div class="editor-field sepH_b">
            @Html.TextBoxFor(model => model.DOB)
            @Html.ValidationMessageFor(model => model.DOB)
</div>

However, sometimes when the page loads and I click on the TextBox, the DatePicker pops up, if I refresh the page and click on the TextBox again, the DatePicker won’t work, if I then refresh again and click on the TextBox, the DatePicker then works ???

Sometimes when I load the page for the 1st time, the DatePicker will not work at all.

I really have no solution to what is going on here. Maybe it is a caching issue, but I really don’t know.

Please could someone help me with this, it would be greatly appreciated.

Thank you.

Answer 1

After looking through my code in a bit more detail, I realised that in the head section of my Master Layout page, I was referencing various JQuery scripts. I forgot that these scripts were already referenced here, yet I was still referencing them again in other pages throughout my site. I removed the duplicated references and everything seems to be working as expected again.