web-dev-qa-db-ja.com

レールでJSリクエストを介してTwitter bootstrap modalを表示するには？

Twitter bootstrap JSリクエストへの応答としてモーダルを表示したい。show.js.erb関数は次のようになります。

$(document).ready(function() {

    $('#dialog').modal('show')

});

ここで、「ダイアログ」はモーダルのIDです。モーダルコード自体は次のようになります。

<div id="dialog" class="modal hide fade">
    <div class="modal-header">
          <a href="#" class="close">&times;</a>
          <h3> Showing Modal </h3>
    </div>
    <div class="modal-body">
        I need to show up!
    </div>
    <div class="modal-footer">
        <a href="#" class="btn primary">Done</a>
    </div>
</div>

私が確信していることの1つは、javascriptが呼び出されていることです。ページ上のアイテムを変更することができます。もう1つは、モーダルが正常に機能していることです。 HTMLボタンを使用して次のようにリクエストをトリガーすると、うまく表示されます。

<button data-controls-modal="dialog" data-backdrop="true" data-keyboard="true" class="btn danger"> Show </button>

モーダルがJSリクエストに表示されない理由は何ですか？

ありがとうございました！

javascriptruby-on-railsmodal-dialog
31
Yusuf Saber

私は同様の問題を抱えていましたが、わずかなひねりで解決しました

私のモーダルdivは、JSリクエストの応答ではなく、呼び出しページに（パーシャルから）レンダリングされます：

<div class="modal hide fade" id="modal-window">
  <div class="modal-header">
    <a href="#" class="close">×</a>
    <h3>Loading...</h3>
  </div>
  <div class="modal-body center">
      <%= image_tag "loading.gif" %>
  </div>
  <div class="modal-footer">&nbsp;</div>
</div>

このリンクを使用して、RailsおよびTwitterの控えめなJS：

<%= link_to negotiation.name, negotiation_path(negotiation), {:remote => true, 'data-controls-modal' =>  "modal-window", 'data-backdrop' => true, 'data-keyboard' => true} %>

show.js.erbは次のようになります（短縮）

$('.modal-body').html('<%= escape_javascript(render :partial => 'negotiationdetail', :object => @negotiation) %>');
$('.modal-header').remove(); // don't need a header here

これは正常に機能し、モーダルにデータが入力されている間にユーザーに「読み込み中」のアニメーションを表示するという利点があります。

38
Pierre

この問題が発生したので、javascriptのレンダリングを次のように変更して修正しました。

    $("#modal-window").find(".modal-content").html("<%= j (render 'new') %>");
    $("#modal-window").modal();

モーダルウィンドウ：

    <div id="modal-window" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content"></div>
      </div>
    </div>

詳細な説明はこちらで確認できます https://kolosek.com/Rails-creating-modals

1
Nesha Zoric

私は同じ問題に直面しており、それは次のように解決されています

  1. jqueryファイル（jquery_171_min.jsなど）をロードします
  2. そして、少ないjsとcssをロードし、
  3. bootstrap-modal.jsをロードします

このシーケンスで試してください。

0
Anuja Patil

この例は非常にうまく機能します。

<body>
    <div id="top"> 
       <a tabindex="-1" href="metadata.html" id="metadata-link" data-target="#modal" data-toggle="modal">Metadata</a>
    </div>

    <div id="modal" class="modal hide fade in" style="display:none;">
      <div class="modal-header">header<a class="close" data-dismiss="modal">x</a></div>
      <div class="modal-body"></div>
      <div class="model-footer">footer</div>
    </div>

 <script>

  $(document).ready(function() {
     $('#top').find('a').trigger('click');

    });
 </script>
</body>

宜しくお願いします。

0
Tabares

そのコードは動作するはずです（ドキュメントにモーダルを表示する準備ができているのと同じようなことをしています）。

Bootstrap-modal.jsをロードしていることを確認し、カスタムJSがロードされる前にロードされていることを確認してください。カスタムJSが最初にロードされる場合、この動作が表示されます。

0
Catherine Powell

この問題がありました

私の原因は、モーダルを完全に部分ファイルに設定し、他のビューファイルからモーダルを呼び出すトリガー（ボタン/リンク）を置くことでした。

そのため、トリガーボタンがインデックスビューページにあり、_form.html.erbファイルにモーダルを作成するとします。そして、そのモーダルを使用してインデックスページから新しいレコードを作成します。

解決：

  • トリガーと同じファイルに「id」を持つ最も外側のdivを作成します

index.html.erb-トリガーボタン

<h3>
  <%= link_to 'Add Category',
    new_todo_path,
    remote: true,
    class: "btn btn-lg btn-success",
    data: {toggle: "modal", target: "#modal_form_category"} 
  %>
</h3>

index.html.erb-モーダルの最も外側

<div id="modal_form_category" class="modal fade" role="dialog">
</div>

new.js.erb

$(document).ready(function() {
  $("#modal_form_category").html("<%= j render "form" %>");
});

追伸：new.js.erbをご容赦くださいページの準備ができるまでコードを囲む絶対的な理由はありません。 ready関数がなくても機能すると思います。あなたがそれが必要であるかどうか知っているならば、教えてください。

0
Rajan