JQuery modal windows and edit object

Question

I am trying to create some modal windows to appear whenever a user wants to edit an object. I did not do this before, and I was looking for textbooks, but instead of getting direct answers, everything I got is more vague! It seems that there are so many libraries that you can use.

So, I think this question has two parts. If I wanted to do this, are there any special reasons why I would like to choose jQuery over the prototype? Are there any additional options?

The second part actually does this, at the moment I don’t really like using which library.

I have the following standard actions crud, edit and update. Now I would like, when the user clicks on the edit, and not on the page, a window appears where he can edit the ticket name (now this is the only attribute).

in the controller I have this:

def edit @ticket = Ticket.find(params[:id]) end def update @ticket = Ticket.find(params[:id]) if @ticket.update_attributes(params[:ticket]) redirect_to tickets_url, :notice => "Successfully updated ticket." else render :action => 'edit' end end 

Can someone help me with this? Also, of course, tips and links are more than welcome!

Answer 1

UPDATE: here is Rails 5 Adapting this answer using CoffeeScript: https://gist.github.com/1456815

---

jQuery is more popular for good reasons, which I will not enter. Much about this elsewhere.

Assuming you want to use jQuery, the setup is pretty simple:

 # add the following to your Gemfile under `group :development` gem 'jquery-rails' # run the following $ bundle # then let the generator install $ rails g jquery:install 

And then update your Application.rb JavaScript Application Extension Extensions:

 # JavaScript files you want as :defaults (application.js is always included). config.action_view.javascript_expansions[:defaults] = %w( jquery rails ) 

And make sure your layout file (e.g. application.html.erb) contains these files:

 <%= javascript_include_tag :defaults %> 

---

For your modal, there are many opinions on how to do this. Personally, I prefer to minimize my own modal windows based on the needs of the application. These are just a few jQuery-laced JS lines for creating modals that work fine with Rails.js:

 # in a view, perhaps a _modal.html.erb partial that is included into # your layout (probably at the bottom). <div id="modal-container"></div> <div id="modal"> <a href="#" class="close">close</a> </div> 

Here are some styles (scss style) for the modal that I use:

 #modal-container { display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.4); } #modal { display: none; position: absolute; width: 600px; left: 50%; margin-left: (-600px - 40px) / 2; padding: 20px; background: #fff; border: 5px solid #eee; & > .close { position: absolute; right: 5px; top: 5px; color: #666; &:hover, &:active { color: #000; } } } 

This eliminates styles / looks from the path. You might want to customize these styles to fit your application, but they are pretty general, so they should get you started.

To integrate it into Rails, there are 2 parts. First, you need the browser to send AJAX requests for content and show a modal return. Secondly, you need Rails for the answer with the corresponding answer.

Submitting AJAX and processing the responses entails the use of :remote => true in the links / forms that you want to send remotely.

 <%= link_to 'New Post', new_post_path, :remote => true %> 

This will create a data attribute by the link that Rails.js will receive, allowing it to be sent remotely automatically. It expects javascript to return, and it will execute this response when it receives it. You can add a quick format.js to each respond_to action respond_to and create an accompanying new.js.erb file containing the JS needed to actually populate and display the modality. This is good, but we can DRY this a little more than that by returning a template without a layout and moving the modal show / hide responsibilities in application.js:

 # in your app controller, you'll want to set the layout to nil for XHR (ajax) requests class ApplicationController < ActionController::Base layout Proc.new { |controller| controller.request.xhr? ? nil : 'application' } end 

javascript to make this all work:

 # in application.js $(function(){ var $modal = $('#modal'), $modal_close = $modal.find('.close'), $modal_container = $('#modal-container'); # This bit can be confusing. Since Rails.js sends an accept header asking for # javascript, but we want it to return HTML, we need to override this instead. $('a[data-remote]').live('ajax:beforeSend', function(e, xhr, settings){ xhr.setRequestHeader('accept', '*/*;q=0.5, text/html, ' + settings.accepts.html); }); # Handle modal links with the data-remote attribute $('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(); }); # Hide close button click $('.close', '#modal').live('click', function(){ $modal_container.hide(); $modal.hide(); return false; }); }); 

I have some logic to put a 40px modal window from the current scroll position of the browser.

When using all of these elements in place, when you click on the link / form using a set of deleted attributes, Rails.js will process the request sending, your application will know that it returns only a template for an action without a layout, ideal for displaying it in a modal window and then our javascript above will connect to the ajax: success callback from Rails.js and display the modal HTML template returned from our application.

---

There are more than one way cats cats and more than a dozen ways to create this functionality. This is definitely an area that the Rails team has not yet established stronger conventions. This is just my way of dealing with this, that I feel pretty DRY, requires minimal effort and quite flexible and reliable in the future. Perhaps one of the areas that someone could probably build on is to use a modular / lightbox framework that spans more bases and has more functionality. And if someone does, I would like to write a letter!

Answer 2

For the reasons why jquery is over the prototype, here are a few thoughts.

• jquery is now the standard Js library for rails 3+, and it has replaced prototype / scriptable libraries.
• jquery is designed to be unobtrusive, that is, it does not put your JS code in a string; you use the proper markup in your HTML file and point to your HTML code with the appropriate identifiers, classes and tags so that you can "connect" your jquery code to it in a separate JS file (I'm not sure if the prototype is really unobtrusive or not, I used jquery for several years and did not touch the prototype since)
• jquery is very easy to learn and use. This is somewhat subjective, but I found the jquery syntax extremely simple. All you want to do is possibly in jquery.
• JQuery also has a very extensive database of plugins with a large number of participants. Makes finding solutions to common problems much easier than writing them yourself.
• JQuery also has a jQuery UI, which is a set of tools for graphic elements for your interfaces and interfaces (they, by the way, have a modal widget that you can use for your original problem).

Just a few thoughts on jquery. I highly recommend learning it. The jquery website (jquery.com) has some great basic tutorials to help you get into it. And Coreyward did a great job with this solution. I am doing something similar, but I took some tips myself.