CKEDITOR - Update / Create of products fails using AJAX in Laravel 5

Question

I want to store the html content written in ckeditor textarea field in my database table called products using AJAX.

Everything gets inserted and/or updated successfully leaving the product description.

product_edit.blade.php

{!! Form::open(['files' => 'true', 'autocomplete' => 'off', 'name' => 'formEditProductGeneralInfo', 'id' => 'formEditProductGeneralInfo']) !!}
    <div class="form-group">
        {!! Form::label('code', 'Code:') !!}
        {!! Form::text('code', $product->code, ['class' => 'form-control input-sm']) !!}
    </div>

    <div class="form-group">
        {!! Form::label('name', 'Name:') !!}
        {!! Form::text('name', $product->name, ['class' => 'form-control input-sm']) !!}
    </div>

    <div class="form-group">
        {!! Form::label('description', 'Product Description:') !!}
        {!! Form::textarea('description', $product->description, ['class' => 'form-control input-sm ckeditor', 'rows' => 3, 'id' => 'prdDescription']) !!}
    </div>

    <div class="form-group">
        {!! Form::label('price', 'Price:') !!}
        {!! Form::text('price', $product->price, ['class' => 'form-control input-sm']) !!}
    </div>

    <div class="form-group">
       {!! Form::label('image_file', 'Image:') !!}
       {!! Form::file('image_file', ['id' => 'image_file', 'class' => 'form-control input-sm']) !!}
    </div>

    <div class="form-group">
       {!! Form::submit( 'Update', ['class' => 'btn btn-primary btn-block', 'id' => 'btnEditProductGeneral'] ) !!}
    </div>
{!! Form::close() !!}

ajax

$('form[name="formEditProductGeneralInfo"]').submit(function(e) {
    var inputData = new FormData($(this)[0]);

    var message = CKEDITOR.instances.prdDescription.getData();

    console.log(message);
    console.log(inputData);

    $.ajax({
        url: '{{ url(' / admin / products / update / general ', $product->id) }}',
        type: 'POST',
        data: inputData,
        async: true,
        success: function(m) {
            if (m.status === 'success') {
                toastr.success(m.msg, 'Successs!');
            } else {
                toastr.error(m.msg, msg.status);
            }
        },
        error: function(data) {
            if (data.status === 422) {
                var errors = data.responseJSON;
                var errorsHtml = '<div class="alert alert-danger"><ul>';
                errorsHtml += '<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>';
                $.each(errors, function(key, value) {
                    errorsHtml += '<li>' + value[0] + '</li>';
                });
                errorsHtml += '</ul></div>';
                $('.errors').html(errorsHtml);
            }
        },
        cache: false,
        contentType: false,
        processData: false
    });
    e.preventDefault();
    return false;
});

How am I suppose to save the description's html content in the database ?

Any help is highly appreciated. Thanks.

Answer 1

I have solved it. The issue was that I had to check for the instances of CKEDITOR in the for loop which I had not checked. So I added the for loop to check the instances, and everything works completely fine.

ajax updated:

$('form[name="formEditProductGeneralInfo"]').submit(function(e) {
    for (instance in CKEDITOR.instances) {
        CKEDITOR.instances[instance].updateElement();
    }

    var inputData = new FormData($(this)[0]);

    $.ajax({
        url: '{{ url(' / admin / products / update / general ', $product->id) }}',
        type: 'POST',
        data: inputData,
        async: true,
        success: function(m) {
            if (m.status === 'success') {
                toastr.success(m.msg, 'Successs!');
            } else {
                toastr.error(m.msg, msg.status);
            }
        },
        error: function(data) {
            if (data.status === 422) {
                var errors = data.responseJSON;
                var errorsHtml = '<div class="alert alert-danger"><ul>';
                errorsHtml += '<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>';
                $.each(errors, function(key, value) {
                    errorsHtml += '<li>' + value[0] + '</li>';
                });
                errorsHtml += '</ul></div>';
                $('.errors').html(errorsHtml);
            }
        },
        cache: false,
        contentType: false,
        processData: false
    });
    e.preventDefault();
    return false;
});