Skip to main content
N
NatheManning
Inspiring
May 17, 2014
Answered

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

  • May 17, 2014
  • 1 reply
  • 1411 views

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

    This topic has been closed for replies.
    Correct answer BKBK

    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.


    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:

    <cfset lastGenSSN = LastGenSSN.SSN><!--- Coldfusion variable --->

    <script>

    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>

    1 reply

    T
    tribule
    Brainiac
    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.

    N
    NatheManningAuthor
    Inspiring
    May 17, 2014

    Here is the entire code for the template:

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

      -- COPYRIGHT 2009-2014, ALL RIGHTS RESERVED --!

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

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

      -- United States of America --!

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

    <cfparam name="SESSION.LoggedIn" default="">

    <cfif SESSION.LoggedIn NEQ "Yes">

    <cflocation url="ccta_login.cfm">

     

    <cfquery name="SelectRaces" datasource="#Application.CCTA#">

    SELECT RaceID, RaceName

    FROM dbo.Races

    ORDER BY RaceName

    <cfquery name="SelectStates" datasource="#Application.CCTA#">

    SELECT State, StateName

    FROM dbo.States

    ORDER BY StateName

    <cfquery name="SelectPreferredComm" datasource="CCTA">

    SELECT ID, Name

    FROM PreferredCommunication

    ORDER BY ID

    <cfquery name="LastGenSSN" datasource="CCTA">

    SELECT LastGeneratedSSN AS SSN

    FROM AppConfig

    WHERE ID = 0

    <html>

    <head>

    <title>

    Patient Information Form

    </title>

    <link href="CCTAstyles.css" rel="stylesheet" type="text/css">

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">

    </script>

    <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>

    <cfinclude template="logo.inc">

    <cfform name="patient_form" method="post" action="patient_info_process.cfm">

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

    align="center">

    <tr>

    <th colspan="2">

    <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">

    <strong>

    (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">

    <strong>

    (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">

    <strong>

    (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">

    <strong>

    (format: mm/dd/yyyy)

    </strong>

    </td>

    </tr>

    <tr>

    <td valign="top">

    Gender

    </td>

    <td valign="top">

    <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>

    <td valign="top">

    Race

    </td>

    <td valign="top">

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

    queryposition="Below">

    <!--- Add an option for no selection. --->

    <option value="">

    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.

    <strong>

    (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.

    <strong>

    (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">

    <!--- Add an option for no selection. --->

    <option value="">

    </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">

    <strong>

    (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>

    <cfinput name="ChartReviewed" type="radio" value="1"/>

    Yes

    <cfinput name="Chartreviewed" type="radio" value="0" checked="true"/>

    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 valign="top">

     

    </td>

    <td valign="top">

     

    </td>

    </tr>

    <tr>

    <td colspan="2" align="center">

    <input type="submit" name="Submit" value="Submit Patient Information">

    <input type="reset" name="Reset" value="Reset Patient Information">

    </td>

    </tr>

    </table>

    </cfform>

    <cfinclude template="footer.htm">

    </body>

    </html>

    N
    NatheManningAuthor
    Inspiring
    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

    <cfquery datasource="myDSN" name="editSSN">

    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

            }

        });

    }


    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());

    });

    });


    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices