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

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

新規登録して質問してみよう
ただいま回答率
85.50%
モーダルダイアログ

モーダルダイアログとは、ユーザーに重要な情報を表示するときに用いられる視覚的なダイアログのことを指します。これらのダイアログは他のすべてのコンテンツの上に表示され、ユーザーの入力を受けるまでアプリケーションフローは停止されます。

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

解決済

2回答

4868閲覧

Bootstrapのモーダルダイアログにリンクを挿入したいです。

s.k

総合スコア423

モーダルダイアログ

モーダルダイアログとは、ユーザーに重要な情報を表示するときに用いられる視覚的なダイアログのことを指します。これらのダイアログは他のすべてのコンテンツの上に表示され、ユーザーの入力を受けるまでアプリケーションフローは停止されます。

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グッド

0クリップ

投稿2016/11/30 06:53

編集2016/11/30 13:47

※修正しました。
修正箇所は文末です。

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

Twitterのモーダルウィンドウのように投稿へのいいね!や投稿の削除リンクを実装したいです。

こんな感じです。
イメージ説明

###書き出し

data-=" "link_toを挿入しjQueryでデータを送っているのですがモーダルウィンドウ上に表示されません。

###実行手順

①表示させるイベントを置いている箇所にデータを収納。
②**<script></script>内でjQuery**を動かす。
③モーダルウィンドウで表示。

①表示させるイベントを置いている箇所にデータを収納。
_micropost.html.erb

<div class="micropost-line", data-toggle="modal", data-target="#myModal", ★★data-user_delete="<%= user_delete(micropost.user, micropost)(※ヘルパーです。) %>">★★

②**<script></script>**内でjQueryを動かす。

_micropost.html.erb

<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_delete = button.data('user_delete');★ 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-delete').text(user_delete);★ }); </script>

③モーダルウィンドウで表示。

<div class="modal fade" id="myModal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-body"> ★<div class="modal-micropost-delete"></div>★ Modal内容 </div> </div> </div> </div>

※ヘルパーの中身
・同ファイルでヘルパーが機能していることは確認済みです。

def user_delete(micropost_user, micropost) if user_signed_in? link_to "delete", micropost, method: :delete, data: { confirm: "本当に投稿を削除していいですか?" } if current_user?(micropost_user) end end

###結果の予想

最終的にはこのようなイメージリンクをモーダルウィンドウに表示する予定でした。
【イメージリンク】
イメージ説明

###実際の結果

モーダルウィンドウでご表記されるどころかモーダルウインドウを開く投稿上に表示されてしまいました。

【≠モーダルウィンドウ】
イメージ説明

【モーダルウィンドウ】
イメージ説明

###ステップ明記

①の時点で間違っていると思います。

Bootstrapのモーダルウィンドウにおけるリンク表示の方法が全くべつにあると思いました。というのも、**data-user_delete=**の値を文字列、インスタンス変数.メソッドなどにするとモーダルウィンドウ上に表示されるからです。

###文献の引用
Bootstrap日本語リファレンス

###環境 ――
Gemfile

bootstrap-sass (3.3.7, 3.2.0.0)

Bootstrapのモーダルウィンドウ機能でリンクを挿入する記事を自分なりに探したのですが、見つかりませんでした(*´Д`)

何卒よろしくお願いします。

###修正点

①モデルが違いました。
∟Userでログインをしているにも関わらず、Shopユーザー表示のモーダルをいじっていました。これがデータを送っているにも関わらず、モーダル上にリンクが表示されない原因です。

②モーダルに表示された文字は**<a data-confirmでした。
UserでログインしてUserのモーダル実装箇所をいじった結果、
<a data-confirm**という文字がモーダルで表示されるようになりました。リンクです。しかし、期待する機能(モーダル(投稿)を削除)をしてくれません。

イメージ説明

この表示された文字はヘルパーの一部分です。
【ヘルパー(再掲)】

##削除リンク def user_delete(micropost_user, micropost) if user_signed_in? link_to "delete", micropost, method: :delete, ★data: { confirm:★ "本当に投稿を削除していいですか?" } if current_user?(micropost_user) end end

本当は**"delete"**の部分が表示されてほしいです。
モーダル以外(投稿部分)にも同様のヘルパーは書かれており、機能しています。(deleteが表示され、投稿を削除してくれます。)

ginさんへ

case1:
【条件①】

<div class="modal fade" id="aaamyModal" style="display:block;opacity:1;">

【条件②】
ヘルパーをモーダル箇所に記載

【結果】エラー
データを取り出せないため。

undefined local variable or method `micropost' for #<#<Class:0x00000005ed0328>:0x000000050f3de0>

case2:case1のデータを取り出せない点を踏まえて

【条件①】
idを基に戻し、jsを復帰させる。

<div class="modal fade" id="myModal">

【条件②】
modalの内容部分は**_micropost.html.erbに記載するとコードが多くなりますので、パーシャルにして別ファイルにmodal箇所のコードを記載し、ファイルを呼び出していました。そこを、_micropost.html.erb**に戻したところ、成功しました!

イメージ説明

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

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

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

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

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

gin

2016/11/30 07:06

大勢は変わらないと思うのでここに。①で各属性の後ろに「,」を打ってありますが不要ではないですか??
s.k

2016/11/30 07:11

ginさん ありがとうございます。data-user_delete="<%= ~ %>"の最後に「,」ということですよね!今試してみましたが結果は変わらなかったです!
s.k

2016/11/30 07:16

よみまちがえましたすみません
s.k

2016/11/30 07:18

各属性の「,」は不要でした!リンクは出てきてません((+_+))
gin

2016/11/30 07:39

とりあえずモーダル関係なく壊れているように見えますね。モーダルはあくまで表示非表示やってるだけなので。
s.k

2016/11/30 12:05

ありがとうございます!さらにいろいろ試してみます!ちなみになんですが、もし質問文がわかりにくい点あれば時間が許す限りで構いませんのでご指摘お願いします。回答者のみなさんが読みやすい文を書きたいと思っています。
gin

2016/11/30 12:12

モーダルじゃなく普通の状態(?)では表示されるんです?それをモーダル側に移植したら崩れる感じなのですか?
s.k

2016/11/30 12:58

遅れました!モーダルに移植すると崩れます!モーダル以外の部分は正常に表示され機能します。後、いろいろ質問を修正しました!修正点は、文末です!
gin

2016/11/30 13:06

モーダル以外では期待する機能(?)もできてるということで、次これを。「<div class="modal fade" id="aaamyModal" style="display:block;opacity:1;">」idを適当にしてモーダルの対象から外しCSSで表示されたままにする。
s.k

2016/11/30 13:16

こんな感じでよろしいでしょうか!
gin

2016/11/30 13:25

ん?「モーダル以外では期待する機能(?)もできてる」んですよね?それをモーダルの位置に移植。だけどJSは今関係ないって状態を作ってるだけですよ~
s.k

2016/11/30 13:47

できましたー!
s.k

2016/11/30 13:49 編集

「ヘルパーごとリンクをモーダルへ送る」から「パーシャルをやめてモーダルにヘルパーを直接記載」に変更をして解決できました!
gin

2016/11/30 13:49

おー、完了なんですかね?w
s.k

2016/11/30 13:53

この問題は完了です!さすがっす!感激です!回答していただけますか?
gin

2016/11/30 13:55

私は問題点を順を追って絞り込んでみただけなので、自己解決でいいと思いますよ~。具体策は出してないですしw
s.k

2016/11/30 13:57

絞りこんでいただいたことに対してGoodができないです(*´Д`)
s.k

2016/11/30 14:01

とりあえず、書きますね!
guest

回答2

0

ベストアンサー

とりあえず私はほぼ何もしていませんが、問題点を絞り込んでいったら解決したようです。
やりとりについては「情報の追加・修正の依頼をする」を参照ください。

投稿2016/11/30 14:04

gin

総合スコア2722

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

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

0

リンクの表示方法を変えることでエラーを解決することができました。

bofore
data=~にリンクを表示させるヘルパーを代入しパーシャルファイルに記載したmodalコードへjsを使いデータを送る。
_micropost.html.erb

<div class="micropost-line" data-toggle="modal" data-target="#myModal" data-micropost_id="#{micropost.id}" data-user_name= "<%= shopname(micropost.shop) %>" data-user_content="<%= content(micropost.title, micropost.content)%>" data-user_time="<%= time_ago_in_words(micropost.created_at) %>" ★data-user_delete="<%= shop_delete(micropost.shop, micropost) %>">★ ★<%= render 'microposts/modal' %>★

【_modal.html.erb】

<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> ★<a class="modal-micropost-delete"></a>★ <a src=""></a> Modal内容 </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" data-dismiss="modal">閉じる</button> </div> </div> </div> </div>

after
パ-シャルを解除し、リンクを表示するヘルパーをそのままmodalコードへ記載。

_micropost.html.erb

<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> <a class="modal-micropost-delete"></a> <a src=""></a> Modal内容 <%= user_delete(micropost.user, micropost) %> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" data-dismiss="modal">閉じる</button> </div> </div> </div> </div>

もし、リンクをデータで送る方法がありましたら教えてください。

投稿2016/12/01 01:42

s.k

総合スコア423

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問