Observe field is not doing anything

Question

I want a search field to start outputting results once a user starts typing.

This is my view:

    <%= observe_field 'keyword',
        :url => { :action=> 'search_results' },
        :frequency => 0.5,
        :update => 'results',
        :loading => "$('.spinner').show()",
        :complete => visual_effect(:slide_down, "results", :duration => 0.9),
        :with => 'keyword' %>


        <%= form_remote_tag :url =>{ :action => :search_results }, 
        :update => "results", 
        :loading => "$('.spinner').show()",  
        :complete => visual_effect(:slide_down, "results", :duration => 0.9) %>



                    <fieldset>
                        <legend>Tutor Search.</legend>
                        <label for="searchItField">Keyword Search.</label>

                        <%= text_field_tag(:keyword) %>
                        <span id="Submit_search">

                        <span id="Submit_search_hover"><%= submit_tag "Search", :name => nil %></span>

                        </span>
                    </fieldset>
        </form>

<div id="results">
    <img class="spinner" id="ajax_spinner" src="../images/ajax-loader.gif" alt="Comment being processed" style="display: none" />
</div>

In my controller is this:

 def search_results
       keyword = params[:keyword]
       @tutors = Tutors.find(:all,:conditions => ["category LIKE ?", '%' + keyword + '%'])    
  end

Now if you go to http://avandata.net/tutor/tutors/search and type math in the search field and click submit it works. BUT the observe field does not do anything when typing. I have been trying to figure this out forever.

Here is what my development log looks like.

Here is my log/development Processing TutorsController#search (for 98.254.132.228 at 2010-07-30 09:29:52) [GET] Rendering tutors/search Completed in 5ms (View: 3, DB: 0) | 200 OK [avandata.net/tutor/tutors/search]

And for the submit search button it looks like this in the log:

Processing TutorsController#search_results (for 98.254.132.228 at 2010-07-30 13:28:22) [POST]
  Parameters: {"authenticity_token"=>"KNsIfr69fDTVGEZnwQoyXhnnuK5ZP6QIwq/zHRVYWqQ=", "keyword"=>"math"}
  [4;36;1mTutors Load (0.1ms)[0m   [0;1mSELECT * FROM `tutors` WHERE (category LIKE '%math%') [0m
Rendering tutors/search_results
  [4;35;1mTutors Columns (3.4ms)[0m   [0mSHOW FIELDS FROM `tutors`[0m
Completed in 8ms (View: 2, DB: 4) | 200 OK [http://avandata.net/tutor/tutors/search_results]

Answer 1

If you look at that page under Firebug you will see a Javascript error occur as soon as you hover over the text field. So that's why it's not working for you. As to what's causing the error is unclear.

I did note that the JQuery library that the page is loading is quite old (1.2.6). I would recommend updating your supporting JQuery libraries to at least the versions contained in the JQuery repository here

If that doesn't fix your problem then I'd suggest reconsidering your use of JRails altogether. I've always thought that it was somewhat of a pointless project - cloning the RJS interfaces but built on JQuery instead of Prototype. My opinion notwithstanding it doesn't seem to have a lot of traction in the community so there's the concern about future support.

If you like RJS then just use the defaults that Rails comes with. They work well if you like that sort of thing. If you like JQuery then use it directly. It's a great library and very intuitive to use. In the time you spent looking at this not working you could have coded an equivalent functional version in JQuery several times over.

Answer 2

I figured out that the problem was that the observe field had to go after the text field. Thats all it was. See below.

    <%= form_remote_tag :url =>{ :action => :search_results }, 
    :update => "results", 
    :loading => "$('.spinner').show()",  
    :complete => visual_effect(:slide_down, "results", :duration => 0.9) %>



                <fieldset>
                    <legend>Tutor Search.</legend>
                    <label for="searchItField">Keyword Search.</label>

                    <%= text_field_tag(:keyword) %>
                    <span id="Submit_search">

                    <span id="Submit_search_hover"><%= submit_tag "Search", :name => nil %></span>

                    </span>
                </fieldset>
    </form>

    <%= observe_field 'keyword',
        :url => { :action=> 'search_results' },
        :frequency => 0.5,
        :update => 'results',
        :loading => "$('.spinner').show()",
        :complete => visual_effect(:slide_down, "results", :duration => 0.9),
        :with => 'keyword' %>