Rails jquery ajax得到响应200，但数据不追加

Question

我试图在bootstrap模态中打开部分。虽然试图这样做，但我得到了200响应，但show.haml中的js无法正常工作。我还添加了警报消息，用于未触发的测试。在获取响应中，它获取整个应用程序布局模板，而不是仅获取模态部分。我使用设计宝石进行身份验证。

控制器

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> 

Answer 1

在js行动应该解决的问题设置render layout: false：

def show 
    @hotels = Hotel.find(params[:id]) 
    respond_to do |format| 
    format.html 
    format.js { render layout: false } 
    end 
end