how to view the output of a file with .html.haml extension - ruby-on-rails

Question

Please help me, I am working on a rails project and I've created a view file with extension .html.haml but now when I am trying to view the output of that file it is giving an error. Is there any other method to view the files of such extension, I am using the way as i use to view my file with exyension .html.erb. I've created an action in controller nd matches the path in routes.rb. Please help me , Thanks in advance.
My routes.rb file is
PretAChef::Application.routes.draw do
# mount FeatherCms::Engine => "/feathers"
# get 'pages/:name' => 'feather_cms/pages#published', :as => 'feather_published_page'
resources :messages, only: [:destroy, :show] do
member do
post :reply
get :mark_read
end
end
resources :bookings, only: [] do
resources :messages, only: [:new, :create]
end
resources :chefs, :only => [:index, :show] do
member do
get :feedbacks
end
end
resources :customers, :only => [] do
member do
get :feedbacks
end
end
resources :ingredients, only: [:index]
resources :cuisines, only: [:index]
resources :home do
collection do
post :contact
end
end
root :to => 'home#index'
match 'contact_us' => 'home#contact_us', :as => :contact_us
match 'mypop' => 'chefs#mypop', :as => :mypop
devise_for :users, :controllers => {:registrations => "users/registrations", :sessions => "users/sessions", :passwords => "users/passwords", :confirmations => "users/confirmations", :omniauth_callbacks => "users/omniauth_callbacks" }
devise_scope :user do
match "/chef/sign_up" => "users/registrations#new_chef", as: :chef_sign_up
match "/chef/sign_in" => "users/sessions#new_chef", as: :chef_sign_in
match "/users/sign_out" => "users/sessions#destroy", as: :sign_out
end
resource :profiles, :only => [:edit, :update] do
end
namespace :customer do
resource :dashboards, only: [:show]
resources :bookings, :only => [:create, :update, :edit, :destroy] do
collection do
get :booking_confirmation
get :book_chef
end
member do
# TODO: WTF: use destroy for cancelation
post :rate
post :comment
get :feedback
get :pay
get :complete
get :confirm
end
end
end
namespace :admin do
resources :messages, only: [:index, :show] do
collection do
get :contact_us
get :messages
end
end
resources :cuisines, except: [:show]
resources :bookings, only: [:index, :update, :edit, :destroy]
resources :users, only: [:index, :update, :edit] do
collection do
get :active
get :pending
end
resources :menus, except: [:index] do
collection do
post :preview
get :destory_dish_image
end
end
resources :availabilities, only: [:create, :destroy]
resources :chef_messages, only: [:destroy, :show, :index, :new, :create] do
member do
post :reply
get :mark_read
end
end
namespace :chef do
resources :bookings, only: [:edit, :update] do
member do
get :accept
post :rate
post :comment
get :feedback
end
end
end
end
resources :searches, only: [:index] do
collection do
get "user"
end
end
end
namespace :chef do
resources :bookings, only: [:edit, :update] do
member do
get :accept
post :rate
post :comment
get :feedback
end
end
resource :dashboards, only: [:show]
resources :menus, except: [:index] do
collection do
post :preview
get :destory_dish_image
end
end
resources :availabilities, only: [:create, :destroy]
end
# The priority is based upon order of creation:
# first created -> highest priority.
# Sample of regular route:
# match 'products/:id' => 'catalog#view'
# Keep in mind you can assign values other than :controller and :action
# Sample of named route:
# match 'products/:id/purchase' => 'catalog#purchase', :as => :purchase
# This route can be invoked with purchase_url(:id => product.id)
# Sample resource route (maps HTTP verbs to controller actions automatically):
# resources :products
# Sample resource route with options:
# resources :products do
# member do
# get 'short'
# post 'toggle'
# end
#
# collection do
# get 'sold'
# end
# end
# Sample resource route with sub-resources:
# resources :products do
# resources :comments, :sales
# resource :seller
# end
# Sample resource route with more complex sub-resources
# resources :products do
# resources :comments
# resources :sales do
# get 'recent', :on => :collection
# end
# end
# Sample resource route within a namespace:
# namespace :admin do
# # Directs /admin/products/* to Admin::ProductsController
# # (app/controllers/admin/products_controller.rb)
# resources :products
# end
# You can have the root of your site routed with "root"
# just remember to delete public/index.html.
# root :to => 'welcome#index'
# See how all your routes lay out with "rake routes"
# This is a legacy wild controller route that's not recommended for RESTful applications.
# Note: This route will make all actions in every controller accessible via GET requests.
# match ':controller(/:action(/:id))(.:format)'
end
and my view file is
!!!
%html
%head
:css
/* popup_box DIV-Styles*/
#popup_box {
display:none; /* Hide the DIV */
position:fixed;
_position:absolute; /* hack for internet explorer 6 */
height:300px;
width:600px;
background:#FFFFFF;
left: 300px;
top: 150px;
z-index:100; /* Layering ( on-top of others), if you have lots of layers: I just maximized, you can change it yourself */
margin-left: 15px;
/* additional features, can be omitted */
border:2px solid #ff0000;
padding:15px;
font-size:15px;
-moz-box-shadow: 0 0 5px #ff0000;
-webkit-box-shadow: 0 0 5px #ff0000;
box-shadow: 0 0 5px #ff0000;
}
#container {
background: #d2d2d2; /*Sample*/
width:100%;
height:100%;
}
a{
cursor: pointer;
text-decoration:none;
}
/* This is for the positioning of the Close Link */
#popupBoxClose {
font-size:20px;
line-height:15px;
right:5px;
top:5px;
position:absolute;
color:#6fa5e2;
font-weight:500;
}
%title Popup Box DIV
%script{src: "http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js", type: "text/javascript"}
:javascript
$(document).ready( function() {
// When site loaded, load the Popupbox First
loadPopupBox();
$('#popupBoxClose').click( function() {
unloadPopupBox();
});
$('#container').click( function() {
unloadPopupBox();
});
function unloadPopupBox() { // TO Unload the Popupbox
$('#popup_box').fadeOut("slow");
$("#container").css({ // this is just for style
"opacity": "1"
});
}
function loadPopupBox() { // To Load the Popupbox
$('#popup_box').fadeIn("slow");
$("#container").css({ // this is just for style
"opacity": "0.3"
});
}
});
%body
#popup_box
/ OUR PopupBox DIV
%h1 This IS A Cool PopUp
%a#popupBoxClose Close
#container
/ Main Page
%h1 sample
and my action is mypop in chefs controller.

Answer 1

It seems you have not installed a gem for it. All you need to do is add gem "haml" to your Gemfile. Run bundle install
And you're done.

Answer 2

First of all you need to place all your css and script under assets and not on the template itself and secondly can you explain your problem a little. I mean what action are you calling, how are you rendering your file and to which action its going