在Bootstrap Modal中使用django脆皮形式的AJAX反饋表

這個問題中有很多移動部分，但如果您對它的任何部分有任何洞察，那麼將不勝感激。在Bootstrap Modal中使用django脆皮形式的AJAX反饋表

我想建立一個反饋表單，其行爲與人們預期的一樣。當用戶點擊頁面右下方的反饋按鈕時，它會啓動引導模式。該模式有一個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']

我試圖忽略傳說中的香脆形式，因爲如果我有吧，模態似乎有兩個表格標題。但是在鬆脆的形式佈局中省略了這個圖例，導致字段出現亂序。

所以我留下了幾個問題：

總的來說，我要對這個正確的方式？
如果我將模式的提交按鈕連接到AJAX，我該如何去檢查表單的錯誤檢查？
是否有更好的方式顯示 bootstrap模式中的脆皮形式？

來源

2012-10-17 Ed.

我發現了一個partial solution on this page。在我的基本模板，我創建的按鈕和形式：

<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 %}

然後，我創建了兩個反饋形成

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

和

{％負載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>

我把反饋表格分成兩份，因爲我從上面的l中借鑑的bootstrap-ajax.js文件墨水將從一個模板中替換html。如果我使用組合的反饋表單，它將具有class =「模態隱藏」。我需要它只有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")

然後在引導-ajax.js文件（再次從上面的鏈接），我做了些改動。在過程數據的功能，我定義爲：

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-19 13:29:24

我在一個相關的問題上回答了一個類似的問題。

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

這將讓你除了錯誤的返回的一切。

我會建議做驗證並創建一個'錯誤'：反饋的字典中的'問題列表'條目，並根據是否關閉模式檢查AJAX成功中的此問題（因爲沒有' t錯誤）或適當顯示錯誤。

來源

2012-10-17 19:02:01 jondykeman

在Bootstrap Modal中使用django脆皮形式的AJAX反饋表

回答

相關問題