我正试图在bootstrap模式中打开partial。虽然尝试这样做但我得到200响应，但show.haml中的js无法正常工作。我还添加了警告消息，用于测试但不触发。在get响应中，它获取整个应用程序布局模板，而不是仅获取模态部分。我使用了devise gem进行身份验证。
控制器
def show
@hotels = Hotel.find(params[:id])
respond_to do |format|
format.html
format.js
end
end
index.haml
= link_to 'View', hotel, :remote => 'true'
#myModal
Show.haml
:plain
$('#myModal').append('#{escape_javascript(render(partial: "modal") )}');
alert('js works');
_modal.haml
:plain
<div id="after-load" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false" style="display: block;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Modal Heading</h4>
</div>
<div class="modal-body">
<h4>Text in a modal</h4>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
<h4>Popover in a modal</h4>
<p>This <a href="#" role="button" class="btn btn-default popover-test" title="" data-content="And here's some amazing content. It's very engaging. right?" data-original-title="A Title">button</a> should trigger a popover on click.</p>
<h4>Tooltips in a modal</h4>
<p><a href="#" class="tooltip-test" title="" data-original-title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="" data-original-title="Tooltip">that link</a> should have tooltips on hover.</p>
<hr>
<h4>Overflowing text to show scroll behavior</h4>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
<script>
$('#myModal').modal('show');
</script>
网络标题
Remote Address:127.0.0.1:3000
Request URL:http://localhost:3000/admin_panel/hotels/6
Request Method:GET
Status Code:200 OK
Request Headersview source
Accept:*/*;q=0.5, text/javascript, application/javascript, application/ecmascript, application/x-ecmascript
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Connection:keep-alive
Cookie:request_method=GET; _hotel_management_system_session=RmZ2bVZvOVozREVXZ0JqbUdRR2swVXdYQzBxS1V6QmtEY1p5bHMxNVlBRmcrZTZEYS9hd2tuenpUVlgxek5iWFFoMjFTSWM3UVJHZ3lxSjFsM3VodC81eHBWQytkak9qZTdCQUgrSWNEOXAxVW1BS0hTK3lZZzREeXgwYUMxdGI1bFdvQkcreEtPR0NWdURtK0w5U2h6bTNuZTNscmx1RExrSForNER2V3g4N1N5QU4vWERxNWZFaWFrSlFDcmlMekExK3p6R0ZSV254eFY3RDBJQXpUUHM4U0lwNjRPSEtlL1gwT0JxZEZaMjNqSyt6KzBmMG1scDFrOVlrVnk1Sm1iZXNQTTJ1MFVLSG1aS1lWS3hIQmtSdis3ZGl3MEVEL1pTeFBaNDMvUS91OHhGNEQ3UFBkMmJlVUZCMU9CM2QtLXhJZ0U2c3llTGM1eFMyZkFEM2U5Znc9PQ%3D%3D--4bf522af1dc16a8449aec2679dca0b17979e0339
Host:localhost:3000
If-None-Match:"b3e8adbdf28d0a8eaf7f6e28029abe9c"
Referer:http://localhost:3000/admin_panel/hotels
User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.114 Safari/537.36
X-CSRF-Token:Uii/iMRKdA1/1U3znuskDV5UsHgIlv0m8eHTO6gAIyY=
X-Requested-With:XMLHttpRequest
Response Headersview source
Cache-Control:max-age=0, private, must-revalidate
Connection:close
Content-Type:text/javascript; charset=utf-8
ETag:"588d56c1d81054a12a60c80c050894ac"
Server:thin 1.5.1 codename Straight Razor
Set-Cookie:_hotel_management_system_session=L1FxeHFwNjlOWVRRSG1mNHFFUmVsWXR6bVI4ZHpBK09TaGc5N1MvMEQ0ZTJDcVZGRnpidENCYkwvWHd3czdwMzViR2JZRmtGZWhwR3FneVJQTHliK3NLYzAzeG53QVJOL0xpL2xpNHo3SVpCV1Rmcm9DRWRFdEhQMHpjT0tZUktpSldqalNRb2VqYmxWaSs2SjRYb0U5V1RiZ2JUY2ZnVEpxbEZndjZ3VFdaajRBWi9ZMTFBem5KWHpMeFkyTXBaVTQrd2V5RjQ4SGhETUh6Sy9nR2l4Vllmd2hGQ0w0OU50MzNZT2htS1A0OWdKdVFNQW9iQmI2TklkMFljMjlxRTlTYlV3TThDQmJ4ZWJodXlJcmhPb0ZMYVprTGtLT1F4cHNuUzNYMW0xelBPS2lqZjBwUU9HaitraVZWUHhlM2YtLThCenl5elliTjMzcTZNa041aG8zTGc9PQ%3D%3D--9a5d43d31da30ec25bcd1bae0d39dc3f42e0ba84; path=/; HttpOnly
X-Content-Type-Options:nosniff
X-Frame-Options:SAMEORIGIN
X-Request-Id:fc8a525f-160a-4fe0-aa37-e3c7950f6960
X-Runtime:0.239231
X-XSS-Protection:1; mode=block
网络响应
<!DOCTYPE html>
<html>
<head>
<title>Hotel Management System</title>
<link data-turbolinks-track="true" href="/assets/application.css?body=1" media="all" rel="stylesheet" />
<script data-turbolinks-track="true" src="/assets/jquery.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery_ujs.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/turbolinks.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/amenities.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/dashboard.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/homes.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/hotels.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/affix.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/alert.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/button.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/carousel.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/collapse.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/dropdown.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/tab.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/transition.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/scrollspy.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/modal.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/tooltip.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/popover.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap-sprockets.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/application.js?body=1"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="Uii/iMRKdA1/1U3znuskDV5UsHgIlv0m8eHTO6gAIyY=" name="csrf-token" />
</head>
<body>
<nav class='navbar navbar-default navbar-fixed-top' role='navigation'>
<div class='container-fluid'>
<div class='navbar-header col-xs-11 col-sm-2 col-md-1'>
<button class='navbar-toggle collapsed' data-target='#admin-menu' data-toggle='collapse' type='button'>
<span class='sr-only'>'Toggle navigation'</span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
</button>
<a class="navbar-brand" href="/admin_panel/dashboard">Admin Panel</a>
</div>
<ul class='nav navbar-nav navbar-right col-xs-1 col-sm-1 pull-right'>
<li class='pull-right'>
<span class='glyphicon glyphicon-log-out'></span>
<a data-method="delete" href="/admin_panel_account/sign_out" rel="nofollow">logout</a>
</li>
</ul>
<div class='collapse navbar-collapse col-sm-9' id='admin-menu'>
<ul class='nav navbar-nav admin-menu'>
<li class='dropdown'>
<a class="dropdown-toggle" href="/admin_panel/dashboard"><span class='glyphicon glyphicon-dashboard'></span>
<span class='nav-text'>Dashboard</span>
</a>
<ul class='dropdown-menu' role='menu'>
<li>
<a href="/homes">View Site</a>
</li>
</ul>
</li>
<li>
<a href="/admin_panel/hotels"><span class='glyphicon glyphicon-home'></span>
<span class='nav-text'>Hotels</span>
</a>
</li>
<li>
<a href="/admin_panel/amenities"><span class='glyphicon glyphicon-glass'></span>
<span class='nav-text'>Amenities</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
<div class='container'>
<div class='row'>
<div class='col-md-12 main'>
$('#myModal').html('<div id=\"after-load\" class=\"modal fade in\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"myModalLabel\" aria-hidden=\"false\" style=\"display: block;\">\n <div class=\"modal-dialog\">\n <div class=\"modal-content\">\n\n <div class=\"modal-header\">\n <button type=\"button\" class=\"close\" data-dismiss=\"modal\"><span aria-hidden=\"true\">×<\/span><span class=\"sr-only\">Close<\/span><\/button>\n <h4 class=\"modal-title\" id=\"myModalLabel\">Modal Heading<\/h4>\n <\/div>\n <div class=\"modal-body\">\n <h4>Text in a modal<\/h4>\n <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.<\/p>\n\n <h4>Popover in a modal<\/h4>\n <p>This <a href=\"#\" role=\"button\" class=\"btn btn-default popover-test\" title=\"\" data-content=\"And here\'s some amazing content. It\'s very engaging. right?\" data-original-title=\"A Title\">button<\/a> should trigger a popover on click.<\/p>\n\n <h4>Tooltips in a modal<\/h4>\n <p><a href=\"#\" class=\"tooltip-test\" title=\"\" data-original-title=\"Tooltip\">This link<\/a> and <a href=\"#\" class=\"tooltip-test\" title=\"\" data-original-title=\"Tooltip\">that link<\/a> should have tooltips on hover.<\/p>\n\n <hr>\n\n <h4>Overflowing text to show scroll behavior<\/h4>\n <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.<\/p>\n <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.<\/p>\n <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.<\/p>\n <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.<\/p>\n <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.<\/p>\n <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.<\/p>\n <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.<\/p>\n <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.<\/p>\n <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.<\/p>\n <\/div>\n <div class=\"modal-footer\">\n <button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Close<\/button>\n <button type=\"button\" class=\"btn btn-primary\">Save changes<\/button>\n <\/div>\n\n <\/div><!-- /.modal-content -->\n <\/div><!-- /.modal-dialog -->\n<\/div>\n<script>\n $(\'#myModal\').modal(\'show\');\n<\/script>\n');
alert('Hi');
</div>
</div>
</div>
</body>
</html>
答案 0 :(得分：1)
在render layout: false操作中设置js，它应解决问题：
def show
@hotels = Hotel.find(params[:id])
respond_to do |format|
format.html
format.js { render layout: false }
end
end