GeorgiG GeorgiG - 1 year ago 45
C# Question

Datepicker in MVC loads slowly in IE

I have a problem with the IE user experience (yeah, I know - a lost cause). My site works well on both Mozilla and Chrome, but chrome wastes like 1-2 seconds every time i open or close a datepicker menu.

Here is my jQuery:

<script>
$(document).ready(function () {
$('#IssDate').datetimepicker({
theme: 'dark',
lang: 'bg',
format: 'd.m.Y H:i:s',
minDate: '-1970/02/01',
maxDate: '+1970/01/08',
step: 10,
dayOfWeekStart: 1,
showAnim: jQuery.support.boxModel ? 'drop' : null, // optional
duration: jQuery.support.boxModel ? 'normal' : ''
});
});
</script>
<script>
$(document).ready(function () {
$('[id $= _Date]').datetimepicker({
theme: 'dark',
lang: 'bg',
format: 'd.m.Y H:i:s',
step: 10,
dayOfWeekStart: 1,
showAnim: jQuery.support.boxModel ? 'drop' : null, // optional
duration: jQuery.support.boxModel ? 'normal' : ''
});
});
</script>


Can you refer me to a solution? I've already seen the WebApp comments but i don't really know if this is the same problem. I already tried to remove some features of datepicker without any noticeable change in effectiveness.

I believe that even dropboxes and textfields are realatively slow, but it's not so bad.

Answer Source

I found the solution!

Turns out, that I had a recurssion in my scripts. I had a (document).on('change') function and it changed some fields. Then again, when these fields changed, I had another jQuery to check their change and trigger changes in other fields. Here they are:

 $(document).on('change', function () {
                    if ($("#sol_Date").val().trim() != '') {
                        $("#caseStatus").val('Solved');
                        $("#caseStatusDisplay").val('Solved');
                        $("#caseStatus").change();
                    }
                    else {
                        $("#caseStatus").val('In Progress');
                        $("#caseStatusDisplay").val('In Progress');
                        $("#caseStatus").change();
                    }
                });



$(document).ready(function () {
                $("#falsePositives").change(function () {
                    if ($("#caseStatus").val().trim() == 'Solved' && ($("#falsePositives").val().trim() != '' || $("#escTo").val().trim() != '' || $("#dept").val().trim() != '')) {
                        $("#saveBtn").attr('disabled', false);
                        $("#escToValMsg").text('');
                        $("#fpValMsg").text('');
                    }
                    else if ($("#caseStatus").val().trim() == 'Solved' && $("#falsePositives").val().trim() == '' && $("#escTo").val().trim() == '' && $("#dept").val().trim() == '') {
                        $("#escToValMsg").text('You must have either escalated to/department or false positives filled');
                        $("#fpValMsg").text('You must have either escalated to/department or false positives filled');
                        $("#saveBtn").attr('disabled', true);
                    }
                });
            });

As you can easily see, this causes a neverending loop. The other browsers were clever enough to notice it and skip the entire process on the first execution. IE, on the other hand, had to trigger the loop every time I changed a fields value. After I editted the functions, everything went on smoothly.

PS: It did not take me 2 weeks :) Just late to fill in my comment here.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download