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

lantervAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

erzoolanderCommented:
What's happening on the actual CF rendered page?  Have you opened console to see if there are any JS errors coming up?
0
LajuanTaylorCommented:
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
0
lantervAuthor Commented:
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)
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Rainer JeschorCommented:
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
0
lantervAuthor Commented:
Generated source.
pagesource.txt
0
Rainer JeschorCommented:
Hi,
OK, thanks. I am missing a lot of referenced ColdFusion files, but all three events fire locally as well.

I would suggest to use Chrome, clear all caches, open the dev tool and the open the page. Any errors reported?
Missing files?

Question: are you sure that you want to have all that submit and callback functions inside the document.ready function?

Thanks.
Rainer
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
lantervAuthor Commented:
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.
0
lantervAuthor Commented:
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.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.