1

モーダル ビューで訪問者にフォームを表示する Rails アプリがあります。送信ボタンをクリックすると、フォームが送信され、背後のページをリロードせずにモーダル ビューが消えます。モーダル ビューの却下を JavaScript のフォームの送信機能にバインドしようとしましたが、正しく動作しません。私はJavaScriptの初心者なので、これを正しくスクリプト化していない可能性があります。ここに私が持っているものがあります:

<script type="text/javascript">
    $("document").on("submit", ".new_user", function() {
        $('.signup').modal("close");
    });
</script>
<fieldset>

      <!-- The sign up modal view -->
       <div id="signup" class="modal hide fade in" style="display: none;">  
        <% @user = User.new %>
        <%= form_for(@user, :remote => true) do |f| %>
        <div class="modal-header">  
          <a class="close" data-dismiss="modal">×</a>  
          <h3>Want to be notified when preorders start? Fill out this form!</h3>  
        </div>  
        <div class="modal-body">  
            <div class="field">
              <%= f.label :email %>
              <%= f.text_field :email, :class => 'modal_input'%>
            </div>
            <div class="field">
              <%= f.label :website %>
              <%= f.text_field :website, :class => 'modal_input'%>
            </div>
            <div class="field">
              <%= f.label :projects, "Projects you've worked on"  %>
              <%= f.text_area :projects, :size => "43x10", :class => 'modal_input' %>
            </div>
        </div>
        <div class="modal-footer">  
        <button type="submit" class="btn btn-success">Submit</button>
        </div>  
       </div>  
      <% end %>


       <!-- The modal view is triggered here -->
        <a data-toggle="modal" href="#signup" class="btn btn-primary
        btn-large btn-signup">Sign up</a>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>  
        <script src="/twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-modal.js"></script>
  </fieldset>

JavaScript 関数がモーダル ビューを閉じません。関数の何が問題になっていますか?

編集: javascript 関数を更新しましたが、まだ正しく動作していません

EDIT 2：それが助けになれば、javascript関数がまったく呼び出されていないことがわかります。

4

1 に答える 1

2

close()は jQuery メソッドではなく、Bootstrap モーダル ライブラリの仕組みではありません。また、バインディングがセットアップされた後に DOM に挿入されるように、送信バインディングをバインドするように変更する必要があります。

おそらく、関数を次のように変更する必要があります。

$(function () {
  $("document").on("submit", ".new_user", function() {
      $('.signup').modal("close");
  });
});

さらに、この関数の前に jQuery と Bootstrap モーダル スクリプト ファイルをロードしたことを確認してください。

于 2012-12-30T00:50:47.833 に答える