How to use the link_to helper to open a popup?

Question

I just want to use link_to to open a popup. I tried something but it doesn't work:

 <%= link_to 'Create a new company',
             new_company_path,
             :popup => ['create_company', 'height=600, width=600'] %> <br/>

Any idea?

Thanks!

Solution 1

My first stab at this problem would probably look something like this. It assumes you're using rails 3, jQuery and jquery-rails. If you're not, this approach definitely won't work. This exact code isn't tested, so your mileage may vary. I'm just trying to give you an idea on how you might want to think about the problem. If you'd like me to elaborate on how this works, or have questions, let me know and I'll do my best to explain.

Turn your link_to into an ajax post:

<%= link_to "Create a new company", new_company_path, :remote => true, :method => :post %>

In your controller, respond with a javascript template:

def create
    @company = Company.new(params[:company])
    respond_to do |format|
       if @company.save
          format.js
       else
          format.js { render 'error' }
       end
    end
end

In views/companies/create.js.erb, execute the JS to open the new window.

window.open (<%= company_url(@company) %>, "mywindow","width=600,height=600");

And that should more or less do it, I think. I've had a few beers, so proceed with caution.

Solution 2

Add this to your application.js.

$('a[data-popup]').on('click', function(e) { window.open($(this).attr('href')); e.preventDefault(); });

In the view, use something like:

= link_to( 'Create a new company', new_company_path, 'data-popup' => true )

Solution 3

<%= link_to 'Create a new company',
         new_company_path, 
        :onclick=>"window.open(this.href,'create_company', 'height=600, width=600');return false;" 
%>

Solution 4

If your goal is just to open the link in a new window and you don't care about managing the dimensions/toolbar/etc, you can also use good old HTML:

<%= link_to 'Create a new company', new_company_path, :target => '_blank' %>

Solution 5

This is the quick and dirty solution

<%= link_to 'Create a new company',
             '#', :onclick => "javascript:window.open(new_company_path,'popup','width=600,height=600');" %>

View more solutions

Comments

[Viktor Trón]

yes but it used to work generating the onclick="window.open(this.href,'create_company', 'height=600, width=600');return false;"

[Viktor Trón]

how come the new jrails ujs driver stopped supporting this. although popup is not an option in the docs, still apidock.com/rails/ActionView/Helpers/UrlHelper/link_to

[skalee]

Isn't it better to add class popup and add popup behaviour to all links having this class instead of ugly inline js? You could store title and other stuff in data-something attributes.

[iterion]

By far the most elegant - esp if you add something like data-options='height=600, width=600'

[David Grayson]

I don't think this is ugly. It puts all the code for opening a popup in one place so it is less likely to break in the future. You don't have to remember to add some jquery to every page to make this work, and you don't have the overhead required to run that jquery code.

[David Grayson]

Isn't this way more complicated than viktor tron's answer? It involves creating an extra controller action, creating an extra view, and it requires the user's browser to make an extra request to the server so it will be noticeably slower. What is the overall advantage or thought process behind this design?

[Viktor Trón]

you are both right. worldview issue :) - unobtrusive js purists will go via js hook on css class.

[Martin M]

As current jQuery versions drop live, I'd prefer $('body').on('click','a[data-popup]', ...