我想告诉伟大的美国人。 现在,我想问一下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">×</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>