We help IT Professionals succeed at work.

Jquery CFML - CFtextarea value - form serialize

lantervj
lantervj asked
on
I'm using
    $('#candidatediv').on('click','#candidatesubmit', function () {
      var strForm = $("form").serialize();
      $.ajax({
        type: 'POST',
        url: 'actEditStatusForm.cfm',
        data: 'form=' + strForm,
        error: function (xhr, textStatus, errorThrown){
        	// show error 
        	alert(errorThrown);},
        success: function (response1, textStatus, jqXHR){
      	ColdFusion.Grid.refresh('candidatesGrid', true);}
      });
    });

Open in new window


and the value of the cftextarea is the original value.  It does not show the changed value.

<cfset body_temp = "" />
<cftextarea name="candidate_profile" richtext="true" value="#body_temp#" width="1000" height="600" html="true">#CandidateInfo.profile#</cftextarea>

Open in new window


I'm not clear why body_temp is set to "" and used for the value attribute.
Comment
Watch Question

CERTIFIED EXPERT
Most Valuable Expert 2015

Commented:
From what I can see, the value of "body_temp" is always an empty string.

ie
     <cfif CandidateInfo.profile EQ "">
        <cfset body_temp = '' />
     <cfelse>
           <cfset body_temp = "" />
     </cfif>

Also, I'm not sure which variable you're trying to use. But I think you're only supposed to set the value of the textarea in one place

ie Either using "value"
         <cftextarea value="#body_temp#" ... />

... or in the tag body
          <cftextarea ... >#CandidateInfo.profile#</cftextarea>

.. but not both
         <cftextarea value="#body_temp#" ... >#CandidateInfo.profile#</cftextarea>

Author

Commented:
Using the following;

<cfif CandidateInfo.profile eq "">
<cfset CandidateInfo.form_text = ReReplace(#CandidateInfo.form_text#,"!Todays Date!","#dateformat(now(),"mmmm D, yyyy")#")>
<cfset CandidateInfo.form_text = ReReplace(#CandidateInfo.form_text#,"!candidatename!","#CandidateInfo.fullname#","all")>
<cftextarea name="candidate_profile" richtext="true" width="1000" height="600" html="true">#CandidateInfo.form_text#</cftextarea>
<cfelse>
<cfset CandidateInfo.profile = ReReplace(#CandidateInfo.profile#,"!Todays Date!","#dateformat(now(),"mmmm D, yyyy")#")>
<cfset CandidateInfo.profile = ReReplace(#CandidateInfo.profile#,"!candidatename!","#CandidateInfo.fullname#","all")>
<cftextarea name="candidate_profile" richtext="true" width="1000" height="600" html="true">#CandidateInfo.profile#	</cftextarea>
</cfif>

Open in new window


The post shows the element "candidate_profile" with the original value I display.  It does not show the changed value.
CERTIFIED EXPERT
Most Valuable Expert 2015
Commented:
Maybe it's related to the rich text editor? Some editors like tinyMC store the raw textarea value somewhere else.  In which case serialize() wouldn't pick up the right value. See this thread for details.

I can't test it right now, but try binding the textarea to a hidden field. Then use the hidden field's value instead. Something like

        <cftextarea name="candidate_profile" ...>

        <cfinput type="hidden" name="candidate_profile_actualValue"
             bind="{candidate_profile} /">
CERTIFIED EXPERT

Commented:
very first thing:

data: 'form=' + strForm,

write is as:

data:strForm,

 because you are already declaring the var strForm = form.serialize()

now ur cftextarea Tag:

if you want to use cftextarea tag, use its own value attribute, do not write anything between the opening and closing cftextarea tag:

also on the server page use the cfdump var="#form#">

and view in firebug HTML what u see in dump,

try it and get back here

Author

Commented:
This is where I usually end up doing/not doing what was asked of me.   The dump shows the value of candidate_profile as the original value.  I blanked out the text area and keyed in "xxxxxxxxxxxxxxxxx"  and that is not what was passed to the action page.

<cfif CandidateInfo.profile eq "">
					<cfset CandidateInfo.form_text = ReReplace(#CandidateInfo.form_text#,"!Todays Date!","#dateformat(now(),"mmmm D, yyyy")#")>
					<cfset CandidateInfo.form_text = ReReplace(#CandidateInfo.form_text#,"!candidatename!","#CandidateInfo.fullname#","all")>
					<cftextarea name="candidate_profile" richtext="true" width="1000" height="600" html="true" value="#CandidateInfo.form_text#">
					
					</cftextarea>
				<cfelse>
					<cfset CandidateInfo.profile = ReReplace(#CandidateInfo.profile#,"!Todays Date!","#dateformat(now(),"mmmm D, yyyy")#")>
					<cfset CandidateInfo.profile = ReReplace(#CandidateInfo.profile#,"!candidatename!","#CandidateInfo.fullname#","all")>
					<cftextarea name="candidate_profile" richtext="true" width="1000" height="600" html="true" value="#CandidateInfo.profile#">
					
					</cftextarea>
				</cfif>

Open in new window


Just FYI;   this is what candidate_profile shows in the dump;

<p> </p><div align="center" style="text-align: center;"> </div> <div style="text-align: left;"><img src="http://www.hinc.com/assets/images/logo_main.jpg" alt="" />                                                                                                          March 1, 2012</div> <div align="center" style="text-align: center;"> </div> <div align="center" style="text-align: center;"> </div> <div align="center" style="text-align: center;"> </div> <div align="center" style="text-align:center"><b>CANDIDATE PROFILE</b></div><div align="center"
firebugscreenshot.JPG
CERTIFIED EXPERT
Most Valuable Expert 2015

Commented:
As I mentioned earlier, the richtexteditor might be the cause .. If the editor stores the current content somewhere else - and serialize uses the "value" attribute, that could be why you're seeing the old value.  Did you try what I suggested?

ie
- Bind the textarea to a separate form field.
- Make a change to ensure the other field is updated
- then submit the form.

What value does the new field contain?

Author

Commented:
Heck no.  I went to take a nap.  I just couldn't look at it anymore.  But, it worked like a charm.  Every time I looked at Firebug I would wonder about all those FCKeditor calls.  If I wasn't so far behind I would research an alternative.  That's how I end up with so-so code.

Author

Commented:
Good catch!
CERTIFIED EXPERT
Most Valuable Expert 2015

Commented:
Heck no.  I went to take a nap.  I just couldn't look at it anymore.  

Lol, I so know the feeling!  Glad it worked out.
CERTIFIED EXPERT
Most Valuable Expert 2015

Commented:
If I wasn't so far behind I would research an alternative.  That's how I end up with so-so code.

I'm not sure you have a choice if you want to use jquery, because you're trying to get 2 different libraries (fckeditor and jquery) to work together.

Most rich text editors work by stealing control of the standard DOM "value" property. If you were posting with ColdFusion.navigate(...) it would handle the mechanics for you and submit the "new" value. But since you're using jquery,  you have to do a little extra for compatibility.  You need to push the "new value" out of the editor's buffer and into the standard DOM "value" property before calling serialize(). Either with javascript or a hidden field.

Here's an ugly example of what I mean. There's probably a slicker method in the FCKEditor API .. but I don't know it well enough to know that is.

<html>
<head>
<script type="text/javascript">
      function test() {
            // we must access the textarea by "name" because CF ignores the "ID"
            // you enter and assigns its own randomly generated value
            var textarea = document.getElementById('myForm').myTextArea;
            alert("OLD VALUE:\n"+ textarea.value);        
            // transfer new text from the rich text editor into the DOM element  
            textarea.value = ColdFusion.getElementValue('myTextArea');
            alert("NEW VALUE:\n"+ textarea.value);        
      }
</script>
</head>
<body>
<cfform id="myForm" name="myForm">
      <cftextarea id="myTextArea" richtext="true" name="myTextArea">old value</cftextarea>
      <cfinput type="button" name="testButton" value="Test" onClick="test()">
</cfform>
</body>
</html>

Author

Commented:
Thank you very much.  Great info.  Good point.
CERTIFIED EXPERT
Most Valuable Expert 2015

Commented:
Welcome.  Knowing what works (or doesn't) is good.. knowing why is even better imo ;-)

Explore More ContentExplore courses, solutions, and other research materials related to this topic.