web-dev-qa-db-fra.com

AJAX Composant personnalisé - Champ données de l'éditeur

J'ai du mal à publier des données à partir du champ de formulaire "éditeur". Quand je le fais sans ajax, il affiche la valeur while, avec AJAX, il suffit de le rendre vide.

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

Remarquez le [description] champ. J'ai rempli les données avec test mais ça reste vide.

Il semble que jQuery sérialise les données et ne trouve pas de valeur dans le champ de l'éditeur. Quand j'essaie d'imprimer $data il sort comme suit:

S'il vous plaît voir mon code pour plus d'informations:

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();
    });
});

Manette:

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();
    }

Formulaire XML:

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

EDIT:

Lorsque je clique sur le bouton Enregistrer, mon textarea se remplit avec l'éditeur, mais pour cela, j'ai été obligé d'utiliser la méthode non-Ajax. Je veux que ce soit fait avec AJAX moyen.

2
Sahil Purav

J'ai réussi à le faire avec les suivants. Je sais, ce n'est pas la meilleure façon de le mettre en œuvre. J'attendrai les avis d'experts de JSE.

J'ai utilisé la propriété beforeSerialize de ajaxSubmit JS et ajouté le code suivant:

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

Explication:

JCE Editor envoie son contenu au parent textarea uniquement lorsque l'utilisateur clique sur le bouton Enregistrer ou Toggle Editor. Comme je modifie mon composant, ma page n'est pas actualisée, par conséquent "Enregistrer" empêche son comportement par défaut.

J'ai donc activé le bouton "Toggle Editor" du composant JCE et ajouté:

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

Ce code deux fois.

Pour la première fois, il basculera l'éditeur avec Normal textarea et dans la deuxième instruction, il reviendra à l'éditeur d'origine. Il est nécessaire car l'état d'activation de l'éditeur de sauvegarde JCE (éventuellement via des cookies)

Toute meilleure solution serait appréciable.

1
Sahil Purav