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:
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>
</td>
<td>
</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: "®_profitmarginx=" + $('#reg_profitmargin').val() + "&ot_profitmarginx=" + $('#ot_profitmargin').val() + "®ular_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;
}
});
});
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
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
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)
"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)
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
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
ASKER
Generated source.
pagesource.txt
pagesource.txt
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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.
No, I'm not sure about where to put the document.ready function.
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.