+ Start a Discussion
SoozeeSoozee 

VisualForce Modal PopUp window with Rich Text Editor and Save Button

Hello,

I have VF page with several links.  When you click on a link, a 'pop up' window opens.  The pop up window is actually an outputpanel that gets rendered when you click on the link.

I am having trouble with the Save button on the 'pop up'.

The save button calls some javascript which calls an action function which calls some apex.

But, the apex never gets called...

Here is the code.

VF Page where commandButton calls JS saveletteredits();

<apex:pageBlockButtons >              
                <apex:commandButton value="Save" title="Save changes" onClick="saveLetterEdits(); return false;"/>
                <apex:commandButton action="{!cancel}" value="Cancel" title="Cancel changes"/>
                <apex:commandButton action="{!reset}" value="Reset to Default Text" title="Reset to default text"/>
                <apex:actionStatus startText="(Saving...)" stopText=""/>
            </apex:pageBlockButtons>

 JS on VF Page:

<script type="text/javascript">
            var TextAreaID = document.getElementById("{!$Component.LetterTxtArea}");
            
            CKEDITOR.replace( TextAreaID, {
            toolbar :   [
                { name: 'styles', items : ['Font','FontSize', 'TextColor' ] },
                { name: 'basicstyles', items : [ 'Bold','Italic','Underline' ] },
                { name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','JustifyLeft','JustifyCenter','JustifyRight' ] }
                
            ]});
            CKEDITOR.config.width ='95%';
            CKEDITOR.config.height='350px';
             
            
            function saveLetterEdits(){         
            	
            	var _txtAreaID = $('.bodyTextArea').attr('id');
            	var _txtAreaEditor = CKEDITOR.instances[_txtAreaID];
            	var _oldText = _txtAreaEditor.getData();
            	document.getElementById('{!$Component.myHtmlField}').value = _oldText;
            	
            	//alert(ltrsubj);
            	passTheString();
            	//alert('passed the string');
            	
            	
            }
            
            
            </script>

 

VF page Action Function:

  <apex:actionFunction name="passTheString" action="{!saveTheLetter}" rerender="ltrbdypanel,textPanel"/>

 

Apex Class:

public PageReference saveTheLetter() { 
    	string newsubject = string.valueof(mysubject);
    	string newHTML = string.valueof(myHTML);
    	//displayPopup = false;
    	//system.debug('save letter');
    	Id letterID = System.currentPageReference().getParameters().get('ltrbdyID');
    	system.debug('saving letter '+letterID);
    	//system.debug('subject '+thesubject);
    	Letter__c l = [SELECT letter_template_name__c, reviewed__c, letter_uid__c, status__c, attention__c, letter_body__c FROM letter__c WHERE id = :letterID];
		l.status__c = 'Reviewed';
		l.attention__c = false; 
		l.reviewed__c = true; 
		l.letter_body__c = newHTML;
		l.Subject_Edited__c = newsubject;
		//l.Letter_Type_Edited__c = newlettertype;
		l.Letter_Template_Name_Edited__c = TplType;
		update l;
    //Pagereference s = new PageReference('/apex/EOTL_CloseMePage');  // redirect to closer page
    //return s; 
    	
    	return null;

  }

 

I've been tweaking things here and there to get this to work...

Any help is greatly appreciated!!!!

 

 

Best Answer chosen by Admin (Salesforce Developers) 
SoozeeSoozee

I was able to resolve this.  The Apex never got called because VF doesn't work right when it has to refresh a CKEditor instance...

So, I had to remove the panel containing the CKEditor instance from the rerender attribute on the ActionFunction call.