<cfinput> string inside a javascript block causing issues

Question

I have the following jQuery (admittedly messy at the moment) which appends a new row to a table. However, it's not inserting the <cfinput> field. In fact, somehow coldfusion is reading that tag inside the javascript block because it throws a CF error.

Context validation error for tag cfinput.The tag must be nested inside a cfform tag

If I change it to a normal <input>, then the problems go away and the field is inserted.

I need the <cfinput> to make use of ColdFusion's native date picker. Regardless, I'm curious why this is happening.

    $(".aAddLine").click(function(e){   
                var clickedID = $(this).attr("id");
                var lineNo = parseInt(clickedID.split("_")[1])
                var newLineNo = parseInt(lineNo+1)
                var x = "";
                $('#tdPlus_' + lineNo).html("");
                x += '<tr>';
                x += '<td width="50" class="tdPlus' + newLineNo + '"><a class="aAddLine" id="aAddLine_' + newLineNo + '" href="##">+ Line</a></td>';
                x += '<td valign="top">Date</td>';
/*issue with the <cfinput> on the line below */
                x += '<td><cfinput class="dt validate" type="datefield" name="startDate" id="startDate_' + newLineNo + '" validate="eurodate" mask="dd/mm/yyyy" />&nbsp;<span class="res" id="resStartDate_' + newLineNo + '"> <span class="hint"></span></span></td>';
                x += '<td style="width:10px">&nbsp;</td>';
                x += '<td>Time</td>'
                x += '<td><input class="validate" type="datefield" name="startTime_' + newLineNo + '" id="startTime_' + newLineNo + '" style="width:35px;"/>&nbsp;<span class="res" id="resStartTime_' + newLineNo + '"></span>&nbsp;to&nbsp;<input class="validate" type="datefield" name="endTime_' + newLineNo + '" id="endTime_' + newLineNo + '" style="width:35px;"/>&nbsp;<span class="res" id="resEndTime_' + newLineNo + '""></span></td>'
                x += '</tr>'
                $('#tblItem > tbody:last').append(x);
                e.preventDefault();
                e.stopPropagation();
            });

Any help appreciated!

Jason Dean · Accepted Answer · 2011-11-03 05:14:37Z

6

You cannot add CF form tags via JavaScript. JavaScript happens in the browser LONG after ColdFusion has done any processing it needs to do. By that time anything that was a CFINPUT tag (or any ColdFusion tag) has now been converted to HTML.

If you need to dynamically add fields to a form, just add regular old HTML form elements. Look at the source code in the browser and you will see that is what is being delivered to the browser. Neither JS or the browser have any idea what ColdFusion or CFINPUT are.

answered Nov 3, 2011 at 5:14

Jason Dean

9,62529 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Jason Dean Over a year ago

I'm really curious why someone downvoted this answer. Am I inaccurate in anyway? Please leave a comment.

Stefano D Over a year ago

The user wanted to know why his code was erroring, you didn't touch on that. Yes you explained what he was doing was wrong but his main question or concern IMO was "Regardless, I'm curious why this is happening." and you answer didn't help, so to me that's a down vote.

Jason Dean Over a year ago

So explaining that what the user was trying to do was completely wrong in the first place isn't helpful? You're right, I did not explain why it was throwing an error. But the rest of my answer is still helpful. Instead of a downvote you could edit my answer with the additional information. That improves the quality of the answer (which is the point of a wiki answer). Unless you're just more interested in upping your own reputation by trying to get your answer selected instead of mine, then you're on the right track.

Stefano D Over a year ago

I currently don’t have privilege to edit answers or questions, so I don’t do so. Even if I did (have privilege) I wouldn’t edit someone's answer if I felt they completely missed the original question because some of his information was helpful. Also at the time that I posted my answer both you and Pretish had posted seemingly similar answers and IMO neither of you addressed the original question. So who’s answer should I have edited, both? No, I wrote my own and voted down because you missed the question. In retrospect I shouldn’t have voted down your answer.

Peter Boughton Over a year ago

If you don't feel like editing (which is fair enough), you can/should leave a comment on the answer with the most upvotes to say what you think needs changing, and on any related ones just say "see what I said to X". If you're going to add a new answer (also fair enough), it's a good idea to encompass points covered by existing answers (and if necessary state why they are incomplete/lacking). Avoid downvoting competing answers unless they are actively wrong/harmful (rather than just incomplete or missing the point).

Stefano D · Accepted Answer · 2011-11-03 19:41:11Z

2

I’m assuming the page that contains the JS is a ColdFusion page, so it tries to parse anything with "<CF". Looking at your code, cfinput is a valid ColdFusion tag and it’s not within a cfform making the code invalid, so when CF tries to render your page for the first time it errors.

Like the others have stated, having a cfinput at that level won't work and you should just use a jQuery plugin or get the contents of the <cfinput> via aJax or some other way.

edited Nov 3, 2011 at 19:41

answered Nov 3, 2011 at 19:35

Stefano D

9585 silver badges17 bronze badges

Comments

Pritesh Patel · Accepted Answer · 2011-11-03 05:26:38Z

0

CFINPUT is coldfusion tag and process at the time of ColdFusion page is compiling and when you are try to add it through jQuery (Using javascript) it doesn't process by ColdFusion as you are working at Browser level and Server do not have any idea about this. And in this case CFINPUT is not a valid HTML tag.

answered Nov 3, 2011 at 5:26

Pritesh Patel

2,0191 gold badge19 silver badges33 bronze badges

Collectives™ on Stack Overflow

<cfinput> string inside a javascript block causing issues

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related