JQuery UI dialog display action (Rails 3)

Question

Hi All!

Before I start, I'm a beginner at javascript, rails 3 and jQuery so please provide full examples.

Here is what i'm trying to do: I have build a rails app with scaffold and changed the default javascript to jQuery in order to make a piechart on the dashboard work.

So now I though I could add the jQuery UI and display a dialog box with a Show action of the created scaffold when someone clicks on Show.

The title of the dialog box must be the id.

Unfortunately everything I've tried so far has not worked.

I've tried things like: , :remote => true,

I think the biggest problem is, is that a POST is executed (at least if i look in the errors in the terminal, it says:

Started POST "/trips/1" for 127.0.0.1 at Sun Sep 19 11:07:24 +0200 2010
ActionController::RoutingError (No route matches "/trips/1"):

I think a GET should be executed.

Here's my full index file:

<h1>Listing trips</h1>

<table>
<tr>
<th>License</th>
<th>Contract</th>
<th>Time</th>
<th></th>
</tr>

<% @trips.each do |trip| %>
<tr>
<td><%= trip.license %></td>
<td><%= trip.contract %></td>
<td><%= trip.time %></td>
<td><%= link_to 'Show', trip, 'class'=>"ajax", :remote => true %></td>
<td><%= link_to 'Show', trip, 'class'=>"ajax" %></td>
<td><%= link_to 'Show', trip, 'id' => 'opener', :remote => true %></td>
<td><%= link_to 'Show', trip, 'id' => 'opener' %></td>
<td><%= link_to 'Show', trip, 'id' => 'showdialog', :remote => true %></td>
</tr>
<% end %>
</table>

<div id="example"></div>

<script type="text/javascript">
$(document).ready(function(){
var dialogOpts = {
  modal: true,
  bgiframe: true,
  autoOpen: false,
  height: 500,
  width: 500,
  draggable: true,
  resizeable: true,
};
$("#example").dialog(dialogOpts);   //end dialog

$('#showdialog').click(
  function() {
     $("#example").load(this.href, type: 'get', function(){
           $("#example").dialog("open");
        } 
     );
     return false;
  }
);

});
</script>

<script type="text/javascript">
$(document).ready(function() {
var dialogOpts = {
    autoOpen: false,
    title: 'Trip: Trip Number comes here',
    modal: true,
    height: 600,
    width: 600,
    draggable: false,
    resizable: false        
}

var $dialog = $('<div></div>')
    .html('Must become show action!')
    .dialog(dialogOpts);

    $('ae[data-remote=true]').live('click', function() {
      $dialog.dialog('open');
      return false;
    });

$('#opeaner').click(function() {
    $dialog.dialog('open');
    // prevent the default action, e.g., following a link
    return false;
});
});

    $(function (){
            $('aa.ajax').click(function() {
                    var url = this.href;
                    var dialog = $('<div></div>');
                    // load remote content
                    jQuery.ajax({type: 'GET'})
                    dialog.load(
                            url, 
                            {},
                            function (responseText, textStatus, XMLHttpRequest) {
                                    dialog.dialog();
                            }
                    );
                    //prevent the browser to follow the link
                    return false;
            });
    });

    var request = function(options) {
      $.ajax($.extend({ url : options.url, type : 'get' }, options));
      return false;
    };

    // remote links handler
    $('a[data-remote=true]').live('click', function() {
      return request({ url : this.href });
    });

</script>

I know that it is 1 big mess right now, but that's because I've been trying a lot of things so I've changed some tags to allow new things to work.

The only thing that has worked so far but didn't give me a Show action, just a regular Dialog with some options is the: #opeaner one

Thank you so much! very appreciated!

Answer 1

Try to specify the method in your link (:get in this case), in order to reach the show action:

<%= link_to 'Show', trip, 'id' => 'showdialog', :remote => true, :method => :get %>