CODEWITHSUNDEEP
ajaxwordpresseditor
Ajith
Ajith

Reputation: 2666

Rendering wordpress form with editor as ajax response is not working properly

In one of my project in wordpress, I tried to create a custom theme options with different fields. but I face an issue when I tried to load a form using ajax with text editor . The rendered editor comes with style and javascript issues, ie the text color becomes white and editor buttons were not visible, also the text and visual toggle not working. I think I need to run some javascript or I miss some js file which could be called in the rendered html, I am attaching the screenshot with this message ang my rendering html code is as follow, This form is renered as inner html in admin area

<form id="bgntheme_option_form" action="#" method="post">
  <ul>
    <li class="li-first">
      <div class="option-field">Home Page Header</div>
      <div class="option-value">
        <?php
            $settings = array( 'textarea_name' => 'bgntheme_home_header' );         
            wp_editor( $content, $editor_id, $settings );        
        ?>
        <p class="field-info">Header textarea for homepage.</p>
      </div>
      <div class="clear-both"></div>
    </li>
    <li class="update-form">
      <button id="bgntheme_submit" name="general-settings-submit" value="Update-General" >Update</button>      
    </li>
  </ul>
</form>

Screenshot of loaded editor in ajax response form

Upvotes: 0

Views: 866

Answers (2)

DaVoD Hoseiny
DaVoD Hoseiny

Reputation: 141

I had your problem and I solved it. In your call back function in your javascript file add this code:

quicktags({id : 'your_editor_id'});
tinymce.execCommand( 'mceAddEditor', false, 'your_editor_id' );

hear is an example :

$.ajax({
        url: data.ajax_url,
        type: 'post',
        datatype: 'json',
        success : function (response) {
            $('.row').append(String(response));
            quicktags({id : 'your_editor_id'});
            tinymce.execCommand( 'mceAddEditor', false, 'your_editor_id' );
            }
        });

Upvotes: 1

Shravan Sharma
Shravan Sharma

Reputation: 989

You have to add the following snippet to your ajax success method:

tinymce.execCommand('mceRemoveEditor', true, 'your_editor_id' );
tinymce.execCommand('mceAddEditor', true, 'your_editor_id' );

please replace your_editor_id with id of editor.

UPDATE

You can try this:

1) HTML

<ul>
<li class="li-first">
  <div class="option-field">Home Page Header</div>
  <div class="option-value">
    <?php
       $settings = array('media_buttons' => false, 'textarea_name' => 'bgntheme_home_header' );         
        wp_editor( '', 'my_editor', $settings );        
    ?>
    <p class="field-info">Header textarea for homepage.</p>
  </div>
  <div class="clear-both"></div>
</li>
<li class="update-form">
  <button id="bgntheme_submit" name="general-settings-submit" value="Update-General" >Update</button>      
</li>

2) JS

success : function( response ) { 
        jQuery('#content-wrapper-inner').html(response); 
        jQuery('#content-wrapper-inner').fadeIn("slow",function‌​() {   
            tinymce.execCommand('mceRemoveEditor', true, 'my_editor' ); 
            tinymce.execCommand('mceAddEditor', true, 'my_editor' ); 
        }); 
 }

Upvotes: 1

Related Questions