Why don't my jQuery scripts execute in my templates?

Report · May 16, 2014

Hi,

I am trying to use JQuery in my cfm code for an input form.

JQuery Code:

CFQuery:

Input Object code:

The object is to generate a pseudo SSN based on the last digit used stored in a database table row if the checkbox is checked.

The output looks like this:

It doesn't seem to do anything to check and uncheck the box but throws no errors. Running the debuggers doesn't seem to even step into the jquery code.???? This isn't the first time I have tried to use JQuery selectors without success in my cf code...

HELP!

Thanks,

Nathan Manning

Report · May 17, 2014

As you know, ColdFusion serves out HTML to the web browser and does not know anything about jQuery. jQuery is JavaScript, and runs client-side in this case. Have you established that the jQuery click event is being captured? If you place an alert() in the code, can you see it when you click the GenSSN button? I also assume you have JavaScript debugging enabled - are there any errors? I notice too that you use ## - is your JavaScript inside a <cfoutput> tag? Otherwise, just a single # should be used to place the CF values inside your script.

Report · May 17, 2014

I removed the extra hashes, and place alerts all through the script. No Joy, no alerts.

Report · May 17, 2014

Here is the entire code for the template:

<!----------------------------------------------------------------!

-- by Aortic Solutions LLC, Richard Sieller, --!

-- and Partners. Virginia Beach, Virginia, --!

-- United States of America --!

---------------------------------------------------------------->

SELECT RaceID, RaceName

FROM dbo.Races

ORDER BY RaceName

SELECT State, StateName

FROM dbo.States

ORDER BY StateName

SELECT ID, Name

FROM PreferredCommunication

ORDER BY ID

SELECT LastGeneratedSSN AS SSN

FROM AppConfig

WHERE ID = 0

<html>

<head>

<title>

Patient Information Form

</title>

</script>

function LZeroPad ( var num, var length ){

var snum = String(num);

var pad = '000000000000000000000000000000000000000'

return concat(pad.substr(0, length - snum.length), snum)

};

$(document).ready(function () {

alert("In jQuery");

$('#GenSSN').Click(function (){

alert("In Click function")

if this.Attr('Checked', True){

$('#SSN').Text(Concat('000-00-', LZeroPad('#LastGenSSN.SSN#' + 1, 4)))

.prop('Disabled', True);

alert("Processed True");

}

else {

$('#SSN').Text('').prop('Disabled', False);

alert("processed false");

});

</script>

</head>

<body>

<table width="60%" border="0" cellspacing="5" cellpadding="5"

align="center">

<tr>

<h2>

Patient Information Form

</h2>

</th>

</tr>

<tr>

<td>

<br/>

</td>

</tr>

<tr>

<td>

Social Security Number

</td>

<td>

<cfinput name="SSN" id="SSN" type="text" size="12" maxlength="11"

required="yes" message="You must type a valid social security number."

validate="social_security_number" validateat="onSubmit,onServer"/>

<cfinput name="GenSSN" id="GenSSN" type="checkbox" value="0"

tooltip="Check to generate a psuedo-SSN"/>

Generate Psuedo SSN?

</td>

</tr>

<tr>

<td>

Institution ID

</td>

<td>

<cfinput name="PatientID" type="text" size="10" maxlength="7"

required="yes" message="You must type an Aortic Institute Number or enter '0'"

validate="integer" validateat="onSubmit,onServer">

(format: whole number)

</strong>

</td>

</tr>

<tr>

<td>

Electronic Medical Record Number

</td>

<td>

<cfinput name="EMR" type="text" size="11" maxlength="10"

required="no" validateat="onSubmit,onServer">

(format: MR-9999999)

</strong>

</td>

</tr>

<tr>

<td>

Last Name

</td>

<td>

<cfinput name="LastName" type="text" size="25" maxlength="25"

required="yes" message="You must type a last name." validateat="onSubmit,onServer">

</td>

</tr>

<tr>

<td>

First Name

</td>

<td>

<cfinput name="FirstName" type="text" size="25" maxlength="25"

required="yes" message="You must type a first name." validateat="onSubmit,onServer">

</td>

</tr>

<tr>

<td>

Middle Name

</td>

<td>

<cfinput name="MiddleName" type="text" size="25" maxlength="25"

required="no">

(Optional Field)

</strong>

</td>

</tr>

<tr>

<td>

Birth Date

</td>

<td>

<cfinput name="DOB" type="text" size="25" maxlength="10"

validate="date" required="yes" message="You must type a valid birth date."

validateat="onSubmit,onServer">

(format: mm/dd/yyyy)

</strong>

</td>

</tr>

<tr>

Gender

</td>

<cfinput type="radio" name="Gender" value="M" required="yes"

message="You must select a value for gender." validateat="onSubmit,onServer">

Male

<br>

<cfinput type="radio" name="Gender" value="F" required="yes"

message="You must select a value for gender." validateat="onSubmit,onServer">

Female

</td>

</tr>

<tr>

Race

</td>

<cfselect name="RaceID" query="SelectRaces" value="RaceID" display="RaceName"

queryposition="Below">

Please select a race:

</option>

</cfselect>

</td>

</tr>

<tr>

<td>

Height

</td>

<td>

<cfinput name="Height" type="text" size="5" maxlength="5"

validate="numeric" validateat="OnSubmit, OnServer"/>

in.

(format: NN.N)

</strong>

</td>

</tr>

<tr>

<td>

Weight

</td>

<td>

<cfinput name="Weight" type="text" size="5" maxlength="5"

validate="numeric" validateat="OnSubmit, OnServer"/>

lbs.

(format: NNN.N)

</strong>

</td>

</tr>

<tr>

<td>

Street Address

</td>

<td>

<cfinput name="StreetAddress" type="text" size="50" maxlength="100"

required="no">

</td>

</tr>

<tr>

<td>

City

</td>

<td>

<cfinput name="City" type="text" size="30" maxlength="50"

required="no">

</td>

</tr>

<tr>

<td>

State

</td>

<td>

<cfselect name="State" query="SelectStates" value="State" display="StateName"

queryposition="Below" selected="CT">

</option>

</cfselect>

</td>

</tr>

<tr>

<td>

Zip Code

</td>

<td>

<cfinput name="ZipCode" type="text" size="20" maxlength="12"

required="no" message="You must type a valid zip code." validate="zipcode"

validateat="onSubmit,onServer">

</td>

</tr>

<tr>

<td>

Phone Number

</td>

<td>

<cfinput name="Phone" type="text" size="20" maxlength="20"

required="no" message="You must type a valid phone number." validate="telephone"

validateat="onSubmit,onServer">

(format: xxx-xxx-xxxx)

</strong>

</td>

</tr>

<tr>

<td>

Email Address

</td>

<td>

<cfinput name="Email" type="text" size="30" maxlength="50"

required="no" validateat="onsubmit,onserver" validate="email"

message="You must type a valid email address.">

</td>

</tr>

<tr>

<td>

Preferred method of communication:

</td>

<td>

<cfselect name="PreferredCommunicationID" query="SelectPreferredComm" value="ID"

display="Name" selected="0"/>

</td>

</tr>

<tr>

<td>

Chart Reviewed?

</td>

<td>

Yes

No

</td>

</tr>

<tr>

<td>

Date of Last Review

</td>

<td>

<cfinput name="LastReviewDate" type="datefield" validate="date" validateat="onServer,onSubmit"

message="Enter a valid date."/>

</td>

</tr>

<tr>

</td>

</td>

</tr>

<tr>

</td>

</tr>

</table>

</cfform>

</body>

</html>

Report · May 17, 2014

This code has a lot of JavaScript bugs - you need to enable your JavaScript debugger

I corrected a few errors (missing brackets etc) and saw the "in jQuery" alert appear, however your Click() functions all look deprecated. jQuery has other ways of doing these now, so best read up on those. So, your issue is JavaScript errors basically and not the ColdFusion itself. Re-check all your code. Remove var from the parameters in the function, and also be aware that "length" is a reserved word, so perhaps use something else (though it will work if you remove the var statement). Good luck.

Report · May 17, 2014

I thought I did have it enabled in CF Admin.

I admit that I am a novice at JavaScript, C/C++/C## are my native languages. I forget that JavaScript is not strongly typed... Of course it is not, it is interpreted.

Thanks, I will work on it. I had checked my parentheses with the pair matching, but I will export it to Notepad++ where I can see it better.

Report · May 18, 2014

JavaScript is run in the browser so you need to enable debugging in your browser, not in ColdFusion. Go to jQuery.com for the latest API.

Report · May 18, 2014

First, Thanks for bothering with me. I am going to take this to a JQuery/JavaScript forum, but I wanted to tell you that using the F12 developer tools, I don't even get an error. I try to set a breakpoint in the script and it tells me it won't be hit?

I am frustrated as hell.

Nathan

Report · May 18, 2014

If I reintroduce the var's on the function parameters, in Chrome F12 Developer Tools I see this error straight away in my test script using your code:

Uncaught SyntaxError: Unexpected token var

If I go here to jQuery.com to look at the click() function, it is lower case - see http://api.jquery.com/click/

Report · May 18, 2014

I removed an extra set of }); and got the in JQuery alert. Changed the click() to lower case and got the in click alert.

Making progress, Will try to use debugger again in Chrome instead of IE.

Thanks.

Code now looks like this:

function LZeroPad ( num, length ){

var snum = String(num);

var pad = '000000000000000000000000000000000000000'

return concat(pad.substr(0, length - snum.length), snum)

};

$(document).ready(function() {

alert("In jQuery");

$('#GenSSN').click(function (){

alert("In Click function");

if ($('#GenSSN').is(':checked')){

$('#SSN').Text(Concat('000-00-', LZeroPad('#LastGenSSN.SSN#' + 1, 4)))

.prop('Disabled', True);

alert("Processed True");

}

else {

$('#SSN').Text('').prop('Disabled', False);

alert("processed false");

}

});

</script>

Report · May 18, 2014

As Tribule says, there are a lot of mistakes. You should have seen at least some.

For example, Javascript is case-sensitive, and Concat, True, False, Click, Checked, Disabled, Text, and Attr should be in lower case. Furthermore, the functions, String() and concat, are incorrectly used here. LastGenSSN.SSN is a ColdFusion variable, yet it is used in Javascript. Even allowing for that, '#LastGenSSN.SSN#' + 1 attempts to add a string to a number. Elsewhere, the function val() should take the place of text().

Putting the corrections together:

function LZeroPad(num, len){

var snum = num.toString();

var pad = '000000000000000000000000000000000000000';

return pad.substr(0, len - snum.length).concat(snum);

};

$(document).ready(function () {

alert("In jQuery");

$('#GenSSN').click(function (){

alert("In Click function");

if (this.checked){

/* Conversion from Coldfusion variable to Javascript variable*/

<cfoutput>#toScript(lastGenSSN, "jsSSN")#</cfoutput>

$('#SSN').val('000-00-'.concat(LZeroPad(jsSSN+1, 4)));

$('#SSN').prop('disabled', true);

alert("Processed True");

}

else {

$('#SSN').val('');

$('#SSN').prop('disabled', false);

alert("processed false");

}

});

</script>

Report · May 18, 2014

Thanks to both of you.

BKBK.

I didn't expect anyone to rewrite the code for me, but seeing what you did and how it works helps me a great deal. And, you ended my nightmare.

I have always been a middleware, backend guy at least for twenty years, and this browser coding is new for me...

Many thanks again,

Nathan in Huntsville AL

Report · May 18, 2014

One last question?

How do I then convert the incremented jsSSN back to a ColdFusion variable that I can use to update the database record it came from?

I tried a couple of ways including using <cfset LastGenSSN = #ToString(jsSSN)# />

Report · May 18, 2014

NatheManning wrote:

One last question?

How do I then convert the incremented jsSSN back to a ColdFusion variable that I can use to update the database record it came from?

I tried a couple of ways including using <cfset LastGenSSN = #ToString(jsSSN)# />

The code fails because the variable jsSSN is on the client, whereas ColdFusion runs on the server. AJAX is currently the commonest way to pass variables from Javascript to ColdFusion. That involves one extra request to the server.

Suppose you want the code that updates the database to run in the page updateSSN.cfm. You could do it as follows.

updateSSN.cfm

UPDATE myTable

SET ssn = <cfqueryparam value="#URL.ssn#" cfsqltype="cf_sql_varchar">

WHERE some_column=some_value;

</cfquery>

You now need to assign the value jsSSN to the variable ssn, and send it as a URL variable. Put the Javascript code that does this in the section where jsSSN is defined.

if (this.checked){

/* Conversion from Coldfusion variable to Javascript variable*/

<cfoutput>#toScript(lastGenSSN, "jsSSN")#</cfoutput>

$('#SSN').val('000-00-'.concat(LZeroPad(jsSSN+1, 4)));

$('#SSN').prop('disabled', true);

alert("Processed True");

$.ajax({

url: "updateSSN.cfm",

type:"get",

data:{ssn:jsSSN},

success: function(response) {

//Do Something

},

error: function(xhr) {

//Do Something to handle error

}

});

}

Report · May 18, 2014

Actually, I don't want it update unless the user has posted the form with submit, So I am trying to set the value in a hidden text input. But what gets in the input variable is "51,0" not "51". Do you know why that would be?

$(document).ready(function () {

$('#GenSSN').click(function (){

<cfoutput>#toScript(GenSSN, "jsSSN")#</cfoutput>

if (this.checked){

/* Conversion from Coldfusion variable to Javascript variable*/

$('#SSN').val('000-00-'.concat(LZeroPad(++jsSSN, 4)));

$('#SSN').prop('readonly', true);

}

else {

$('#SSN').val('');

$('#SSN').prop('readonly', false);

}

$('#FormLastGenSSN').val(jsSSN.toString());

});

Report · May 18, 2014

I wonder why the 51 comes in as 51,0 instead. Perhaps something to do with your locale? In any case, if you insist on an integer, then apply the Javascript function parseInt(string_to_convert_to_integer).

Report · May 18, 2014

Values that come in like "51,0" are commonly multiple HTML fields that are named the same, check that first perhaps. CFDUMP the form scope and see all the values for clues.

Report · May 18, 2014

Tribule -

That was indeed the case, Now all my code for this cludge works as expected, I'd mark your responses as correct answers, but I can only check one of them,

Thanks to both of you!!

Adobe Community

Why don't my jQuery scripts execute in my templates?

1 Correct answer