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

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

ただいまの
回答率

90.48%

  • jQuery

    8315questions

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

  • Ruby on Rails 4

    2547questions

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

  • Bootstrap

    1334questions

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

  • モーダルダイアログ

    19questions

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

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,034

s.k

score 250

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

前提・実現したいこと

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に戻したところ、成功しました!

イメージ説明

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • gin

    2016/11/30 22:55

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

    キャンセル

  • s.k

    2016/11/30 22:57

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

    キャンセル

  • s.k

    2016/11/30 23:01

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

    キャンセル

回答 2

checkベストアンサー

+3

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+1

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

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>

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

同じタグがついた質問を見る

  • jQuery

    8315questions

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

  • Ruby on Rails 4

    2547questions

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

  • Bootstrap

    1334questions

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

  • モーダルダイアログ

    19questions

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