How do I use another controllers action in the view of a different model in Ruby on Rails using jQuery/AJAX?

Question

I created a page for my first model type, group, that I would like to have a button on that when pressed, brings up an already existing form (html and embedded ruby) in my project (but in a different views category) for populating a new model that is associated to the group model. I have been unable to get many of the tutorials I've found online to work, and was hoping to get some further direction on this.

I have tried two approaches after learning that AJAX was required.

1. <%= link_to 'Start Thing', startthing_path, id: 'newThingButton1', :class => 'large success button radius', remote: true, html: {id: 'new_thing_trigger'} %>
2. <a id="newCampaignButton2" class="large success button radius">New Campaign</a>

Here is the javascript in my assets/javascripts/application.group.js:

$(document).ready(function () {
// 1
function () {
    $("#new_thing_trigger").bind("ajax:success", function (evt, data, status, xhr) {
        // this assumes the action returns an HTML snippet
        $("div#newThingFormTab").html(data);
    }).bind("ajax:error", function (evt, data, status, xhr) {
            // do something with the error here
            $("div#errors p").text(data);
        });
}
// 2
$("#newCampaignButton2").on('click', function () {
    //$("#newThingTab").html("<div class='row'><div class='twelve columns centered'><div class='row'><section class='box centered'><div class='banner'><h2 class='text-center'>Start A New Thing!</h2></div><%= form_for @thing, :html => {:multipart => true, :class => 'custom'} do |f| %><% if @thing.errors.any? %><div id='error_explanation'><h2><%= pluralize(@thing.errors.count, 'error') %> prohibited this thing from being saved:</h2><ul><% @thing.errors.full_messages.each do |msg| %><li><%= msg %></li><% end %></ul></div><% end %><%= render :partial => 'form-thing', :locals => { :f => f } %><div class='actions'><%= f.submit 'Launch', :class => 'large success button radius' %></div><% end %></section></div></div></div>');
    $.get('<%= url_for :controller => 'things', :action => 'start' %>', function (data) {
        $('#newThingFormTab').html(data);
    });
    $("#thingSelecter").removeClass("active");
    $("#thingsTab").removeClass("active");
    $("#newThingFormTab").addClass("active");
});

})

The second approach in the javascript just has the "hard-coded" html that I want to see. I know this is far from best practice, but I would just like to see it working. I had partial functionality a few days ago when I hard coded this html into my view. Then I would just use <% thing = Thing.new() %> which obviously only worked the first time I clicked on the button.

Can someone help me? I have noticed that rails has a lot of built in ajax functionality and there has got to be an easy way to do this.

Update

I thought of a better way to ask this: I looking for guidance on how to call another controller's action, which usually brings up a form in a new window, and display that form in a container on one of another controller's pages. I don't know if I need to create another action, and if so whether that needs to be in Controller "1" or "2".

Answer 1

I'd avoid mixing erb and javascript, it's rarely necessary, and if you want to use it you need to add the js.erb extension

Just spell out the URL instead of calling an url helper:

$("#newCampaignButton2").on('click', function () {
  $('#newThingFormTab').load('/things/start.js');
)};

It loads the results of /things/start.js into #newThingFormTab

In the controller action you may want to skip rendering the layout for AJAX request. That's why I added the .js extension, which makes the action able to respond differently to different formats.

def start
  @thing = Thing.new
  respond_to do |format|
    format.html # render start.html
    format.js { render 'start.html', :layout => false }
  end
end