GetListItems and Rich HTML fields

May 24, 2011 at 8:20 PM
Edited May 25, 2011 at 12:37 PM

I'm trying to get a copy function working.  From a DVWP, users can click a link that will take them to a NewForm.aspx page where I'm using a few SPServices calls to fetch the original item data and prepopulating.  I'm trying to utilize Marc's post on his blog to insert the rich text field description into my field description.  It also has to work cross browser. 

I've been able to get all the functionality I want except for these rich text controls.  I've tried in IE to utilize the methods Marc described on his linked blog, but the contents do not show up.  This is my jQuery for that:

if ($.browser.msie) {
   var DescriptionRTE = $("textarea[Title='Course Description']").closest("span").find("iframe[Title='Rich Text Editor']").contents().find("body");   
   $(DescriptionRTE).trigger("click");
   $(DescriptionRTE).focus();
   $(DescriptionRTE).html($(this).attr("ows_CourseDescription"));
}


Firefox emits this markup and I've yet to get a good hook into it.  I'm sure it's a much simpler selector like var DescriptionRTE = $("textarea[Title='Course Description']"); , is that a sufficient anchor?

<!-- FieldName="Course Description" FieldInternalName="CourseDescription" FieldType="SPFieldNote" -->

<td width="400px" valign="top" class="ms-formbody"> <!-- FieldName="Course Description" FieldInternalName="CourseDescription" FieldType="SPFieldNote"--> 
<span dir="none"> 
<span dir="ltr" id="ctl00_ctl14_g_8fcc8fdf_5d7e_45e8_978f_4c198eab126d_ctl00_ctl04_ctl01_ctl00_ctl00_ctl04_ctl00_ctl00_originalEditorContainer"> 
<textarea dir="none" class="ms-long" title="Course Description" id="ctl00_ctl14_g_8fcc8fdf_5d7e_45e8_978f_4c198eab126d_ctl00_ctl04_ctl01_ctl00_ctl00_ctl04_ctl00_ctl00_TextField" cols="20" rows="6" 
name="ctl00$ctl14$g_8fcc8fdf_5d7e_45e8_978f_4c198eab126d$ctl00$ctl04$ctl01$ctl00$ctl00$ctl04$ctl00$ctl00$TextField"></textarea> 
<input type="HIDDEN" id="ctl00_ctl14_g_8fcc8fdf_5d7e_45e8_978f_4c198eab126d_ctl00_ctl04_ctl01_ctl00_ctl00_ctl04_ctl00_ctl00_TextField_spSave" 
name="ctl00$ctl14$g_8fcc8fdf_5d7e_45e8_978f_4c198eab126d$ctl00$ctl04$ctl01$ctl00$ctl00$ctl04$ctl00$ctl00$TextField_spSave"> </span> 
<script>if (browseris.ie5up &amp;&amp; browseris.win32 &amp;&amp; !IsAccessibilityFeatureEnabled())
{RTE_ConvertTextAreaToRichEdit("ctl00_ctl14_g_8fcc8fdf_5d7e_45e8_978f_4c198eab126d_ctl00_ctl04_ctl01_ctl00_ctl00_ctl04_ctl00_ctl00_TextField", true, true, "", "1033", null, null, null, null, null,"FullHtml", "\u002fsites\u002fecutraining",null,null,null,null);}
else{document.write("&amp;nbsp;&lt;br&gt;&lt;SPAN class=ms-formdescription&gt;&lt;a href='javascript:HelpWindowKey(\"nsfullrichtext\")'&gt;Click for help about adding HTML formatting.&lt;/a&gt;&lt;/SPAN&gt;&amp;nbsp;&lt;br&gt;");};</script> &nbsp; 
<br> <span class="ms-formdescription"> <a href="javascript:HelpWindowKey(&quot;nsfullrichtext&quot;)">Click for help about adding HTML formatting.</a></span>&nbsp;<br></span> </td>
 
I'm at a bit of a loss on how to get these functioning.  My ows_CourseDescription is returning escaped HTML so I'm not sure if that has an impact on why this isnt working. 
Coordinator
May 24, 2011 at 8:57 PM

Eric:

In the IE instance, I don't think you need the

$(DescriptionRTE).trigger("click");
$(DescriptionRTE).focus();

lines. Simply doing

$(DescriptionRTE).html($(this).attr("ows_CourseDescription"));

should set the value, as in my post.

Are you using SharePoint 2007 or 2010? In 2010, you should see very similar markup across browsers, so I'm guessing 2007.

M.

May 25, 2011 at 1:29 AM

I've found when building out a script, it's easiest to have the dev tools open and run my code inline.  Judging from the markup, the selector you have above should work: $("textarea[title='Course Description']").val("text");

There may be a problem with the capital "T" in your selector though.  The DOM has "title" and I think all inputs and textareas are set with .val().  Textarea's in IE are different b/c you are setting some weird control under the hood.

May 25, 2011 at 1:37 AM

It's 2007, I'm trying to be a bit forward thinking and trying not to use the RadEditor controls in this case.

Thanks for the suggestions, I'll give them a whirl.

May 25, 2011 at 2:13 AM

The non-IE selector works, I can't seem to get IE playing nicely yet.  Going to plug away at it in the morning and see if I yield any better results.

Coordinator
May 25, 2011 at 2:24 AM

My guess is that the Firefox markup above is going to be trickier than it looks. There's a textarea, but also a hidden input element and some script.

Keep in mind that the "players" in the process don't have to be right in the same place in the DOM. With the complex dropdowns in IE, there's a hidden input element up toward the top of the DOM which comes in, and the only way to figure that out is to trace what the script is doing.

M.

May 25, 2011 at 12:35 PM

I did confirm this morning that the non-ie code works, I can call the page in Firefox, it populates the field with the HTML from the original item, and submit the item with the HTML markup.  Then when viewing the item in IE, the markup is normal.

I think you might be mixing up 2 posts there Marc, this is a rich text field, not a complex drop down field.

The IE markup appears to be the same as your blog references, I'm just not sure why it isn't setting that field value.  Is there a more direct method of selecting the field?  I'm working of a copied, but still stock NewForm and using a CEWP script to do all these things.

 

May 25, 2011 at 12:43 PM

I am not sure I understand what you want to do with the rich text fields. I use the OOB rich text editor in SPPostIt and it works fine. I can store and retrieve the values all I want. I am just not sure what you are doing so that I can see if I have something that will work for you.

Dan

Coordinator
May 25, 2011 at 12:50 PM
Edited May 25, 2011 at 12:51 PM

Eric:

I only mentioned that dropdown thing to point out that things don't have to be located right next to each other in the markup to be involved in the process. Also keep in mind that what you see when you View Source is often *not* what is present in the live DOM.

So it sounds like Firefox is doing what you want, but IE is not. You've shown the Firefox markup above, but can you post the IE version? Have you tried alerting the contents of an item in IE which has the RTE populated? That would be the best test of whether you have the right selectors.

M.

May 25, 2011 at 12:53 PM

Here's a better overview.

I have a DVWP that has a hyperlink constructed with some query string parameters.  Clicking on this link takes you to a newform.  I have a jQuery script that is parsing the query srting via the SPServices operation. 

One of the query string parameters is the original item ID.  I use this ID in conjunction with GetListItems to prepopulate this new form.  One of the fields is a rich text field.  The data for the rich text field comes back in the XML, and I'm trying to set the rich text field on my form to this value.

I currently have it working in non-IE browsers.  I had it working in non-IE browsers utilizing Telerik RadEditor too, but I have not been able to get this working in IE.  It was either inconsistant or nonfunctioning altogether.

May 25, 2011 at 1:17 PM

Here's the markup from the Developer Tools.  I didn't include the contents of the table and iframe to keep it smaller.  In the meantime, I'll try isolating the contents of an existing RTE in IE and try alerting that.

<td width="400" class="ms-formbody" vAlign="top">
<!--  FieldName="Course Description" FieldInternalName="CourseDescription" FieldType="SPFieldNote" -->
 <span dir="none">
  <span id="ctl00_ctl14_g_8fcc8fdf_5d7e_45e8_978f_4c198eab126d_ctl00_ctl04_ctl01_ctl00_ctl00_ctl04_ctl00_ctl00_originalEditorContainer" dir="ltr">
   <textarea name="ctl00$ctl14$g_8fcc8fdf_5d7e_45e8_978f_4c198eab126d$ctl00$ctl04$ctl01$ctl00$ctl00$ctl04$ctl00$ctl00$TextField" title="Course Description" class="ms-long" id="ctl00_ctl14_g_8fcc8fdf_5d7e_45e8_978f_4c198eab126d_ctl00_ctl04_ctl01_ctl00_ctl00_ctl04_ctl00_ctl00_TextField" style="display: none;" dir="none" rows="6" cols="20"/>
   <table class="ms-rtetoolbarmenu ms-long" id="ctl00_ctl14_g_8fcc8fdf_5d7e_45e8_978f_4c198eab126d_ctl00_ctl04_ctl01_ctl00_ctl00_ctl04_ctl00_ctl00_TextField_toolbar" style="border-top-color: #c4c4c4; border-right-color: #c4c4c4; border-bottom-color: #c4c4c4; border-left-color: #c4c4c4; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid;" cellSpacing="0" cellPadding="0">
   <iframe tabIndex="-1" class="ms-rtetoolbarmenu" id="RTETextEditorPullDownMenu" src="/_layouts/images/blank.gif" style="display: none; position: absolute;" ButtonMnemonic="x" WebLocale="x" BaseElementID="x">
    <div>
	 <iframe height="84" tabIndex="0" title="Rich Text Editor" class="ms-rtelong" id="ctl00_ctl14_g_8fcc8fdf_5d7e_45e8_978f_4c198eab126d_ctl00_ctl04_ctl01_ctl00_ctl00_ctl04_ctl00_ctl00_TextField_iframe" src="/_layouts/images/blank.gif">
	  <html dir="ltr">
	  <head>
	  <body class="ms-formbody" scroll="yes" style="border-top-width: medium; border-right-width: medium; border-bottom-width: medium; border-left-width: medium; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; background-color: white;" contentEditable="true" WebLocale="1033" BaseElementID="ctl00_ctl14_g_8fcc8fdf_5d7e_45e8_978f_4c198eab126d_ctl00_ctl04_ctl01_ctl00_ctl00_ctl04_ctl00_ctl00_TextField" wordWrap="false" ondragdrop="function anonymous() {RTE_OnDrop(this);}">
    <div/>
   <input name="ctl00$ctl14$g_8fcc8fdf_5d7e_45e8_978f_4c198eab126d$ctl00$ctl04$ctl01$ctl00$ctl00$ctl04$ctl00$ctl00$TextField_spSave" id="ctl00_ctl14_g_8fcc8fdf_5d7e_45e8_978f_4c198eab126d_ctl00_ctl04_ctl01_ctl00_ctl00_ctl04_ctl00_ctl00_TextField_spSave" type="hidden"/>
   <script>if (browseris.ie5up && browseris.win32 && !IsAccessibilityFeatureEnabled()){RTE_ConvertTextAreaToRichEdit("ctl00_ctl14_g_8fcc8fdf_5d7e_45e8_978f_4c198eab126d_ctl00_ctl04_ctl01_ctl00_ctl00_ctl04_ctl00_ctl00_TextField", true, true, "", "1033", null, null, null, null, null,"FullHtml", "\u002fsites\u002fecutraining",null,null,null,null);}else{document.write("&nbsp;<br><SPAN class=ms-formdescription><a href='javascript:HelpWindowKey(\"nsfullrichtext\")'>Click for help about adding HTML formatting.</a></SPAN>&nbsp;<br>");};</script>

 

Coordinator
May 25, 2011 at 1:25 PM

It looks like your code ought to work based on this markup. Try alerting ows_CourseDescription to be sure that you have what you think and then the RTE's html after you set it:

if ($.browser.msie) {
   var DescriptionRTE = $("textarea[Title='Course Description']").closest("span").find("iframe[Title='Rich Text Editor']").contents().find("body");
alert($(this).attr("ows_CourseDescription")); $(DescriptionRTE).html($(this).attr("ows_CourseDescription"));
alert($(DescriptionRTE).html()); }

M.

May 25, 2011 at 1:34 PM

Actually I think you want the escaped value. When I save the data from mine, I escape it first to save it and this works great. It must be wrapped in a div element though ie <div>blah blah blah</div>

if I know the selector is good then this works for me:

$("textarea[Title='Course Description']").val(value from results);

What I do is get the id of the textarea (since I created the form, I set the id so I know what it is, but this is what I would do if I did not)

var theid = $("textarea[Title='Course Description']").attr("ID");

as Matt states, it might be title but then from there try this:

$("#" + theid).val(value from results);

 

May 25, 2011 at 1:36 PM

oops! my reply was defnitely messed up! Let me get the right stuff and get it in here. So Sorry!

May 25, 2011 at 1:40 PM
Edited May 25, 2011 at 1:50 PM

I get both alerts with the content I expect, but the rich text field doesn't display the html/content.  The idea is that the data should be there and available for the user to edit.  The firefox version of the script, the html is entered into the rich text field and could be modified.

If I try to save the item, it sees the rich text field as blank, so I have a feeling I might not be putting the content in the right area.

May 25, 2011 at 1:47 PM

I was on a completely different mindset to what you wanted to do. However, Marc's code should work except that the Title='Rich Text Editor' should be changed to title='Rich Text Editor' because the iframe used a lowercase "t" for "title"

Coordinator
May 25, 2011 at 1:48 PM
Edited May 25, 2011 at 1:49 PM

Case for "Title" doesn't matter. I'm going to rig this up in a test page and get it to work.

M.

May 25, 2011 at 1:57 PM

I guess it'll be a good 3rd part to your rich text articles :-)  I'll continue to tinker, it has worked in the past so I know it can be done.  It just wasn't reliable and didn't seem to work in different versions of IE.

Coordinator
May 25, 2011 at 2:19 PM

This works for me:

  var systemDescriptionRTETextArea = $("textarea[Title='System Description']");
alert($(systemDescriptionRTETextArea).html());
$(systemDescriptionRTETextArea).html("Cream cheese");
alert($(systemDescriptionRTETextArea).html());

The body in the iframe contains the *existing* contents of the RTE (if any), but to set it, you need to update the textarea at the top.

Give it a go and see if it works for you.

M.

May 25, 2011 at 2:41 PM

Score, that works on both IE 8 and 9.  It looks like I had all the code stuff right, but I wasn't going about it in the right way.  Thanks Marc, Matt and Genius on this, I can't tell you how appreciative I am.

eric

May 25, 2011 at 2:45 PM

Nice one Marc!

Coordinator
May 25, 2011 at 2:46 PM

No problem. Blog post on the way!

M.