Databases
StackOverflow2013
Postsdbo
PORails 3.2 Modal popup on show action
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PORails 3.2 Modal popup on show action
    text
    copied!<p>None of the questions on this forum seem to address my specific need. Basically, I have a "Details" button. I want it that when it clicks, a modal dialog shows up with information drawn from the show.html.erb of the model. I have a book.rb model. In the index page I have: </p> <pre><code>&lt;div class="detail_button"&gt;&lt;%= link_to "Details", book %&gt;&lt;/div&gt; </code></pre> <p>Clicking this button normally would take me to the book/id page, using the show action. But I don't want it to leave the page, rather I want a modal popup which can be closed. I've tried all the jquery and javascript code on related topics in this forum but none seem to do the trick. Most seem to be addressed to only create or custom actions. </p> <p>Just to avoid any repeats, I have tried the following, none of which worked: </p> <p>This:</p> <pre><code>You could look at modal dialogs by www.jqueryui.com. Add jquery ui to your application. Put a hidden div (display:none) in your layout page. &lt;div class="modal" style="display:none;"&gt; &lt;/div&gt; Your link should be an ajax link: &lt;%= link_to 'Link', events_path(@event), :remote =&gt; true %&gt; Your controller should accept ajax response: def show @event = Event.find(params[:id]) respond_to do |format| format.js end end This is where the magic happens. After pressing the link via ajax, your show.js file will insert content into your empty hidden div and display the popup. Your views should have a javascript file: /view/events/show.js.erb $('.modal').html(&lt;%= escape_javascript(render(@event)) %&gt;); //inserts content into your empty div. $('.modal').dialog(); //jquery ui will open it as a modal popup </code></pre> <p>This:</p> <pre><code>$('a[data-popup]').live('click', function(e) { window.open($(this).attr('href')); e.preventDefault(); }); </code></pre> <p>And this:</p> <pre><code>$('a[data-popup]').live('click', function(e) { window.open($(this).attr('href')); e.preventDefault(); }); = link_to( 'Create a new company', new_company_path, 'data-popup' =&gt; true ) </code></pre> <p>Any help guys? Total noob here.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload