Switching from submit form to remove form using Ajax in Rails 3 app

Using an <% if/else/elsif/end %> statement, I detect whether an object exists in a User's profile in my Rails 3 app. Depending on the object's existence, I render one of two forms:

  • If the object exists, the form that is rendered is associated with the Controller's remove_object. It is styled to look like a depressed button, and its submit value is "-".
  • If it doesn't, the form that is rendered is associated with the Controller's create_object. It is styled to look like a normal button, but its submit value is "+".

I style the forms differently to make the object's existence clear to the user. While the <% if/else/elsif/end %> statement works great, I'd like to avoid refreshing the page to change which form is rendered. I have Ajax working on the forms themselves, but am not sure how to change the styling using .ajaxSuccess or some other jQuery method.

Here's an <% if/else/elsif/end %> statement I use:

<% if current_user.profile.higher_ed == @user.profile.higher_ed %>
...
<% end %>
<% elsif current_user.profile.lists.exists?(:category => 'academic', :name => @user.profile.higher_ed) %>
<%= form_tag url_for(:controller => "profiles", :action => "remove_academic", :method => :delete), :id =>'remove_form', :remote => true do %>
  <%= hidden_field_tag :name, @user.profile.higher_ed %>
  <%= submit_tag "-", :class => 'button gray' %>
<% end %>
<% else %>
<%= form_tag url_for(:controller => "profiles", :action => "create_academic"), :id => "add_form", :remote => true do %>
  <%= hidden_field_tag :name, @user.profile.higher_ed %>
  <%= submit_tag "+", :class => 'button white' %>
<% end %>
<% end %>

What I'd like to do is, if the <% if/else/elsif/end %> statement shows add_form, once the create_academic action is finished, add_form is replaced with remove_form. And vice versa if the <% if/else/elsif/end %> statement shows remove_form. Is this possible? I'm not sure if my <% if/else/elsif/end %> statement will cause problems here or not.

UPDATE: Here is my create_academic.js.erb:

$('ul#goalsEdu').append("<%= escape_javascript(render(@goal)) %>");

Here's the jQuery I was working with:

$(function(){
   $("form#add_goal").show()
   .ajaxStart(function(){
       $(this).show();
   })
   .ajaxStop(function(){
       $(this).replaceWith("<%= escape_javascript(render :partial => 'profiles/_remove_major_form')");
   })
});

So I just have to incorporate that into the create_academic.js.erb?

Answers


Best way to do this is with unobtrusive javascript.

Set up your create_academic and remove_academic action to respond_to js (it should already do that since you are using ajax). Now create a remove_academic.js and a create_academic.js file in the views folder for your profiles controller.

This js file will get called whenever ajax is sent to those actions. So all you need to do is select with jquery the form_tag you want to change and render the opposite form from what it was before.


Need Your Help

What is a straightforward solution to vertically centering on a webpage?

html css

I've seen a lot of discussion and debate on this with solutions from pure CSS to pure HTML. They can get pretty complicated, nesting divs within divs, using some pretty intense looking CSS. I figur...

Best way to make display sports ranking in a UITableView

ios objective-c

I am making an iPhone App for upcoming FIFA world cup 2014 and need to make "Groups &amp; Standings" score table. Here is so far I have made.

Rails 2.1.0 Gem Missing - RVM, Passenger, Apache

ruby-on-rails rvm passenger

Yesterday I was trying to fix the readline console issue (slow copy/paste in irb), which I wasn't able to fix - but also must have messed something up bad with my rvm setup.