0

ジョブ モデルを備えた Rails アプリがあり、インデックス ページには各ジョブのフォームがあります。送信ボタンが選択されるたびに特定のフォームにアクセスできるようにする必要があるため、フォームの入力を取得して、それを使用して jQuery 検証を実行できます。

これが私のindex.htmlページの一部です。

<ul>
  <% @unassigned.each do |job| %>
    <li>
            <div class="row new-message">
              <div class="small-12 columns">
                  <%= form_for @message do |f| %>
                    <%= f.text_area :body, {placeholder: 'enter a new message...'} %>
                    <%= f.hidden_field :job_id, value: job.id %>
                    <%= f.submit 'send message', class: 'button small radius secondary message-button', "data-job-id" => job.id %>
                    <div id="message<%= i %>-validation-errors"> </div>
                  <% end %>
              </div>
            </div>
    <li>
  <% end %>
<ul>

そして、ここに特定のフォームから入力を選択しようとするjavascript/jQueryがあります

var messages;

messages = function() {

    $('.message-button').click(function(e) {
        var id = $(this).data('job-id');
        messageValidation(e, id);
    });

    function messageValidation(e, id) {
        var body = $('#message_body').val();
        var div = '#message' + id + '-validation-errors';
    if(body == "") {
      $(div).html('');
      e.preventDefault();
      $(div).html('<small style="color:red"> Message body empty </small>');
    }
    };

};

$(document).ready(messages);

bodyインデックスページには各ジョブのフォームがあり、ボタンが送信されたときにフィールドが空でないことをチェックするフロントエンドの検証が必要です。最初は問題なく動作しますが、インデックス ページに戻って 2 回目の検証を試みるとvar body = $('#message_body').val();、本文に何かを入れたかどうかに関係なく、常に空のように見えます。#message_bodyジョブごとに同じフォームがあるため、同じページに複数の ID があり、間違った ID を選択していることと関係があると思います。私はjQueryが初めてで、javascriptが誰か助けてくれますか

4

2 に答える 2

1

1 つのページに同じ ID を持つ複数の要素を含めることはできません。できることは、classそれらの要素に識別子を追加することです。

あなたの場合、要素に単純に設定class="message_body"し、以下に示すようにそれらを選択します。

$('.message-button').click(function(e) {
    var id = $(this).data('job-id');
    var body = $(this).parent().find('.message_body').val();
    messageValidation(e, body, id);
});
于 2013-06-05T19:20:47.410 に答える
0

この問題を解決するには、フォームの子を選択し、それを通じて message_body を見つける必要がありました。

messages = function() {

    $('.new_message').submit(function(e) {
        //var id = $(this).data('job-id');
        var $this = $(this);
        var body = $this.children('#message_body').val();
        var id = $this.children('#message_job_id').val();
        messageValidation(e, body, id);
    });

    function messageValidation(e, body, id) {
        var div = '#message' + id + '-validation-errors';
    if(body == "") {
      $(div).html('');
      e.preventDefault();
      $(div).html('<small style="color:red"> Message body empty </small>');
    }
    };

};
于 2013-06-05T21:20:42.547 に答える