質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ruby on Rails 4

Ruby on Rails4はRubyによって書かれたオープンソースのウェブフレームワークです。 Ruby on Railsは「設定より規約」の原則に従っており、効率的に作業を行うために再開発を行う必要をなくしてくれます。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Q&A

0回答

1802閲覧

投稿のidをモーダルダイアログへ送ることができません。

s.k

総合スコア423

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ruby on Rails 4

Ruby on Rails4はRubyによって書かれたオープンソースのウェブフレームワークです。 Ruby on Railsは「設定より規約」の原則に従っており、効率的に作業を行うために再開発を行う必要をなくしてくれます。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

0グッド

2クリップ

投稿2016/12/02 07:12

編集2022/01/12 10:55

よろしくお願いします。

###前提・実現したいこと

投稿の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">&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>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問