3

I am trying to make a pageblocktable that can be edited when clicking an "edit" button. I tried to initially use inlineEditingSupport, but it only worked for text. If I tried to edit an image or anything format related it would hang and say something about the element already being attached.

I am trying to have an output field and input field in the same column, when the page loads it will show the outputfield, and hide the input field, and when edit is clicked it will hide the output field and show the inputfield.

The jQuery works fine for anything else in my page but for the rich text field it does nothing. Is there something about rich text (or ckeditor) that does not allow this? How can I get around this, I also wanted to make it so that I could have the edit button in the pageblock row, and only show the editatble fileds for that row when clicked, but no idea how to do that. I am only 3 weeks into salesforce and 3 days into js/jquery so not sure what to try next. here is some snippets of the code I am trying to use now:

<apex:pageBlockTable value="{!announcementInfo}" var="announcement"
                                     id="announcements"  >
                    <apex:facet name="header">Announcements:</apex:facet>
                    <apex:column >
                    <input type="button" class="btn" id="Edit" value="Edit" onclick="edit();"/>                     
                    </apex:column>
                    <apex:column id="col" >
                        <apex:facet name="header">Announcement</apex:facet>
                        <apex:inputField  id="eAnn" value="{!announcement.Announcement__c}"/>      
                        <apex:outputField  id="neAnn" value="{!announcement.Announcement__c}"/>                    
                    </apex:column>

<script>

j$ = jQuery.noConflict();
            j$(document).ready(
                function(){ 
                    j$('.hidden').hide();
                    j$('.nedit').show();
             });
      function edit(){   
                j$("[id$=neAnn]").hide();     
                j$("[id$=neAnn]").show();           
            };
</Script>

**NOTE: I figured it out. Just needed to add "mode="inlineEdit" to the pageblock. Go figure. Will leave this up in case anyone else has this issue.

2

I change your login. In the onload of your page the rich field show disabled, and when you click in the button edit, the rich field is editable.

Can you try this?

Code's Snipet

<apex:pageBlockTable value="{!announcementInfo}" var="announcement" id="announcements"  >
    <apex:facet name="header">Announcements:</apex:facet>
    <apex:column >
    <input type="button" class="btn" id="Edit" value="Edit" onclick="edit();"/>                     
    </apex:column>
    <apex:column id="col" >
        <apex:facet name="header">Announcement</apex:facet>
        <apex:inputField  id="eAnn" value="{!announcement.Announcement__c}" styleClass="RichInput" />      
    </apex:column>

<script>

j$ = jQuery.noConflict();
j$('.RichInput').disabled(true) ;   

function edit(){   
    j$('.RichInput').disabled(false);           
};
</Script>
1

The Rich Text editor is in an iframe. In order to edit the text inside it you have to access the body inside that frame. Unfortunately there is no id or name on that frame. You can find it by the class.

$j(".cke_wysiwyg_frame").contents().find('body').html('New Text');

This is highly reliant on the class Salesforce assigns to the Rich text editor. If this class changes your code will break.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.