よろしくお願いします。
###前提・実現したいこと
投稿のid(micropost.user_id)をモーダルダイアログへ送りたいです。
###書き出し
投稿からdata-=""でモーダルへ送った投稿のidが一致しません。
data-user_data = "<%= micropost.user_id %>"(投稿上) ≠ <%= micropost.user_id %>(モーダル上)
①データをdata-user_idへセット
②javascriptでデータを送る
③モーダルで送られてきたデータを表示
###結果の予想
ダイアログ表示の起点となる投稿のid(micropost.user_id) = ダイアログ上に送られてきたid(micropost.user_id)
###実際の結果
ダイアログ表示の起点となる投稿のid(micropost.user_id) ≠ ダイアログ上に送られてきたid(micropost.user_id)
###ステップ明記
②がうまくいきません。
送ったデータが変わってしまう、もしくはデータが送られておらず、代わりのidが送られている。
それか別の何かが悪さをしている。
###判断理由
①,③では以下のコードを表示させています。
【①(_micropost.html.erb)】
<%= micropost.user_id %> →1 <% @id = micropost.user_id %> <%= @id %> →1
【③(_micropost.html.erb)】
<%= current_user.id %> →3 <%= micropost.user_id %> →3 <%= @id %> →3
###ソースまとめ
【_micropost.html.erb】①データをdata-user_idへセット
<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='<%= micropost.user_id %>★'>
【_micropost.html.erb】②javascriptでデータを送る
<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>
【_micropost.html.erb】③モーダルで送られてきたデータを表示
<div class="modal-body"> <div class="modal-micropost-content"></div> <div class="modal-micropost-time"></div> Modal内容 <!-- User 削除リンク --> <div class="micropost-option"> <%= current_user.id %> →3 <%= micropost.user_id %> →3 <%= @id %> →3 <% if current_user.id == @id %> <%= user_delete(micropost.user, micropost) %> <% end %> </div> ・ ・ ・ </div>
data-user_name,data-user_content,data-user_timeに関してはデータが一致して送られていることを確認しています…
###追加情報
モーダルコード部分をパーシャルにした結果、このような結果が出てきましたので、
データが送られていなかったのかもしれません。
undefined local variable or method `micropost' for #<#<Class:0x00000005444a58>:0x007f5a6ac10e28>
data部分をtextに直すと文字列の値は正しく表示されます。
【_micropost.html.erb】
modal.find('.modal-body .modal-micropost-option').★data★(user_data);
modal.find('.modal-body .modal-micropost-option').★text★(user_data);
【_modal.html.erb】
<div class"micropost-option"> 1 </div>
【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>
あなたの回答
tips
プレビュー