CODEWITHSUNDEEP
jquery-ui
Phil Hale
Phil Hale

Reputation: 3491

jQuery UI datepicker causes screen to scroll to the top after selecting a date

I have a couple of jQuery datepickers inside a jQuery dialog. Whenever users select a date from the datepicker the screen scrolls to the top. This only happens in IE8 not the Firefox 3.6 or Chrome 5. Since the majority of users will user IE this is going to be very annoying. Can anyone give me a clue as to why this is happening?

Here is a snippet of the HTML for the dialog:

 <div id="AppointmentDialog" style="display: none; font-size: 12px;">
    <table>
        <tr class="lesson notAvailable allDay">
            <td>
                Start
            </td>
            <td>
                <input id="txtStartDate" type="text" readonly="readonly" style="width: 90px" class="lesson notAvailable allDay" />
                <input id="txtStartTime" type="text" style="width: 50px" class="lesson notAvailable" />
                <input id="hidStartTime" type="hidden" value="" />
            </td>
        </tr>
        <tr class="notAvailable allDay">
            <td>
                End
            </td>
            <td>
                <input id="txtEndDate" type="text" readonly="readonly" style="width: 90px" class="notAvailable allDay" />
                <input id="txtEndTime" type="text" style="width: 50px" class="notAvailable" />
                <input id="hidEndTime" type="hidden" value="" />
            </td>
        </tr>
    </table>
</div>

Snippet of Javascript to initialise the dialog and datepickers:

$(document).ready(function() {
    initDialogs();
});

function initDialogs() {
    // Configure the New Appointment dialog
    $("#AppointmentDialog").dialog({
        autoOpen: false,
        resizable: false,
        width: 320,
        modal: true,
        title: 'Appointment',
        buttons: {
            "Close": function() { $(this).dialog("close"); },
            "Save": function() {
                // Function call
            }
        }
    });

    $.mask.definitions['h'] = '[012]';
    $.mask.definitions['m'] = '[012345]';
    $("#txtStartTime").mask("h9:m9");
    $("#txtEndTime").mask("h9:m9");

    // Init date pickers
    $("#txtStartDate").datepicker({ dateFormat: 'dd-mm-yy' });
    $("#txtEndDate").datepicker({ dateFormat: 'dd-mm-yy' });
};

EDIT

I'm using jQuery 1.4.2 and UI 1.8.2

Upvotes: 8

Views: 8445

Answers (4)

Imad
Imad

Reputation: 7490

I wasn't allowed to touch js libraries, I added this line under onSelect handler.

$('#ui-datepicker-div table td a').attr('href', 'javascript:;');

so my code looked like

            $('#txtDate').datepicker({
                    // other properties
                    onSelect: function (selectedDate) {
                        $('#ui-datepicker-div table td a').attr('href', 'javascript:;');
                        // other code
                    }
                });

Upvotes: 2

Massimo Ronzulli
Massimo Ronzulli

Reputation: 1

You need to override the "$" placeholder with "jQuery" if the text contain "#"

Upvotes: 0

Phil Hale
Phil Hale

Reputation: 3491

I've looked into it again. The bug has been reported with a workaround.

I'm using a minified version of jQuery UI so the code looks like this:

(B?" ui-priority-secondary":"")+'" href="#">'+q.getDate()+"</a>")+"</td>"

(B?" ui-priority-secondary":"")+'" href="javascript:;">'+q.getDate()+"</a>")+"</td>"

Upvotes: 7

reustmd
reustmd

Reputation: 3603

I had this exact problem, but the real issue turned out to be duplicate ids on the page. Once I removed the duplicate id the problem went away completely.

Upvotes: 3

Related Questions