AJAX replaceWith using jQuery

AJAX replaceWith using jQuery

I have a page that has two forms on it.  Each form is a different way of filtering the results on the page.  The first form is a `collection_select`.  The second form is a `text_field_tag`.  Each submits to the same controller and returns data using `index.js.erb`.  Firebug shows that the Ajax call works for both of them and returns the proper results, however, only results that are returned from the `text_field_tag` form actually update the page.  It uses the same code in `index.js.erb` to return results from both calls, so I'm not sure why one works and the other doesn't.

index.html.erb:

    <h1>Listing info</h1>
    <%= render "partials/filter" %> OR
    <%= render "search" %>

    <div id="filter_table">
      <%= render 'list' %>
    </div>

_list.html.erb:

    <table class="tablesorter">
    <thead><tr><td>Name</td><td>ID</td><td>Description</td></tr></thead>
    <tbody>
    <% @info.each do |inf| %>
    <tr><td><%= inf.name %></td><td><%= inf.id %></td><td><%= inf.desc %></td></tr>
    <% end %>
    </tbody>
    </table>

index.js.erb:

    $("#filter_table").replaceWith("<div id=\"filter_table\"><%= escape_javascript(render 'list') %></div>");
    $(".tablesorter").tablesorter({widgets: ['zebra']});

_filter.html.erb:

    <%= form_tag("#", :method => "get", :remote => true) do %>
      <% cur_id = params[:id].to_i %>
      <%= submit_tag("Filter") %>
    <% end %>

_search.html.erb:

    <%= form_tag("#", :method => "get", :remote => true) do %>
      Search for an ID: <%= text_field_tag("id") %>
      <%= submit_tag("Search") %>
    <% end %>

controller.rb:

    def index
      @info = Blahblah
      respond_to do |format|
        format.html
        format.js
      end
    end



Here's some example return from the AJAX call:

WORKS:


    $("#filter_table").replaceWith("<div id=\"filter_table\"><table class=\"tablesorter\">\n  <thead>\n  <tr>\n    <th class=\"{sorter: \'digit\'}\">One<\/th>\n    <th>ID<\/th>\n    <th>Person<\/th>\n    <th>Person<\/th>\n    <th>Two<\/th>\n    <th>VID<\/th>\n    <th>type<\/th>\n    <th>Status<\/th>\n    <th>Three<\/th>\n    <th>Four<\/th>\n    <th>Five<\/th>\n  <\/tr>\n  <\/thead>\n  <tbody>\n  <tr>\n    <td><a href=\"/blah/801\" id=\"801\">801<\/a><\/td>\n    <td>Meep<\/td>\n    <td>1814<\/td>\n    <td>Meep2<\/td>\n    <td>Test<\/td>\n    <td>Stuff<\/td>\n    <td>unknown<\/td>\n    <td>submitted<\/td>\n    <td>47<\/td>\n    <td>16.6<\/td>\n    <td>7.9<\/td>\n  <\/tr>\n<\/tbody>\n<\/table>\n\n\n\n</div>");
    $(".tablesorter").tablesorter({widgets: ['zebra']});

DOESN'T WORK:


    $("#filter_table").replaceWith("<div id=\"filter_table\"><table class=\"tablesorter\">\n  <thead>\n  <tr>\n    <th class=\"{sorter: \'digit\'}\">One<\/th>\n    <th>ID<\/th>\n    <th>Person<\/th>\n    <th>Person<\/th>\n    <th>Two<\/th>\n    <th>VID<\/th>\n    <th>type<\/th>\n    <th>Status<\/th>\n    <th>Three<\/th>\n    <th>Four<\/th>\n    <th>Five<\/th>\n  <\/tr>\n  <\/thead>\n  <tbody>\n  <tr>\n    <td><a href=\"/blah/801\" id=\"801\">801<\/a><\/td>\n    <td>Meep<\/td>\n    <td>1814<\/td>\n    <td>Meep2<\/td>\n    <td>Test<\/td>\n    <td>Stuff<\/td>\n    <td>unknown<\/td>\n    <td>submitted<\/td>\n    <td>47<\/td>\n    <td>16.6<\/td>\n    <td>7.9<\/td>\n  <\/tr>\n<\/tbody>\n<\/table>\n\n\n\n</div>");
    $(".tablesorter").tablesorter({widgets: ['zebra']});

Firebug shows that the Ajax return from BOTH calls works fine, but somehow the replace with doesn't work for things that are returned from the Filter form, but does work for things that are returned from the Search form.  If you'll note, the sample Ajax results are EXACTLY THE SAME, but somehow the first one works and the second one doesn't.  The same `index.js.erb` code is used for both.  

I also tried replacing the above index.js.erb with:

    $("#filter_table").empty();
    $("#filter_table").append("<div id=\"filter_table\"><%= escape_javascript(render 'list') %></div>");
    $(".tablesorter").tablesorter({widgets: ['zebra']});


This works in the same manner as described above.  The query using the `text_field_tag` works and the query using the `collection_select` doesn't work even though both of them use the same `index.js.erb` and the same controller and the same view code and they both return the same AJAX results.

When using the `collection_select` version, I get a warning in firebug after the AJAX call returns in jquery line 2215.

    Use of attributes' specified attribute is deprecated.  It always returns true.
    return !val || val.specified ? elem.val : elem.text; 

I do not get this warning with the `text_field_tag` AJAX call.