Question

我试图在'card'类的onclick事件上打开一个模式。模态打开后，我试图从控制器中获取数据到模态内部的表单中

查看

<% words.each_with_index do |word, index| %>
  <div class="card" id="card_<%= dom_id(word) %>">
    <div class="card-body">
        <button id="remove_word_<%= dom_id(word) %>" class="btn btn-danger fa fa-close delete-word">
        </button>
        <% if born %>
          <h5 class="card-title" id="<%= dom_id(word) %>"><b><br/><%= word.aword + " " %></b><span class="badge badge-warning new-message">New</span></h5>
        <% else %>
            <h5 class="card-title" id="<%= dom_id(word) %>"><b>#<%= index + 1 %><br/><%= word.aword %></b></h5>
        <% end %>
      <h6 class="card-subtitle mb-2 text-muted">created at <%= word.created_at.strftime("%B %d, %Y") %></h6>
        <% word.meanings.each do |meaning| %>
            <p class="card-text" id="<%= dom_id(meaning)%>"><i><%= meaning.describe %></i></p>
        <% end %>
    </div>
  </div>
<% end %>

这是模态

<div class="modal fade" id="edit-word" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Add new word</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <%= simple_form_for :vocab, remote: true, url: words_path do |f| %>
          <%= f.input :aword, as: :string %>
          <%= f.input :meaning, as: :string %>
          <%= f.submit "Save changes", class:"btn btn-sm btn-primary pull-right", id:"save" %>
        <% end %>
      </div>
    </div>
  </div>
</div>

我的脚本

$(".card").on('click', function(){
    console.log("click card")
    $('#edit-word #vocab_aword').val("");
    $('#edit-word #vocab_meaning').val("");
    $("#edit-word").modal('show');
    var card_id = $(this).attr('id')
    $('#edit-word').on('shown.bs.modal', {card: card_id}, function (e) {
      console.log(card_id + " ")
    $.ajax({
      type: 'get',
      url: '/words/' + e.data.card,
        success: function(data) {
          $('#edit-word #vocab_aword').val(data.word);
          $('#edit-word #vocab_meaning').val(data.meaning);

        }
      });
    })
  });

当我单击一个卡时，我希望看到从服务器端填充的数据，该数据显示在我的模态中，但单击时却显示出来。但这无法正常工作。首先，我尝试清除文本输入字段，然后从服务器获取后，尝试使用响应内容填充它。

我从控制台获得的更多调试信息：

click card
VM2157:9 card_word_1 
VM2157:3 click card
VM2157:9 card_word_1
VM2157:9 card_word_2 
VM2157:3 click card
VM2157:9 card_word_1 
VM2157:9 card_word_2
VM2157:9 card_word_3 
VM2157:3 click card
VM2157:9 card_word_1 
VM2157:9 card_word_2 
VM2157:9 card_word_3 
VM2157:9 card_word_4

我的期望：

click card
VM2157:9 card_word_1 
click card
VM2157:9 card_word_2 
click card
VM2157:9 card_word_3
click card
VM2157:9 card_word_4

多模式展示被点击触发

0 个答案: