質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.81%

Railsのajaxを制御したい

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 54

score 53

ボタンをクリックしたらjqueryでモーダルウィンドウでフォームを表示させ、submitボタンをクリックした時にajax(js.erb)でバリデーションの結果を表示させる機能を作成していますが、
そのモーダルウィンドウを非表示にする×ボタンをクリックすると、エラーメッセージが表示されてしまいます。

submitボタンをクリックした時にだけajaxが作動するようにしたいのですが、そのような方法はあるでしょうか?

コードは以下の通りです。

// show.html.erb
<%= form_with url: tests_create_path, id:'create_form' do |f| %>
    <button class="close close-modal">
        <%= icon('fas', 'times' ) %>
    </button>
    <%= f.text_field :name, id:'text_field' %>
    <div id="message">
    </div>
    <div class="actions">
        <%= f.submit "登録" , id:'create_button' %>
    </div>
<% end %>
// modal_window.js

$(function() {                                                                                                                                  
  $(document).on('turbolinks:load', function() {                                                                                                
    // モーダルウィンドウ表示                                                                                                                                 
    $(document).on('click', '.create-test-btn', function(e){                                                                                                                   
      $('.container').fadeIn();                                                                                                
    });                                                                                                                                     
    // モーダルウィンドウ非表示                                                                                                                                        
    $('.close-modal').on('click',function(){                                                                                                                                                                                          
      $('.container').fadeOut();                                                                                                
    });                                                                                                                                 

    $('.overlay').on('click',function(){                                                                                                                                                                                            
      $('.container').fadeOut();                                                                                                
    });                                                                                                
  });                                                                                                
});
// create.js.erb
// エラーメッセージを呼び出す
$(function(){                                                         
    document.body.addEventListener('ajax:success', function(event) {                                    
      // ajax done                                    
      <% if @test.errors.any? %>                                    
        $("#message").html("<p><%= j(render partial: 'error_message', locals: {model: @project_object}) %></p>")                                    
      <% else %>                                    
        $("#message").html("<p><%= j(render partial: 'flash_message', locals: {model: @project_object}) %></p>")                                                                   
      <% end %>                                    
    });                                    

    document.body.addEventListener('ajax:error', function(event) {                                    
      // ajax fail                                    
      alert("エラー");                                    
    });                                    

    document.body.addEventListener('ajax:complete', function(event) {                                    
      // ajax always                                    
    });                                                                                                                                                                                                                    
});  
// _error_message.html.erb
<% if model.errors.any? %>
  <div id="validation-errors">
    <p><%= model.errors.count %>件のエラーがあります。</p>
    <ul class="error-messages">
      <% model.errors.full_messages.each do |message| %>
        <li class="error-message"><%= message %></li>
      <% end %>
    </ul>
  </div>
<% end %>

ご教示いただけることがあれば、よろしくお願いいたします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2021/07/22 12:31

    エラーメッセージとは?

    キャンセル

  • course_so

    2021/07/22 12:34

    create.js.erb内でj(render partial: 'error_message')で呼び出しているhtml.erbのパーシャルです

    キャンセル

回答 1

check解決した方法

0

<button class="close close-modal">がform内に入っていたのが原因でした。しつれいしました

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.81%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る