4

この質問にはかなりの数の可動部分がありますが、その一部について洞察があれば、それをいただければ幸いです。

期待どおりに機能するフィードバックフォームを作成したいと思います。ユーザーがページの右下にあるフィードバックボタンをクリックすると、ブートストラップモーダルが起動します。モーダルには、送信ボタンが押されたときに無効なフィールドを送信または返すdjangoクリスピーフォームがあります。

まず、フィードバックボタンがあります。

{% load crispy_forms_tags %}

.feedback-button {
    position: fixed;
    bottom: 0;
    right: 30px;
}

<div class='feedback-button'>
    <a class="btn btn-info" href="#feedbackModal" data-toggle="modal" title="Leave feedback" target="_blank">
        <i class="icon-comment icon-white"></i>
        Leave feedback
    </a>
</div>
<div class="modal hide" id="feedbackModal" tabindex="-1" role="dialog" aria-labelledby="feedbackModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
        <h3 id="feedbackModalLabel">Contact Form</h3>
    </div>
    <div class="modal-body">
        {% crispy feedback_form feedback_form.helper %}
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        <button class="btn btn-primary">Submit</button>
    </div>
</div>

次に、私のフォームがあります：

class Feedback(models.Model):
    creation_date = models.DateTimeField("Creation Date", default=datetime.now)
    topic = models.CharField("Topic", choices = TOPIC_CHOICES, max_length=50)
    subject = models.CharField("Subject", max_length=100)
    message = models.TextField("Message", blank=True)
    sender = models.CharField("Sender", max_length=50, blank=True, null=True)

    def __unicode__(self):
        return "%s - %s" % (self.subject, self.creation_date)

    class Meta:
            ordering = ["creation_date"]
        verbose_name = "Feedback"
        verbose_name_plural = "Feedback"

class Crispy_ContactForm(forms.ModelForm):

    def __init__(self, *args, **kwargs):
        self.helper = FormHelper()
        self.helper.layout = Layout(
            Fieldset(
                Field('topic', placeholder='Topic', css_class='input-medium'),
                Field('subject', placeholder='Subject', css_class='input-xlarge'),
                Field('message', placeholder='Message', rows='5', css_class='input-xlarge'),
                Field('sender', placeholder='Sender', css_class='input-xlarge'),
            ),
        )
        self.helper.form_id = 'id-Crispy_ContactForm'
        self.helper.form_method = 'post'

        super(Crispy_ContactForm, self).__init__(*args, **kwargs)

    class Meta:
        model = Feedback
        exclude = ['creation_date']

凡例をクリスピーフォームに含めると、モーダルには2つのフォームタイトルがあるように見えるため、凡例を省略しようとしました。ただし、クリスピーなフォームレイアウトで凡例を省略すると、フィールドの順序が乱れて表示されます。

だから私はいくつかの質問が残っています：

  1. 全体として、私はこれを正しい方法で行っていますか？
  2. モーダルの送信ボタンをAJAXに接続した場合、フォームのエラーチェックを行うにはどうすればよいですか？
  3. ブートストラップモーダルでクリスピーなフォームを表示するためのより良い方法はありますか？
4

2 に答える 2

5

このページで部分的な解決策を見つけました。基本テンプレートで、ボタンとフォームを作成しました。

<div class='feedback-button'><a class="btn btn-info" href="#feedbackModal" data-toggle="modal" title="Leave feedback" target="_blank"><i class="icon-comment icon-white"></i> Leave feedback</a></div>
{% include "_feedback_form.html" with feedback_form=feedback_form %}

次に、2つのフィードバックフォームを作成しました

<div class="modal hide" id="feedbackModal" tabindex="-1" role="dialog" aria-labelledby="feedbackModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
        <h3 id="feedbackModalLabel">Contact Form</h3>
    </div>
    {% include "_feedback_form_two.html" with feedback_form=feedback_form %}
</div>

と

{％load crispy_forms_tags％}

<form action="{% url feedback %}" method="post" id="id-Crispy_ContactForm" class="form ajax" data-replace="#id-Crispy_ContactForm">
    <div class="modal-body">
    {% crispy feedback_form %}  
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        <input type="submit" name="submit_feedback" value="Submit" class="btn btn-primary" id="submit-id-submit_feedback" />
    </div>
</form>

上記のリンクから利用しているbootstrap-ajax.jsファイルが1つのテンプレートのhtmlを置き換えるため、フィードバックフォームを2つに分割しました。組み合わせたフィードバックフォームを使用すると、class="modalhide"になります。フォームがエラーで更新された場合にモーダルが消えないように、class="modal"が必要です。

私の見解では、私は

@login_required
def feedback_ajax(request):
    feedback_form = Crispy_ContactForm(request.POST)
    dismiss_modal = False
    if feedback_form.is_valid():
        message = feedback_form.save()
        feedback_form = Crispy_ContactForm()
        dismiss_modal = True
    data = {
        "html": render_to_string("_feedback_form_two.html", {
            "feedback_form": feedback_form
        }, context_instance=RequestContext(request)),
        "dismiss_modal": dismiss_modal
    }
    return HttpResponse(json.dumps(data), mimetype="application/json")

そして、bootstrap-ajax.jsファイル（これも上記のリンクから）で、いくつかの変更を加えました。processData関数で、次のように定義しました。

var $el_parent = $el.parent();

そして私は追加しました

if (data.dismiss_modal) {
    var msg = '<div class="alert alert-success" id="' + $(replace_selector).attr('id') + '">Feedback Submitted</div>'
    $(replace_selector).replaceWith(msg);
    $el_parent.modal('hide');
    $(replace_selector).replaceWith(data.html);
}

成功メッセージはモーダルですぐに消えるため、これはまだ完全には機能していません。モーダルにメッセージを表示させ、おそらく3秒後に消えさせたいです。これはまだ理解されていませんが、今のところ十分に機能しています。

私はまだいじくり回していますが、これは私の質問のほとんどに対処します：

AJAXを使用してデータを送信し、必要に応じてエラーチェックを返します。フォームはモーダルでかなりよく表示されます。

残りの問題がいくつかあります。クリスピーフォームの凡例を抑制する方法を見つける必要があります。また、サイトの他の場所に表示される別のクリスピーフォームに干渉せずに、モーダルクリスピーフォームを表示する方法を見つける必要があります。

于 2012-10-19T13:29:24.683 に答える
1

関連する質問でこれと同様の質問に答えました。

https://stackoverflow.com/a/12905016/1406860

これにより、エラーが返される以外のすべてが取得されます。

検証を行い、「エラー」を作成することをお勧めします。フィードバックされるディクショナリに「問題のリスト」エントリを作成し、モーダルを閉じるかどうか（エラーがなかったため）またはAJAXの成功でこれを確認します。必要に応じてエラーを表示します。

JD

于 2012-10-17T19:02:01.673 に答える