5

私はdjangoにフォームを持っています。「メール作成」フォームです。このフォームをビューからテンプレートに送信し、ckeditor を適用してボディ スタイルを変更します。このフォームを ajax で投稿したい。ckeditor を使用すると、request.POST で body フィールドの値が送信されません。私はこのコード行を使用してckeditorを使用します:

CKEDITOR.replace('id_body');

(ckeditor を使用しなくても、すべて正常に動作します。)

<form id="compose_form" action="compose/" method="post">
        {% csrf_token %}
        {{ form.non_field_errors }}
        <div>
            <div class="form-field">
                <label for="id_recipient">{% trans 'recipient' %}:</label>
                {{ form.recipient }}               
                {{ form.recipient.errors }}
            </div>
            <div class="form-field">
                <label for="id_subject">{% trans 'subject' %}:</label>
                {{ form.subject }}
                {{ form.subject.errors }}
            </div>
        </div>
        <div class="form-field">
            {{ form.body }}
            {{ form.body.errors }}
        </div>        
            <input id="messages-submit" type="submit" value=""Send"/>
        </div>
    </form>

そして、このスクリプトを使用して、ajax 経由でフォーム データを送信します。

<script type="text/javascript">
        $(function() {
            $('#compose_form').submit(function() {
                var temp = $("#compose_form").serialize();                
                $.ajax({
                    type: "POST",
                    data: temp,
                    url: 'compose/',
                    success: function(data) {
                      // do s.th
                    }
                });
                return false;
            });
        });
    </script>

このスクリプトでは、本文の値が request.POST に送信されません (つまり、本文フィールドに空の文字列が送信されます)。以下の行をスクリプトに追加すると、本文フィールドの値が送信されますが、ajax ではありませんもっと。どうすればいいですか？

4

3 に答える 3

8

エディターのデータがフォームに含まれていないのは、エディターがフォームの一部ではないためです。関連付けたフォーム要素を更新する必要があります。これを行うには、エディターにフォーム要素を更新するように指示する必要があります。

したがって、フォームの送信機能では、エディターからデータを取得する必要があります。

これでうまくいくはずです：

$(function() {
        $('#compose_form').submit(function() {
            for (var instance in CKEDITOR.instances)
                CKEDITOR.instances[instance].updateElement();
            var temp = $("#compose_form").serialize();
            etc etc...
于 2012-11-11T10:31:29.310 に答える
-1 
<script type="text/javascript">
    $(function () {
        $('#submit_button_id').click(function () {
            $.post("action post file url", $("#form_id").serialize(), function (data) {});
        });
    });
</script>

上記のスクリプトがお役に立てば幸いです

于 2012-11-11T10:36:47.967 に答える