Using a rails partial in a jquery dialog box

Question

I'm trying to insert a partial into a jquery dialog box. The dialog box is working but no partial..

Here is my code :

application.js

$(document).ready(function(){
    $("#add_note").click(function(){
        $("#notes").html("<%= escape_javascript(render(:partial => @note)) %>").dialog({title: 'Basic Dialog'})
    })
})

my view

<div class="title">
        <span>Historique :</span>
        <span id="add_note">Ajouter une note</span>
      </div>

      <div id="notes">
      </div>

my partial in myview/_note.html.erb

<div class="note">
    <%= form_for(@add_note) do |f| %>
        <dl>
          <dt>Type de note</dt>
          <dd><%= f.collection_select :note_type_id, NoteType.find(:all), :id, :label, :allow_blank => "Type" %></dd>
        </dl>
         <dl>
          <dt>Titre :</dt>
          <dd><%= f.text_field :title %></dd>
        </dl>
        <dl>
          <dt>Description :</dt>
          <dd><%= f.text_field :description %></dd>
        </dl>
        <%= f.hidden_field :project_id, :value => @project_id %>
        <%= f.hidden_field :organization_id, :value => @project.organization_id %>
        <%= f.hidden_field :user_create_id, :value => current_user.id %>
        <%= f.hidden_field :domain_id, :value => current_user.domain_id %>
        <%= f.hidden_field :created_at %>

        <div class="actions">
          <%= f.submit %>
        </div>
      <% end %>

If you have a clue, it would be very helpful! Thanks

Fabien

Answer 1

The application.js file is a place for static JavaScript. It is not passed to ERB for processing on each request, so your <%= code %> is never run. If you point your browser to /javascripts/application.js you'll see what I'm talking about.

Make sure you have a good handle on how requests are processed in Rails. You may be missing some details here. application.js is a static file that exists in the /public/javascripts directory, so it is served up directly by your web server; Rails doesn't even get touched when the browser fetches it. It is just like when you create a new rails app and you have to erase the /public/index.html file before Rails can process your map.root in the routes.rb file.

You have a few different options:

Here is an older Railscast episode, but it's seems close to what you are looking for. It uses a controller named javascripts_controller for generating dynamic javascripts. This is not a very fine grained approach.

In this episode, the method Ryan uses for adding fields for a nested model can be adapted to fit your needs. I have used this method a few times and it works very well.

Recommended Method

You can also call an action that returns the html of the partial via ajax and use the result to $(#notes).html(result). A quick search on rails jquery ajax offers a few guides on how to implement this (Here is one that seems reasonable). Here is another Railscast episode that deals with jQuery and Rails 2. I wouldn't recommend using jRails at this point because it's fairly outdated, and as the episode mentions, it kind of defeats the purpose of switching to jQuery as the Rails 2 helpers generate obtrusive JavaScript.

This is a flexible way of doing things. You have a generic set of static JavaScript used to call remote methods. In individual controller methods, you can respond_to these ajax calls and return JavaScript with dynamic data, html, or JSON.

The methods in jQuery to look at for ajax are listed in this section of the jQuery api. $.ajax $.post and $.get are the main ones.

For your example, the $.get would be a good place to start. Here is an example right from the api docs:

$.get('ajax/test.html', function(data) {
  $('.result').html(data);
  alert('Load was performed.');
});

Here is a Railscast on how Rails 3 handles unobtrusive JavaScript along with HTML5 custom attributes. You can mimic this approach in Rails 2, but the standard helper methods wont generate the data-remote, data-method, data-disable-with, or other data-* attributes for you. You can see in the jQuery version of the Rails 3 ujs, that it is most like the previous method I mentioned where controller methods are called with $.ajax and handle the response differently depending on the dataType (which is 'script' by default.

Answer 2

I too have been trying to do this and stumbled upon this solution:

http://jenwendling.com/quick-clean-modal-form-dialogs-w-jquery-eeeee/

might be easier to implement