17 Replies Latest reply: May 18, 2014 12:47 PM by NatheManning RSS

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

    NatheManning Community Member

      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

        • 1. Re: Why don't my jQuery scripts execute in my templates?
          tribule Community Member

          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.

          • 2. Re: Why don't my jQuery scripts execute in my templates?
            NatheManning Community Member

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

            • 3. Re: Re: Why don't my jQuery scripts execute in my templates?
              NatheManning Community Member

              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>

              • 4. Re: Why don't my jQuery scripts execute in my templates?
                tribule Community Member

                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.

                • 5. Re: Why don't my jQuery scripts execute in my templates?
                  NatheManning Community Member

                  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.

                  • 6. Re: Why don't my jQuery scripts execute in my templates?
                    tribule Community Member

                    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.

                    • 7. Re: Why don't my jQuery scripts execute in my templates?
                      NatheManning Community Member

                      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

                      • 8. Re: Why don't my jQuery scripts execute in my templates?
                        tribule Community Member

                        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/

                        • 9. Re: Re: Why don't my jQuery scripts execute in my templates?
                          NatheManning Community Member

                          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:

                           

                          <script>

                           

                          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>

                          • 10. Re: Why don't my jQuery scripts execute in my templates?
                            BKBK CommunityMVP

                            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>

                            • 11. Re: Why don't my jQuery scripts execute in my templates?
                              NatheManning Community Member

                              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

                              • 12. Re: Why don't my jQuery scripts execute in my templates?
                                NatheManning Community Member

                                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)# />

                                • 13. Re: Why don't my jQuery scripts execute in my templates?
                                  BKBK CommunityMVP

                                  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

                                          }

                                      });

                                  }

                                  • 14. Re: Why don't my jQuery scripts execute in my templates?
                                    NatheManning Community Member

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

                                     

                                    });

                                     

                                    });


                                    • 15. Re: Why don't my jQuery scripts execute in my templates?
                                      BKBK CommunityMVP

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

                                      • 16. Re: Why don't my jQuery scripts execute in my templates?
                                        tribule Community Member

                                        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.

                                        • 17. Re: Why don't my jQuery scripts execute in my templates?
                                          NatheManning Community Member

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