Rails 3.1 and AJAX - how to implement it?

Question

I have a massive AJAX design problem with my Rails app. To understand the APP - you have a list of classes that you can sign up for. It used to be all HTML, but I want to rewrite it and put some AJAX into it. It looks pretty much like in the picture:

Main table is a list of classes. Blue button means "Sign up for class", red "Sign out", green is when AJAX request is being processed. In the left upper corner there is a search form. Apparently it works (I mean searches, I want it to work through AJAX -> refresh classes. Left list shows all classes you are signed in.

I have a big design problem. It seems I know how to implement all ajax actions separately, but when I'm trying to combine them all, everything messes up. There is no comprehensive tutorial of how to do it, isn't it? I try to work with jquery.

The controller is called wyklads , action wyklady So here is what I have:

0. LAYOUT

<div class="span3">
    <div class="row-fluid">

        <div class="well wyszukiwarka">
            <%= render 'search'%> #search form
        </div>

        <div class="well usuwanie">
            <%= render 'usuwanie' %> #left list of my classes
        </div>
    </div>
</div>

<div class="span9">
       <%= render 'wyklady' %> #table of classes
    </div>

1. SEARCH

 application.js
 $('div.wyszukiwarka form input.btn').submit(function() {
    $.get($this.action, $(this).serialize(), null, "script");
    return false;
 });

 the table with classes is refreshed because of wyklady.js.erb that loads automatically
 $('div.tab-przedmioty').html("<%= escape_javascript(render('wyklady')) %>");

2. CONTROLLER

 def wyklady
  if params[:search]
   @wyklads = Wyklad.where(:pozstudiow => poziom, :typo => 1).search(params[:search])
   @labs = Lab.where(:pozstudiow => poziom, :typo => 1).search(params[:search])
  else
   @wyklads = Wyklad.where(:pozstudiow => poziom, :typo => 1)
   @labs = Lab.where(:pozstudiow => poziom, :typo => 1)
  end
 end

3. BUTTONS for adding classes (I'm using twitter bootstrap)

 <%= button_to 'Dodaj do planu', {:controller => :plans, :action => :create, :przedmiot_id => wyklad.id, :typ => 0}, :method => :post, :remote => true, :class => 'btn btn-small btn-primary addprzedmiot-btn', :style => 'padding: 2px 5px; margin: 0; width: 90px;', :"data-toggle" => 'button', :"data-loading-text" => 'Dodano' %>

At first I tried to put in wyklady.js.erb conditional statemetns from jquery:

 $('.addprzedmiot-btn').click(function() {
   $('div.tab-przedmioty').html("<%= escape_javascript(render('wyklady')) %>");
 });

Then I was trying to execute js from Plans controller (when you sign up for a class you create a new Plan):

 in Plans controller

 def create
 ...
  if @plan.save
  respond_to do |format|
    format.js
  end
 end

 and plans/create.js.erb

 $('div.usuwanie').html("<%= escape_javascript(render('wyklads/usuwanie')) %>");

But it says that it doesn't render list on left saying in logs that it is missing some objects (nil class) from Wyklads controller.

The only working solution is that everything refreshes through ajax after every call which is quite uneffective. I want to avoid it because the table of classes is quite long and it takes a lot of time to populate it.

I want all this to behave like this: 1. The table of classes refreshes only when you submit search, 2. When you sign up for a class blue button changes into green (means button pressed which is handled by bootstrap very well), list on left refreshes but table on right doesn't populate it one more time. Green buttons changes into red after refreshing whole page.

So the question is a little bit broader. If someone would be so patient to explain the solution as well as explain some key concepts (or give some suggestions, tutorials) of mixing multiple ajax events and handling them I would be very grateful. Pure code is not as important as concept. After that I want to 'ajaxify' a little bit more, but first it is essential to understand basics.

Thank you very much.

Answer 1

may be problem in ajax call,

in application.js

 $('div.wyszukiwarka form input.btn').submit(function() {
    $.get($this.action, $(this).serialize(), null, "script"); // what is $this? $(this) is button instead of form
    return false;
 });

Try this

 $('div.wyszukiwarka form').submit(function() {
    $this = $(this)
    $.get($this.action, $this.serialize(), null, "script");
    return false;
 });