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

Determine rows/columns needed given a number

c# algorithm silverlight math

I've got a number of controls (charts in this case) that's determined at runtime. I'd like to put these in a grid with the proper number of rows and columns. For example,

Nagios Percona Monitoring Plugin

monitoring percona galera

I was reading a blob on Percona Monitoring Plugins and how you can somehow monitor a Galera cluster using pmp-check-mysql-status plugin. Below is the link to the blog demonstrating that:

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.