Question

I am having a slight problem with this piece of code as I am not very good with JavaScript. For some reason, I have messed around with the syntax and because I am using Visual Studio 2010, there is not really a way to debug the JavaScript. I’m not sure what I have done wrong, but when I try and launch this piece of code in a browser, it appears to just keep on loading, and doesn’t actually finish. I am wondering if there is something wrong with my expressions, but either way I have been working on this for quite a few days and it is starting to frustrate me.

Any answers will be highly appreciated.

var addAbsence = {
holDayCount: 0,

init: function () {
    var deferrend = $.Deferred();

    $("#addAbsence select[name=type]").change(function () {
        switch ($(this).val()) {
            case "0": case "1":
                $("#addAbsence .borderWrap.type").animate({ "width": 266 }, 300, "swing", function () {
                    $("#addAbsence .borderWrap.tInfo").show();
                });
                $("#addAbsence .halfDays").show();
                $("#addAbsence .lateArrivalTime").hide();
                $("#addAbsence .paidHolidayCount").show();
                break;
            case "2":
                $("#addAbsence .borderWrap.type").animate({ "width": 266 }, 300, "swing", function () {
                    $("#addAbsence .borderWrap.tInfo").show();
                });
                $("#addAbsence .halfDays").hide();
                $("#addAbsence .paidHolidayCount").hide();
                $("#addAbsence .lateArrivalTime").show();
                break;
            default:
                $("#addAbsence .borderWrap.tInfo").hide();
                $("#addAbsence .halfDays").hide();
                $("#addAbsence .borderWrap.type").animate({ "width": 554 }, 300, "swing");
        }
    });

    $("#addAbsence input.date").datepicker({
        "dateFormat": "DD, d MM, yy",
        onSelect: function () {
            var dateFrom = Date.parse($("#addAbsence input[name=dateFrom]").val());
            var dateTo = Date.parse($("#addAbsence input[name=dateTo]").val());

            if (!isNaN(dateFrom) && !isNaN(dateTo)) {
                var dates = addAbsence.getStartEndDate();

                if ((dateFrom <= dateTo) &&
                    (dateFrom >= dates.dateFrom && dates.dateFrom <= dateTo) &&
                    (dateFrom <= dates.dateTo && dates.dateTo >= dateTo)) {

                    $("#addAbsence input[name=dateFrom], #addAbsence input[name=dateTo]").removeClass("error");

                    if ($("#addAbsence select[name=type]").val() == "0") {
                        addAbsence.calcDayCount();

                        $("#addAbsence p.holUsing").html(addAbsence.holDayCount);
                    }
                    else {
                        $("#addAbsence p.holUsing").html("0");
                    }
                }
                else {
                    $("#addAbsence input[name=dateFrom], #addAbsence input[name=dateTo]").addClass("error");

                    $("#addAbsence p.holUsing").html("--");
                }
            }
            else {
                $("#addAbsence input[name=dateFrom], #addAbsence input[name=dateTo]").removeClass("error");
            }
        }
    });

    $("#addAbsence .addHalfDay").click(function () {
        addAbsence.calcDayCount();

        if ($("#addAbsence input[name=dateFrom]").val().length > 0 && $("#addAbsence input[name=dateTo]").val().length > 0 &&
            Date.parse($("#addAbsence input[name=dateFrom]").val()) <= Date.parse($("#addAbsence input[name=dateTo]").val())) {

            $("#addAbsence input[name=dateFrom], #addAbsence input[name=dateTo]").removeClass("error");

            if ($("#addAbsence tbody tr").size() < addAbsence.holDayCount) {
                addAbsence.addHalfDay();
            }
        }
        else {
            $("#addAbsence input[name=dateFrom], #addAbsence input[name=dateTo]").addClass("error");

    $("#addAbsence select[name=type]").change();
    )};


    $("form#addAbsence").submit(function () {
        var boolDate = $(this).find("input[name=dateFrom]").dateRangeValid($(this).find("input[name=dateTo]"));
        var boolComments = $(this).find("textarea[name=comments]").lengthValid(0, 350);
        var boolAbsenceType = $(this).find("select[name=type]").selectValid(1);

       )};

Answer 1

You have two nesting errors to the bottom of your code. I don’t know if that’s it though. Here’s the fixed code:

$("#addAbsence select[name=type]").change(function () {
    switch ($(this).val()) {
        case "0": case "1":
            $("#addAbsence .borderWrap.type").animate({ "width": 266 }, 300, "swing", function () {
                $("#addAbsence .borderWrap.tInfo").show();
            });
            $("#addAbsence .halfDays").show();
            $("#addAbsence .lateArrivalTime").hide();
            $("#addAbsence .paidHolidayCount").show();
            break;
        case "2":
            $("#addAbsence .borderWrap.type").animate({ "width": 266 }, 300, "swing", function () {
                $("#addAbsence .borderWrap.tInfo").show();
            });
            $("#addAbsence .halfDays").hide();
            $("#addAbsence .paidHolidayCount").hide();
            $("#addAbsence .lateArrivalTime").show();
            break;
        default:
            $("#addAbsence .borderWrap.tInfo").hide();
            $("#addAbsence .halfDays").hide();
            $("#addAbsence .borderWrap.type").animate({ "width": 554 }, 300, "swing");
    }
});

$("#addAbsence input.date").datepicker({
    "dateFormat": "DD, d MM, yy",
    onSelect: function () {
        var dateFrom = Date.parse($("#addAbsence input[name=dateFrom]").val());
        var dateTo = Date.parse($("#addAbsence input[name=dateTo]").val());

        if (!isNaN(dateFrom) && !isNaN(dateTo)) {
            var dates = addAbsence.getStartEndDate();

            if ((dateFrom <= dateTo) &&
                (dateFrom >= dates.dateFrom && dates.dateFrom <= dateTo) &&
                (dateFrom <= dates.dateTo && dates.dateTo >= dateTo)) {

                $("#addAbsence input[name=dateFrom], #addAbsence input[name=dateTo]").removeClass("error");

                if ($("#addAbsence select[name=type]").val() == "0") {
                    addAbsence.calcDayCount();

                    $("#addAbsence p.holUsing").html(addAbsence.holDayCount);
                }
                else {
                    $("#addAbsence p.holUsing").html("0");
                }
            }
            else {
                $("#addAbsence input[name=dateFrom], #addAbsence input[name=dateTo]").addClass("error");

                $("#addAbsence p.holUsing").html("--");
            }
        }
        else {
            $("#addAbsence input[name=dateFrom], #addAbsence input[name=dateTo]").removeClass("error");
        }
    }
});

$("#addAbsence .addHalfDay").click(function () {
    addAbsence.calcDayCount();

    if ($("#addAbsence input[name=dateFrom]").val().length > 0 && $("#addAbsence input[name=dateTo]").val().length > 0 &&
        Date.parse($("#addAbsence input[name=dateFrom]").val()) <= Date.parse($("#addAbsence input[name=dateTo]").val())) {

        $("#addAbsence input[name=dateFrom], #addAbsence input[name=dateTo]").removeClass("error");

        if ($("#addAbsence tbody tr").size() < addAbsence.holDayCount) {
            addAbsence.addHalfDay();
        }
    }
    else {
        $("#addAbsence input[name=dateFrom], #addAbsence input[name=dateTo]").addClass("error");
    }

    $("#addAbsence select[name=type]").change();
});


$("form#addAbsence").submit(function () {
    var boolDate = $(this).find("input[name=dateFrom]").dateRangeValid($(this).find("input[name=dateTo]"));
    var boolComments = $(this).find("textarea[name=comments]").lengthValid(0, 350);
    var boolAbsenceType = $(this).find("select[name=type]").selectValid(1);
});