How to POST the content entered in a Joomla Editor - Custom Component

Question

Im developing a custom component for Joomla 3.0 and i'm using a editor field in one of my views. I'm developing my views out of pure HTML and JS not out of Joomla XML Structure. I have successfully been able to load and use the editor field, but when i'm posting the form data to my controller using ajax, the editor field is not showing, or is null.

How can i post the content of the editor to my controller using ajax ?

Form Code -

    <form id="servicecategory-form" name="servicecategory-form" enctype="multipart/form-data">
...
<!-- description editor-->
<div class="control-group">
    <label class="control-label">
        <a href="#" data-toggle="tooltip" title="Description">
            Description
        </a>
    </label>
    <div class="controls">
        <?php
        $editor = JFactory::getEditor();
        echo $editor->display('description', '', '270', '300', '50', '10',false);
        ?>
        <p class="help-block"></p>
    </div>
</div>
...
</form>

Javascript Code -

function saveServiceCategory() {
    var form = jsn('#servicecategory-form');

        var formData = form.serialize();

        jsn.ajax({
            type: 'POST',
            url: 'index.php?option=com_centrilliontech_helloworld&task=custom.saveData&tmpl=component&format=raw',
            cache: false,
            data: formData,
            beforeSend: function() {
                jsn('#loading-modal').modal('show');
                console.log('beforeSend');
            }
        })
            .success(function(response) {
                var value = jQuery.parseJSON(response);

                if (value.error) {
                    alertBar('alert-error', 'Service Category', 'Error');
                } else {
                    alertBar('alert-info', 'Service Category', value.message);
                }
            })
            .complete(function() {
                jsn('#loading-modal').modal('hide');
                console.log('complete');
            })
            .error(function() {
                alertBar('alert-danger', 'Service Category', 'Oops! An error occurred. Please try again later.');
            });
}

Please assume that the ajax request and anything to do with the posting of data to the associated controller is working fine, which it is, the only issue is here is how can i access the content of the editor and post it to the controller so i can save it in the database.

Thanks for your help in advance.

Spencer Fraise · Answer 1 · 2015-04-05T18:58:19.600

Here's how I pass Joomla editor values through AJAX:

Either save the editor content in a hidden input or on your action element as a data attribute on the PHP/HTML side:

<input type="hidden" id="element_id" value="<?php echo $editor->save( 'editor_id' ); ?>" />

Or as a data attribute on your button:

<a id="element_id" href="javascript:;" data="<?php echo $editor->save( 'editor_id' ); ?>">Submit</a>

Then on the Javascript side just call that input value or data attribute like this:

var message = WFEditor.getContent('element_id');

Remember if you're passing html to your controller and getting the values using jinput then you need to use raw or else it will strip the html markup from it.

$message = $jinput->get('message', null, 'raw');

How to POST the content entered in a Joomla Editor - Custom Component

1 Answers1