Save WYSIWYG editor plugin settings, only works after second save

Question

I have set up a WYSIWYG editor on one of my plugin settings pages. The content saves, but only after you hit save twice. If you hit it once, you get he message for settings saved, but the content doesn't actually save. You refresh the page and it reverts back to its previous state.

I'm initializing the editor using wp_editor, like so:

$single_optin_message_parameters = array(
        'teeny' => true,
        'textarea_rows' => 15,
        'tabindex' => 1,
        'textarea_name' => 'single-optin-message'
    );

<?php wp_editor( $this->optionVal['single-optin-message'] , 'single_optin_message', $single_optin_message_parameters); ?>

and I'm saving the content via AJAX.

$('#form').submit(function (e) {            
    // Make sure the api key exists
   if (blankFieldCheck()) {
              $.ajax({
                type: 'POST',
                url: ajaxurl,
                data: {
                    action: 'yks_form',
                    form_action: 'update_options',
                    form_data: $('#yks-form').serialize()
                },
                dataType: 'json',
                success: function (RESPONSE) {
                    if (RESPONSE == '1') {  
                        $('#yks-status').html('<div class="updated"><p><?php _e('The options were saved successfully!', 'yikesplugin'); ?></p></div>');
                        $('#yks-status').slideDown('fast');
                    } else {
                        $('#yks-status').html('<div class="error"><p><?php _e('The options could not be saved (or you did not change them).', 'yikes-inc-easy-mailchimp-extender'); ?></p></div>');
                        $('#yks-status').slideDown('fast');
                        console.log(RESPONSE);
                    }
                },
                error : function(RESPONSE2) {
                    console.log(RESPONSE2.responseText);
                }
            });
   } 
   e.preventDefault();
});

This works when the field is a standard <textarea></textarea> but the second I convert it to a WYSIWYG, I need to hit save twice for the data to actually save. I'm not seeing why. I've tested the data that is serialized when saving the form, and I can see my new data has been passed along, and I get the confirmation that it saved. Then I refresh the page and it reverts. No sense made.

Answer 1

I wish I was able to explain exactly WHY this works, but from the help of another wordpress.stackexcchange question I was able to find the solution.

Adding tinyMCE.triggerSave(); directly after the .submit function forces the content to update. This was taken directly from another thread's answer:

"tinyMCE textarea is initially unseen by the used serialize function:"

Referrence: wp_editor textarea value not updating

So it is now:

if (blankFieldCheck()) {
  tinyMCE.triggerSave(); <-- new
   $.ajax({
    .... rest of code executed

which seems to have done the trick. I hope someone else finds this useful, as I literally just spent the last 4 hours finding a solution to this.

Whew.