October 3

0 comments

Creating pop ups in rails

By Christopher Mendla

October 3, 2016


Last Updated on November 30, 2019 by Christopher G Mendla

Rails pop  ups
there are several steps that will allow you to create a pop up in rails
The following will create a button that will call the popup. Put this in your view.

 

<%= link_to( .html_safe,
            “/stores/send_notifications/1”, # TODO hardwired
            ‘data-popup’ => true,
            :controller => ‘stores’,
            :action => ‘send_notifications’,
            remote: true,
            :class => “button_class”,
            #   :data_position_to => “window”,
            :onclick=>“window.open(this.href,’add raw procurement item’, ‘height=400, width=500, left=400, top=100’ );
                                        return false;”
   ) %><br>

 

The Onclick allows you to specify both the size of the window and the offset. The offset can be a little trick on systems with more than one monitor. Test it.
 
Create a file for the popup. In this case, we are simply pulling in a partial. Also, note the popup styles.

 


<%= render partial: /shared/popup_styles%>
<%= render partial:‘notifications’ %>

 

The popup styles are stylesheet links and includes. In this case, we made a copy from what was in layouts/application and put that into a shared partial. If we didn’t do this, we would be missing some of the layout and formatting that was in our application.html.rb file

 

We need to add a route.

 

get  ‘/stores/send_notifications/:id’ => ‘stores#send_notifications’
post ‘/stores/send_notifications/:id’ => ‘stores#send_notifications’

 

We also create a method in the appropriate controller. The alternate layout is simply a <%= Yield %>. That removes all the rails navigation, headers and footers from the popup

 

def send_notifications
 respond_to do |format|
   format.html { render :layout => ‘alternate’}
   format.js {}
 end
end

Christopher Mendla

About the author

Leave a Reply

Your email address will not be published. Required fields are marked

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}