Link to home
Start Free TrialLog in
Avatar of lanterv
lanterv

asked on

Jquery on click stopped working.

I have a Coldfusion page that uses jquery on click.  It has stopped working and I have no idea why.  No changes were made to the code.  I have upgraded the site to use 1.11 and it still doesn't work.  Dev tools shows no errors.  I can set a breakpoint but it never hit's that line.  I also have 2 on change functions that also don't work.  I think I need a little help debugging this one.  There is a $(document).ready(function () { at the top of the js.   I created a standalone page based on the code below and everything works.  Where do I begin?

EDIT: Actually I am getting an error; NS_ERROR_NOT_AVAILABLE:

<tr>
				<td>
					Regular Hours:
				</td>
				<td>
					<cfinput type="text" name="regular_hours" id="regular_hours" size="11" maxlength="12" value="#decimalformat(timeSheetInfo.regular_hours)#" />
				</td>
			</tr>
			<tr>
				<td>
					Overtime Hours:
				</td>
				<td>
					<cfinput type="text" name="ot_hours" id="ot_hours" size="11" maxlength="12" value="#decimalformat(timeSheetInfo.ot_hours)#" />
				</td>
			</tr>
			<tr>
				<td>
					Total Hours Worked:
				</td>
				<td>
					<cfinput type="text" name="total_hours" id="total_hours" size="11" maxlength="12" value="#decimalformat(timeSheetInfo.Hours_Worked)#" />
				</td>
			</tr>
			<tr>
				<td>
					&nbsp;
				</td>
				<td>
					&nbsp;
				</td>
			</tr>
			<tr>
				<td colspan="2" align="center">
					 <cfinput type="button" name="EditTimeSubmit" id="EditTimeSubmit" value="Submit Changes">
					<div id="EditTimeUpdateComplete"></div>
				</td>
			</tr>


		$('#regular_hours').on('change', function () {
			alert('step1');
			var val1 = Number(document.getElementById("regular_hours").value);
			var val2 = Number(document.getElementById("ot_hours").value);
			var val3 = val1 + val2;
			document.getElementById("total_hours").value = val3;
			});

		$('#ot_hours').on('change', function () {
			alert('step2');
			var val1 = Number(document.getElementById("regular_hours").value);
			var val2 = Number(document.getElementById("ot_hours").value);
			var val3 = val1 + val2;
			document.getElementById("total_hours").value = val3;
			});

		//$('form[name=TimeSheetDivForm2]').on('click', 'button[name=EditTimeSubmit]', function () {
		$('#EditTimeSubmit').on('click', function () {
			alert('step3');
			$.ajax({
				type: 'POST',
				url: "cfc/updates.cfc?method=UpdateTimeSheet",
				data: "&reg_profitmarginx=" + $('#reg_profitmargin').val() + "&ot_profitmarginx=" + $('#ot_profitmargin').val() + "&regular_hours=" + $('#regular_hours').val() + "&ot_hours=" + $('#ot_hours').val() + "&payroll_InvoiceNumber=" + $('#payroll_InvoiceNumber').val() + "&week_ending=" + $('#week_ending').val() + "&total_hours=" + $('#total_hours').val() + "&id=" + $('#id').val(),
				error: function(xhr, textStatus, errorThrown) {
					// show error
					alert(errorThrown);
				},
				success: function(response1, textStatus, jqXHR) {
					ColdFusion.Grid.refresh('timeSheetsGrid', true);
					ColdFusion.Grid.refresh('timeTotals', true);
					//$('#EditTimeUpdateComplete').text('Updated');
					return true;
				}
				});
			});

Open in new window

Avatar of erzoolander
erzoolander

What's happening on the actual CF rendered page?  Have you opened console to see if there are any JS errors coming up?
Are you experiencing this issue in IE, FireFox, and Chrome?

If you are using a Mozilla browser, the issue could be related an alert box being suppressed:
Bug 633154 - Suppressing alert boxes leads to NS_ERROR_NOT_AVAILABLE
https://bugzilla.mozilla.org/show_bug.cgi?id=633154

Also, take a look at the following bug report from jQuery that discusses FF throwing a NS_ERROR_NOT_AVAILABLE error when a component is not available: http://bugs.jquery.com/ticket/15098
Avatar of lanterv

ASKER

I'm using Firefox and Chrome.  The test page I created shows alerts in both browsers.

"Bug 633154 - Suppressing alert boxes leads to NS_ERROR_NOT_AVAILABLE"
I'm not suppressing alerts.

"Also, take a look at the following bug report from jQuery that discusses FF throwing a NS_ERROR_NOT_AVAILABLE error when a component is not available: http://bugs.jquery.com/ticket/15098"
 Ticket #15098 (closed bug: fixed)
Avatar of Rainer Jeschor
Hi,
could you perhaps attach the generated HTML for that page (in the browser -> view source)?
Your above posted code snippet would never work as the script tag is missing as well as the positioning inside a table is not valid.
Thanks.
Rainer
Avatar of lanterv

ASKER

Generated source.
pagesource.txt
ASKER CERTIFIED SOLUTION
Avatar of Rainer Jeschor
Rainer Jeschor
Flag of Germany image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of lanterv

ASKER

When I load the page in Chrome,  there are no errors in dev tools console.  When I click on the timesheets tab,  there are no errors.  When I enter a 2 in the ot hours element and tab out of it,  there are no errors.  But there is nothing in the total hours element when there should be a 2.  

No, I'm not sure about where to put the document.ready function.
Avatar of lanterv

ASKER

I moved all JS that pertains to dynamically loaded pages outside of the document.ready function.  I understand why, but I don't know why the original code stopped working.  Maybe it wasn't working and nobody told me.  Anyway, good catch.