首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >rails应用程序中未弹出模式窗口

rails应用程序中未弹出模式窗口
EN

Stack Overflow用户
提问于 2019-02-07 19:48:22
回答 1查看 168关注 0票数 1

我正在使用一个链接来触发ajax,它应该弹出一个窗口,但我无法做到这一点。我正在使用gem‘bootstrap- code rails’,并尝试使用以下代码

//index/html.erb

代码语言:javascript
复制
<%= link_to 'Link', load_users_teams_path(format: "js"), remote: true %>
<div id="id"></div>

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

//控制器

代码语言:javascript
复制
def load_users
    @user = User.all
    respond_to do |format|
      format.html
      format.js
    end
  end

//load_users.js.erb

代码语言:javascript
复制
$("#modal-window").html("<%= escape_javascript( render 'teams/load_users' ) %>");
$("#modal-window").modal() 

//load_users.html.erb

代码语言:javascript
复制
<div class="modal-header">
   <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
   <h3 id="myModalLabel">Modal header</h3>
 </div>
 <div class="modal-body">
   **here comes whatever you want to show!**
 </div>
 <div class="modal-footer">
   <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
   <button class="btn btn-primary">Save changes</button>
 </div>

厌倦了一个星期的尝试..请给我指引

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-02-13 18:40:16

我在gemfile中添加了几个gem。

代码语言:javascript
复制
gem 'jquery-rails'
gem 'bootstrap-sass', '~> 3.4.0'
gem 'sassc-rails', '>= 2.0.0'
gem 'bootstrap-modal-rails'

在application.js下面提到了这些

代码语言:javascript
复制
//= require rails-ujs
//= twitter-bootstrap
//= require activestorage
//= require turbolinks
//= require jquery
//= require bootstrap-modal
//= require bootstrap-modalmanager

在application.js下面提到了这些

代码语言:javascript
复制
 *= require_tree .
 *= require_self
 *= require bootstrap-modal-bs3patch
 *= require bootstrap-modal

更改了application.html.erb的主体

代码语言:javascript
复制
<body>
  <%= render 'layouts/header' %>
    <div class="page-wrap">
    <div class="span9"><%= yield %></div>
    <div id="modal-window" class="modal fade" role="dialog" data-backdrop="static" style="z-index: 9999;" ></div>
    </div>
    <div id="modal-window" class="modal fade" role="dialog" style="z-index: 9999;" ></div>
    <%= render 'layouts/footer' %>
  </body>

_load_user.html.erb

代码语言:javascript
复制
<div class="modal-header">
<div class="modal-window">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
<div class="modal-body">
here comes whatever you want to show!
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
</div>

load_user.js.erb

代码语言:javascript
复制
$("#modal-window").html("<%= escape_javascript( render "load_users") %>");
$("#modal-window").modal();

new.html.erb

代码语言:javascript
复制
<%= link_to 'Link' ,load_users_teams_path, remote: true %>

这解决了我的问题,实际上我在new.html.erb上的代码与application.html.erb文件冲突,并且缺少一些gem

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/54572687

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档