CODEWITHSUNDEEP
javascriptcoldfusioncoldbox
chefjeff
chefjeff

Reputation: 45

Running javascript unsuccessfully inside of Coldfusion cfoutput tag

I am making a form editor in Coldfusion and I want to use inline script tags to dynamically add Javascript event listeners. The structure of my code looks a bit like the following:

<cfoutput>
...
     <cfloop>
          <cfset FormElementPK = rc.formElements.getRow(i)["FormElementsPK"]>
          <script>
               //Create a listener for the question text editor to check for errors on blur
               var #toScript(FormElementPK, "jsFormElementPK")#;
               var inputField = document.getElementById("##question" + jsFormElementPK + "TextEditor");
               $("##question" + jsFormElementPK + "TextEditor").on('blur', function(e) {
                                alert("I am a test message!");
                                checkQuestionTextForErrors(inputField.id);
                            });         
          </script>
          ...
     </cfloop>
...
</cfoutput>

EDITED: Added correct concatenation by credit of Will Belden

The intended effect of this code is for each element in my form, I want to be able to detect when a textarea element loses focus (onblur event in jquery). This code does not work, however.

It does work when I remove the use of the FormElementPK variable and just reference the "#questionXTextEditor" variable in a hardcoded manner like "#question1TextEditor". However, I need to dynamically generate my list of questionTextEditor elements, so I feel like I need to reference the FormElementPK variable from coldfusion.

Upvotes: 1

Views: 109

Answers (2)

chefjeff
chefjeff

Reputation: 45

This question was answered within a slack channel. Effectively, if you want to use a JQuery selector ( the $() part of the code), you need to reference elements that already exist in the document. The questionXTextEditor elements referenced in the javascript were BELOW the script that was referencing them, so I moved the script below the questionXTextEditor elements and it started to work. Here's the slack convo that solved the problem:

enter image description here

Upvotes: 0

Will Belden
Will Belden

Reputation: 658

You are missing a + sign in this line:

Wrong:    document.getElementById("##question" + jsFormElementPK "TextEditor");
Right:    document.getElementById("##question" + jsFormElementPK + "TextEditor");

While this isn't an answer, I highly recommend learning to use external .js files instead of doing CF inline code. While it's quick and dirty, in the long run you'll find that you're sending a lot of code to the browser with every request.

I will often have some sort of

<script>MySite.ThisScreen.MinFiles = 1;</script>

type setup in the CF output, but then my .js file will have a loadVars() function to look for those. Then you keep all your JS separate from your CF. It'll also force you to write better Javascript long term.

Hope the answer above helps you solve your issue.

Upvotes: 3

Related Questions