Solved

Jquery CFML - CFtextarea value - form serialize

Posted on 2012-03-12
12
543 Views
Last Modified: 2012-03-13
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.
0
Comment
Question by:lantervj
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 5
12 Comments
 
LVL 52

Expert Comment

by:_agx_
ID: 37711093
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>
0
 

Author Comment

by:lantervj
ID: 37711396
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.
0
 
LVL 52

Accepted Solution

by:
_agx_ earned 500 total points
ID: 37712026
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} /">
0
Guide to Performance: Optimization & Monitoring

Nowadays, monitoring is a mixture of tools, systems, and codes—making it a very complex process. And with this complexity, comes variables for failure. Get DZone’s new Guide to Performance to learn how to proactively find these variables and solve them before a disruption occurs.

 
LVL 16

Expert Comment

by:Gurpreet Singh Randhawa
ID: 37712049
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
0
 

Author Comment

by:lantervj
ID: 37712111
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
0
 
LVL 52

Expert Comment

by:_agx_
ID: 37712450
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?
0
 

Author Comment

by:lantervj
ID: 37712692
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.
0
 

Author Closing Comment

by:lantervj
ID: 37712694
Good catch!
0
 
LVL 52

Expert Comment

by:_agx_
ID: 37712714
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.
0
 
LVL 52

Expert Comment

by:_agx_
ID: 37712854
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>
0
 

Author Comment

by:lantervj
ID: 37714657
Thank you very much.  Great info.  Good point.
0
 
LVL 52

Expert Comment

by:_agx_
ID: 37717605
Welcome.  Knowing what works (or doesn't) is good.. knowing why is even better imo ;-)
0

Featured Post

Guide to Performance: Optimization & Monitoring

Nowadays, monitoring is a mixture of tools, systems, and codes—making it a very complex process. And with this complexity, comes variables for failure. Get DZone’s new Guide to Performance to learn how to proactively find these variables and solve them before a disruption occurs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Fixing some Issues with regex again 9 42
Database structure 4 155
Update cached table in H2 database 6 82
Lucee & <cftransaction.... />  WITAF? 10 30
The technique is by far very Simple! How we can export the ColdFusion query results to DOC file?  Well before writing this I researched a lot in Internet but did not found a good Answer anyways!  So i thought now i should share my small snippet w…
Today, I was working on some optimization and spam-stopping techniques when I encountered Ben Nadel's post to reduce spam feature using Math (http://www.bennadel.com/blog/197-How-I-Stop-Spammers-On-My-ColdFusion-Blog.htm). While this method is not o…
A short tutorial showing how to set up an email signature in Outlook on the Web (previously known as OWA). For free email signatures designs, visit https://www.mail-signatures.com/articles/signature-templates/?sts=6651 If you want to manage em…
In an interesting question (https://www.experts-exchange.com/questions/29008360/) here at Experts Exchange, a member asked how to split a single image into multiple images. The primary usage for this is to place many photographs on a flatbed scanner…

749 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question