CODEWITHSUNDEEP
javascriptjquery
ramakunga
ramakunga

Reputation: 35

Working with change to 2 elements

I have the following code

jQuery(document).ready(function(jQ) {                   
		jQ('.WorkType').on("change", function(){
			if (jQ(this).val() == 'Standard Hours'){
				jQ(this).closest('.DayTimeWrapper').find('.Hours').addClass("Calc_Hours");
				jQ(this).closest('.DayTimeWrapper').find('.Hours').removeClass("Calc_Leave");
				jQ(this).closest('.DayTimeWrapper').find('.Hours').removeClass("Calc_RDO");
			}else if (jQ(this).val() == 'RDO'){
				jQ(this).closest('.DayTimeWrapper').find('.Hours').addClass("Calc_RDO");
				jQ(this).closest('.DayTimeWrapper').find('.Hours').removeClass("Calc_Leave");
				jQ(this).closest('.DayTimeWrapper').find('.Hours').removeClass("Calc_Hours");				
			}else{
				jQ(this).closest('.DayTimeWrapper').find('.Hours').addClass("Calc_Leave");
				jQ(this).closest('.DayTimeWrapper').find('.Hours').removeClass("Calc_RDO");
				jQ(this).closest('.DayTimeWrapper').find('.Hours').removeClass("Calc_Hours");
			}
			window.setTimeout(function () {
				jQ(".Calc_Hours").sum("focusout", "#standard_hours");
				jQ(".Calc_Leave").sum("focusout", "#leave_hours");
				jQ(".Calc_RDO").sum("focusout", "#rdo_hours");
				},1000);
		})	
	})

This code traverses the dom on a change to the element with the class WorkType and modifies the class attributes of the Hours element situated within the div DayTimeWrapper. It then performs calculations and places the results to the elements with ID as specified.

It works perfectly

However i need to perform the same calculations on additional elements with the class set to setTime so i modified the code as follows

jQuery(document).ready(function(jQ) {                   
		jQ('.WorkType,.setTime').on("change", function(){
			if (jQ('.DayTimeWrapper').closest('.WorkType').val() == 'Standard Hours'){
				jQ(this).closest('.DayTimeWrapper').find('.Hours').addClass("Calc_Hours");
				jQ(this).closest('.DayTimeWrapper').find('.Hours').removeClass("Calc_Leave");
				jQ(this).closest('.DayTimeWrapper').find('.Hours').removeClass("Calc_RDO");
			if (jQ('.DayTimeWrapper').closest('.WorkType').val() == 'RDO'){
				jQ(this).closest('.DayTimeWrapper').find('.Hours').addClass("Calc_RDO");
				jQ(this).closest('.DayTimeWrapper').find('.Hours').removeClass("Calc_Leave");
				jQ(this).closest('.DayTimeWrapper').find('.Hours').removeClass("Calc_Hours");				
			}else{
				jQ(this).closest('.DayTimeWrapper').find('.Hours').addClass("Calc_Leave");
				jQ(this).closest('.DayTimeWrapper').find('.Hours').removeClass("Calc_RDO");
				jQ(this).closest('.DayTimeWrapper').find('.Hours').removeClass("Calc_Hours");
			}
			window.setTimeout(function () {
				jQ(".Calc_Hours").sum("focusout", "#standard_hours");
				jQ(".Calc_Leave").sum("focusout", "#leave_hours");
				jQ(".Calc_RDO").sum("focusout", "#rdo_hours");
				},1000);
		})	
	})

This is not working and i am at pains to figure out why. The error in the console is

Uncaught SyntaxError: Unexpected token )

Any help to resolve this would be appreciated

Upvotes: 0

Views: 61

Answers (1)

Fabian Horlacher
Fabian Horlacher

Reputation: 1929

You did not close the bracket after the first if statement. I've optimized your selectors for performance & readability:

jQuery(document).ready(function (jQ) {
    jQ('.WorkType,.setTime').on("change", function () {
        var $hours = jQ(this).closest('.DayTimeWrapper').find('.Hours');
        var workType = jQ('.DayTimeWrapper').closest('.WorkType').val();
        if (workType == 'Standard Hours') {
            $hours.addClass("Calc_Hours");
            $hours.removeClass("Calc_Leave");
            $hours.removeClass("Calc_RDO");
        } else if (workType == 'RDO') {
            $hours.addClass("Calc_RDO");
            $hours.removeClass("Calc_Leave");
            $hours.removeClass("Calc_Hours");
        } else {
            $hours.addClass("Calc_Leave");
            $hours.removeClass("Calc_RDO");
            $hours.removeClass("Calc_Hours");
        }

        // The following code seems to be corrupt:
        window.setTimeout(function () {
            jQ(".Calc_Hours").sum("focusout", "#standard_hours");
            jQ(".Calc_Leave").sum("focusout", "#leave_hours");
            jQ(".Calc_RDO").sum("focusout", "#rdo_hours");
        }, 1000);

    })
});

Edit:

This seems to be what you want to do:

https://jsfiddle.net/mk07fof5/1/

$('.WorkType,.setTime').on("change", function() {
    var $currRow = $(this).closest('.DayTimeWrapper'),
        $allRows = $currRow.closest('.DayTimeTable').find('.DayTimeWrapper');

    calculate($currRow); //pass the element which triggered the event

    var CalcHours = 0,
        MealHours = 0,
        RdoHours = 0;

    $allRows.each(function(i) {
        $row = $(this);
        var hours = ParseFloat($row.find('.Hours').val());
        if(!hours) return;
        var workType = $row.find('.WorkType').val();
        switch (workType) {
            case 'Standard Hours':
                CalcHours += hours;
                break;
            case 'RDO':
                RdoHours += hours;
                break;
            default:
                MealHours += hours;
        }
    });

    $("#standard_hours").html(CalcHours.toFixed(2));
    $("#leave_hours").html(MealHours.toFixed(2));
    $("#rdo_hours").html(RdoHours.toFixed(2));
});

Don't forget to wrap your table into this div:

<div class="DayTimeTable">[...]</div>

Upvotes: 1

Related Questions