无法将id传递给模态窗口

时间:2016-12-02 03:02:28

标签: javascript jquery ruby-on-rails twitter-bootstrap

很高兴见到你 我是日本人。 英文翻译很棒。

我想告诉伟大的美国人。 现在,我想问一下bootestrap提供的模态窗口。

你想要实现的目标

我想将micropost.user_id的值传递给模态窗口。

【】微柱

<%= micropost.user_id %> →1

【模态窗口】

<%= micropost.user_id %> →1

导出

如上图所示,应该传递的id将会改变(全部为3)。

执行程序

①将id插入数据 ②使用javascript在模态窗口中传递id。 ③在模态窗口中显示的显示id。

预期结果

在这种情况下,模态窗口中会显示1。

实际结果

模态窗口中显示

3。 (3是登录用户的ID。)

步骤说明

②使用javascript在模态窗口中传递id。 我认为这是一个问题。

字符串的数据与发送的数据和接收的数据相同。

来源

【_ micropost.html.erb】

<%= micropost.user_id %>→1
<% @id = micropost.user_id %>→1
<%= @id %>→1

【_ micropost.html.erb】①使用javascript将id插入到modal窗口中的数据②Passid。

<div class="micropost-line" data-toggle="modal" data-target="#myModal"
    data-user_name= "<%= username(micropost.user) %>" data-user_content="<%= content(micropost.title, micropost.content)%>" 
    data-user_time="<%= time_ago_in_words(micropost.created_at) %>" ★data-user_data="<% @id %>">★

【_ micropost.html.erb】③在模态窗口中显示的显示内容。

  <div class="modal-body">
    <div class="modal-micropost-content"></div>
     <div class="modal-micropost-time"></div>
    Modalcontent
        <div class="micropost-option">
            <%= current_user.id %> →3★
            <%= @id %> →3(Expect 1)★
            <% if current_user.id == @id %>
            <%= user_delete(micropost.user, micropost) %>
            <% end %>
        </div>
     ・
     ・
   </div>

<script>
    $('#myModal').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget);
        var user_name = button.data('user_name');
        var user_content = button.data('user_content');
        var user_time = button.data('user_time');
        var user_data = button.data('user_data');
        var modal = $(this);
        modal.find('.modal-title').text(user_name);
        modal.find('.modal-body .modal-micropost-content').text(user_content);
        modal.find('.modal-body .modal-micropost-time').text(user_time);
        modal.find('.modal-body .modal-micropost-option').data(user_data);
    });
</script>

环境

rails 4.2.5 bootstrap-sass(3.3.7,3.2.0.0)

感谢您查看我的帖子。

其他信息

【HTML】

<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal タイトル</h4>
      </div>
      <div class="modal-body">
        <div class="modal-micropost-content"></div>
         <div class="modal-micropost-time"></div>
        Modal内容
            <!-- User 削除リンク -->
            <div class="micropost-option">
                3
                3
                3
                </div>
        <button type="button" class="btn btn-primary" data-dismiss="modal">閉じる</button>
       </div>
    </div>
  </div>
</div>




<script>
    $('#myModal').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget);
        var user_name = button.data('user_name');
        var user_content = button.data('user_content');
        var user_time = button.data('user_time');
        var user_data = button.data('user_data');
        var modal = $(this);
        modal.find('.modal-title').text(user_name);
        modal.find('.modal-body .modal-micropost-content').text(user_content);
        modal.find('.modal-body .modal-micropost-time').text(user_time);
        modal.find('.modal-body .micropost-option').data(user_data);
    });
</script>

0 个答案:

没有答案