在rails 4中使用bootstrap 3 modal打开show view

时间:2014-10-05 06:28:14

标签: ruby-on-rails ruby-on-rails-4 haml

向客户端发送get请求时,会发出500内部服务器错误。我正在使用bootstrap 3,rails 4与其他几个宝石相结合,比如devise,mysql数据库。

错误日志:

GET http://localhost:3000/admin_panel/hotels/6 500 (Internal Server Error) jquery.js?body=1:9632
send jquery.js?body=1:9632
jQuery.extend.ajax jquery.js?body=1:9177
$.rails.rails.ajax jquery_ujs.js?body=1:84
$.rails.rails.handleRemote jquery_ujs.js?body=1:164
(anonymous function) jquery_ujs.js?body=1:342
jQuery.event.dispatch jquery.js?body=1:4642
elemData.handle

控制器:

class HotelsController < ApplicationController
    before_action :authenticate_admin_panel!
    def index
        @hotels = Hotel.all
    end
    def show
        @hotels = Hotel.find(params[:id])
        respond_to do |format|
           format.html
           format.json { render json: @hotels }
        end
    end

show.haml:

 :javascript
    $('#myModal').html('#{j render("show")}');

_show.haml

#myModal
    %table.table.table-hover
        %tr
            %td ID
            %td= @hotels.id
        %tr
            %td Hotel Name
            %td= @hotels.hotel_name
        %tr
            %td Description
            %td= @hotels.description
        %tr
            %td Address
            %td= @hotels.address
        %tr
            %td Postal Code
            %td= @hotels.postal_code
        %tr
            %td City
            %td= @hotels.city
        %tr
            %td State
            %td= @hotels.state
        %tr
            %td Country
            %td= @hotels.country
        %tr
            %td Longitude
            %td= @hotels.longitude
        %tr
            %td Latitude
            %td= @hotels.latitude
        %tr
            %td Rooms
            %td= @hotels.rooms
        %tr
            %td Price
            %td= @hotels.price
    %p= link_to 'Back', hotels_path

的application.js:

var clickOnPopupLink = function(){
    $('body').on('click', '.static-popup-link', function(){
       $('#myModal').modal('show');
    });
}

clickOnPopupLink();

index.haml

= link_to 'View', hotel, {:remote => 'true', 'class' => 'static-popup-link'}
  .modal.hide.fade#myModal{:tabindex => '-1', :role => 'dialog', :'data-backdrop' => 'static', :'data-keyboard' => 'false'} Loading...

1 个答案:

答案 0 :(得分:0)

我认为,每次用户点击您的身体时,您都希望以模态方式添加关于您酒店的内容。 一种方法是在您的操作中使用javascript(如响应)而不是html,因此请使用以下命令更改您的操作节目:

respond_to do |format|
    format.js
end

将show.haml重命名为show.js.haml并填写以下代码:

:plain
$('#myModal').html('#{escape_javascript(render(partial: "show") )}');

在您的部分视图_show.haml中显示您将使用的所有酒店的信息@ hotels.each