Bootstrap Modal with WTF

Question

Bootstrap Modalの中にいくつかのユーザー入力フィールドがあり、ユーザーが提出する前にいくつかの検証を試みています。

私はいくつかの関連記事を見てきましたが、これまでのところ何も私のために働いていませんでした。

私が抱えている主な問題は、submitを押すたびにモーダルウィンドウが閉じて、ユーザーはエラーメッセージを見ることができないということです。私はモーダルウィンドウが成功した提出が起こるまで開いたままにしておきたい。

以下は、それがすべてのヘルプは本当に理解されるであろう

<script> 
    var formErrors = {% if user_edit_form.errors %}true{% else %}false{% endif %}; 
    $(document).ready(function() { 
    if (formErrors) { 
     $('.Modal').modal('show'); 
    } 
    }); 
</script> 

動作するように私のモーダル

<button type="button" class="btn btn-default" data-toggle="modal" data-target="#editModal" style="float:right"> 
    <span class="glyphicon glyphicon-edit"></span> Edit 
</button> 

<!-- Modal --> 
<div class="modal fade" id="editModal" role="dialog" > 
    <div class="modal-dialog"> 

    <!-- Modal content--> 
    <div class="modal-content" > 
     <div class="modal-header" > 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
     <h4>Edit Your Login Information</h4> 
     </div> 

     <div class="modal-body"> 
     <form action="{{ url_for('.profile') }}" method='post' name='edit_user' class="form-horizontal" > 
      {{ user_edit_form.csrf_token }} 
      <div class="form-group col-xs-12 col-md-12 col-lg-12" style="background-color:white; !important "> 
      <div class="col-xs-12 col-md-12 col-lg-12" > 
       {{ render_field(user_edit_form.first_name) }} 
      </div> 
      <div class="col-xs-12 col-md-12 col-lg-12"> 
       {{ render_field(user_edit_form.last_name) }} 
      </div> 
      <div class="col-xs-12 col-md-12 col-lg-12"> 
       {{ render_field(user_edit_form.email) }} 
      </div> 
      <div class="col-xs-12 col-md-12 col-lg-12"> 
       {{ render_field(user_edit_form.institute) }} 
      </div> 
      <div class="col-xs-12 col-md-12 col-lg-12"> 
       <input class='btn btn-primary' id='uform' type='submit' value='UPDATE' style="float:right"/> 
      </div> 
      </div> 
     </form> 
     </div> 
    </div> 
    </div> 
</div> 

と私が取得しようとしているjavascriptのです！

Answer 1

まず、送信依頼を送信してモーダルフォームを閉じるための送信ボタンのデフォルトアクションを防止する必要があります。送信ボタンのclickイベントでevent.preventDefault()を使用してこれを行うことができます。次に、フォームデータをシリアライズし、Ajax経由で投稿要求を送信します。ビュー関数が"ok"を返した場合ダイアログを非表示にして現在のページをリロードします。それ以外の場合は、エラーメッセージとともにhmlコードが表示されます。次の手順を実行します。

1.フォームIDを付与します。

<form id="editForm" action="{{ url_for('.profile') }}" method="post" name="edit_user" class="form-horizontal"> 

2. Javascriptのコードを追加します（jQueryのを必要とします）

$('#uform').click(function(event) { 
    event.preventDefault(); 
    $.post(url, data=$('#editForm').serialize(), function(data) { 
    if (data.status == 'ok') { 
     $('#editModal').modal('hide'); 
     location.reload(); 
    } 
    else { 
     $('#editModal .modal-content').html(data); 
    } 
    }); 
}) 

3.あなたのビューを変更します機能

@main.route('/yourroute', methods=['GET', 'POST']) 
def profile(): 
    form = YourForm() 
    if form.validate_on_submit(): 
     user = UserEditForm() 
     user.first_name = form.first_name.data 
     user.last_name = form.last_name.data 
     # ... 
     db.session.add(user) 
     db.session.commit() 
     return jsonify(status='ok') 
    return render_template('yourtemplate.html', form=form)