Fancybox-Lightbox2 modal with some Ajax in Rails 3

Question

Trying to build some modal windows to show the crud in a nicer interface. Would preferably want to do this using Jquery as intend to use jquery-ui in other parts of the app.

I have divs in my app layout

<div id="modal-container"></div>
<div id="modal">
  <a href="#" class="close">close</a>
</div>

which then are called upon with Ajax

$(function(){
  var $modal = $('#modal'),
      $modal_close = $modal.find('.close'),
      $modal_container = $('#modal-container');

  $('a[data-remote]').live('ajax:beforeSend', function(e, xhr, settings){
    xhr.setRequestHeader('accept', '*/*;q=0.5, text/html, ' + settings.accepts.html);
  });

  $('a[data-remote]').live('ajax:success', function(xhr, data, status){
    $modal
      .html(data)
      .prepend($modal_close)
      .css('top', $(window).scrollTop() + 40)
      .show();
    $modal_container.show();
  });

  $('.close', '#modal').live('click', function(){
    $modal_container.hide();
    $modal.hide();
    return false;
  });
});

Now, there is some styling as well etc, however, well... it just doesn't look top-notch. I was hoping to use lightbox or facebox or some other of those plugins which look really cool, but haven't been able to so far due to lack of tutorials online.

Can someone please help on the implementation into Rails 3 of these?

Thanks a lot!

Answer 1

Let's try to sum up how you organized the whole thing.

Did you put jquery and plugins files in the folder: /public/javascripts ?

In your main layout file (/app/views/layout) do you load the scripts?

<%= javascript_include_tag 'jquery-1.4.4.min' %>
<%= javascript_include_tag 'rails' %>
<%= javascript_include_tag 'jquery-ui-1.8.7.custom.min' %>
<%= javascript_include_tag 'application' %>

You should get rid of all the other javascripts including prototype.

You don't necessarily need the file application.js for testing purposes. You can just put your ajax code in the HEAD section of your view.

This ajax code should be wrapped around $(document).ready() like this:

<script type="text/javascript">
    $(document).ready(function() {
        $('.delete_phone').bind('ajax:success', function() {  
            $(this).closest('tr').fadeOut();  
        });
    });
</script>

In a list of telephone numbers (inside an HTML table), this code deletes 1 row when you click on a corresponding delete link like this one:

<%= link_to image_tag("editdelete.png", :size => "16x16", "Delete Phone"),
    { :controller => 'phone_controller',
        :action => 'destroy_phone',
        :id => phone },
        :method => :delete, :confirm => "Are you sure?",
        :remote => true, :class=>'delete_phone'
%>

Does organizing your code like this changes something?

---

EDIT:

You should change a few things in the phone_controller file:

  def destroy_phone
      @phone = Phone.find(params[:id])
      @phone.destroy
      respond_to do |format|
          format.js   { render :nothing => true }
      end
  end

Note the respond_to code. It tells rails that this is a javascript action and that the controller shouldn't render anything other than js.