CKEDITOR - 在 Laravel 5 中使用 AJAX 更新/创建产品失败

Posted 2023-02-24

【中文标题】CKEDITOR - 在 Laravel 5 中使用 AJAX 更新/创建产品失败

【英文标题】：CKEDITOR - Update / Create of products fails using AJAX in Laravel 5

【发布时间】：2015-09-27 10:57:11

【问题描述】：

我想使用 AJAX 将 ckeditor textarea 字段中写入的 html 内容存储在名为 products 的数据库表中。

一切都被成功插入和/或更新，留下产品描述。

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

我应该如何将description 的 html 内容保存在数据库中？

非常感谢任何帮助。谢谢。

【问题讨论】：

这两个console.log输出什么？您是否尝试过删除 ckeditor？

【参考方案1】：

我已经解决了。问题是我必须在for loop 中检查我没有检查过的CKEDITOR 实例。所以我添加了for loop 来检查实例，一切正常。

ajax 更新：

$('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;
);

【参考方案2】：

使用 AJAX 请求发送 var 消息。然后在您的控制器中检查并保存。 :)