Solved

Jquery CFML - CFtextarea value - form serialize

Posted on 2012-03-12
12
541 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
  • 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
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 
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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

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

Suggested Solutions

Hi, I will be creating today a basic tutorial on how we can create a Mail Custom Function and use it where ever we want. The main advantage about creating a custom function is that we can accommodate a range of arguments to pass to the Function and …
PROBLEM: How to add your own buttons to the bottom toolbar with paging info ( result count ). While creating a cfgrid, I ran into an issue where I wanted to embed my own custom buttons where the default ones ( insert / delete / etc… ) are for aes…
This Micro Tutorial hows how you can integrate  Mac OSX to a Windows Active Directory Domain. Apple has made it easy to allow users to bind their macs to a windows domain with relative ease. The following video show how to bind OSX Mavericks to …
This tutorial gives a high-level tour of the interface of Marketo (a marketing automation tool to help businesses track and engage prospective customers and drive them to purchase). You will see the main areas including Marketing Activities, Design …

776 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