AJAX Custom Component - Post data from Editor field

Question

I'm struggling to post data from "editor" form field. When I do it without ajax it shows the value while, with AJAX it just make it blank.

Array ( [subject] => asdasdasdasd [description] => [priority] => 3 [cc] => [bcc] => [id] => [created_by] => 688 )

Notice the [description] field. I filled the data with test but still it is empty.

It looks like my jquery is serializing the data and not able to find a value from editor field. When I try to print $data it outputs like following:

Please see my code for more information:

JS:

jQuery(document).ready(function ($) {
    $('#request-form #submit').click(function (e) {
        $('#request-form').ajaxSubmit({
            url: 'index.php?option=com_helpdesk&task=request.save',
            type: 'POST',
            beforeSerialize: function($form, options) {
                // I was just trying to see what it prints. It is just showing the serialize form values
                console.log($form);
            },
            success: function (result) {
                var response = $.parseJSON(result);
                if (!response['success']) {
                    bootbox.alert(response['message']);
                }
                else {
                    bootbox.dialog({
                        title: "Success",
                        message: response['message']
                    });
                }
            }
        });
        e.preventDefault();
    });
});

Controller:

public function save($key = null, $urlVar = null)
{
        // Check for request forgeries.
        JSession::checkToken() or jexit(JText::_('JINVALID_TOKEN'));

        $model    = $this->getModel();
        $app      = JFactory::getApplication();
        $table    = $model->getTable();
        $key      = $table->getKeyName();
        $data     = $this->input->post->get('jform', array(), 'array');
        unset($data['userfile']);
        $recordId = $data[$key];

        if (!$this->allowSave($data, $key))
        {
            echo new JResponseJson(NULL, JText::_('COM_HELPDESK_ERROR_ACTION_NOT_PERMITTED'), TRUE);
            $app->close();
        }

        $form = $model->getForm($data, false);

        if (!$form)
        {
            echo new JResponseJson(NULL, JText::_('COM_HELPDESK_GENERAL_ERROR'), true);
            $app->close();
        }

        // Validate and Filter data by passing it to Model
        $data = $model->validate($form, $data);

        if (!$data)
        {
            echo new JResponseJson(NULL, JText::_('COM_HELPDESK_INVALID_DATA_ERROR'), true);
            $app->close();
        }

        if (!$model->save($data))
        {
            echo new JResponseJson($response, JText::_('COM_HELPDESK_SAVE_ERROR'), true);
            $app->close();
        }

        $isNew = $model->getState('request.new');

        if ($isNew)
        {
            $recordId = (int) $model->getState('request.id');
            $message  = JText::sprintf('COM_HELPDESK_REQUEST_NEW_SAVE_SUCCESS', $recordId);
        }
        else
        {
            $message = JText::sprintf('COM_HELPDESK_REQUEST_EDIT_SAVE_SUCCESS', $recordId);
        }

        $redirect = JRoute::_('index.php?option=' . $this->option . '&view=' . $this->view_list . $this->getRedirectToItemAppend(), false);
        echo new JResponseJson($redirect, $message);
        $app->close();
    }

Form XML:

<field
            type="editor"
            label="COM_HELPDESK_REQUEST_DESCRIPTION_LABEL"
            name="description"
            class="form-control"
            height="225px"
        />

EDIT:

When I click on Save button my textarea gets filled with editor but for that, I was forced to use Non-Ajax method. I want it to be done with AJAX way.

Answer 1

I managed to do it with following. I know, this is not the best way to implement it. I will wait for expert reviews from JSE.

I used beforeSerialize property of ajaxSubmit JS and added following code:

beforeSerialize: function() {
                $('.wf_editor_toggle').click();
                $('.wf_editor_toggle').click();
            },

Explaination:

JCE Editor dispatch it's content to parent textarea only when the Save or Toggle Editor button is clicked. As I'm Ajaxifying my component, my page doesn't get refreshed hence "Save" prevents it's default behaviour.

Therefore, I enabled "Toggle Editor" button from JCE component and added:

$('.wf_editor_toggle').click();

This code twice.

For the first time it will toggle editor with Normal textarea and in the second statement it toggles back to original editor. It is needed because JCE save toggle editor state (may be through cookies)

Any better solution would be appreciable.