0

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".

Jake Smith
  • 2,332
  • 1
  • 30
  • 68

1 Answers1

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
Arctodus
  • 5,743
  • 3
  • 32
  • 44
  • Thank you Sharagoz! What I ended up trying while waiting for a response was put both potential contents in the view under list items in an unordered list and toggled their hide/show statuses. Should I avoid this approach? I notice that with my current approach, I still need to worry about updating the DOM afterwards. The start action creates a new "thing" and the list of things doesn't (obviously) get updated automatically. Would your approach help me update the list of "things" after the creation of a new thing? – Jake Smith Mar 18 '13 at 18:28
  • I think both approaches are fine, and both require manually updating the DOM afterwards if the form is submitted with AJAX. – Arctodus Mar 18 '13 at 22:07
  • well here is where it gets complicated: In this groups manage page, I have a list of "things." When the button is pressed for the new_thing form to come up, it replaces this list of things associated with the current group, momentarily. After submitting the form and creating a new thing, the list of things is displayed again. But the newly created object is not there. I'm not sure how to add the newly created object to the list of things. This list of things is created with an embedded ruby each loop. So the server rendered each loop content needs to be refreshed. – Jake Smith Mar 19 '13 at 07:10
  • Do I just need to replace that portion of the DOM with the same each loop and its inner contents (a rendering of a partial) in my jQuery code? How do I bind a function to the submit button if my form is in a form_for helper? Also, I've made the target of the post request _blank, so the newly created thing's original response is displayed in a new browser tab. I'd just like to refresh the original browser tab, specifically the list of things that should include the newly created thing. – Jake Smith Mar 19 '13 at 07:14
  • It's hard to answer without seeing the actual code. I suggest you start a new issue and include controller, view and JS-code. – Arctodus Mar 19 '13 at 12:00
  • I'll find a way to trim it down a bit. It's a lot of code and I can't really share all that information. But I'll try to give more context. Thanks for your help so far! – Jake Smith Mar 20 '13 at 06:28
  • I have finally understood this approach enough to get it working. Thank you for the information you gave me! – Jake Smith Apr 04 '13 at 18:58