AJAX function not getting called

Question

I am new to RoR and AJAX, jquery etc. I am trying to make an ajax call in a view, but its not happening.

Corresponding controller(product_search_controller,rb) is:

def index
 @products = querySolr(params[:q])

 @productsProxy = Array.new

 if @products != nil
    @products.each do |p|
      @productsProxy.push(ProductProxy.new(p))
    end
 else
    @productProxy = []
 end

 @taxons = @productsProxy.map(&:get_taxonomy).compact.uniq

 respond_with("Search Results") do |format|
   format.js
   format.html
   format.xml { render :xml => @productsProxy, :only => [:name, :permalink, :description, :mrp], :methods => [:designer, :taxons, :price] }
 end
end

Corresponding view(views/product_search/index.hrml.erb) is:

<%= render :partial => 'products', :locals => {:products => @productsProxy, :taxons => @taxons, :scope => self, :scope_type => "Search"} %>
<%= render :partial => 'shared/inf_scroll', :locals => {:url => "?&page=", :total_count => @total_count} %>

/views/product_search/_products.html.erb:

<% if products.empty? %>
  <div class="not_found"><%= "No Products found for the selected query. Please try a different search." %></div>
<% elsif params.key?(:keywords) %>
  <h3><%= t(:search_results, :keywords => h(params[:keywords])) %></h3>
<% end %>

<% if products.any? %>
<div class="product_rows">
    <%= render :partial=> 'product_listing_feature', :locals => {:scope => scope, :scope_type => scope_type} %>
    <div id="ql_product"></div>
    <%taxons.each do |taxon|%>
                <ul class="products" data-hook class="products">
            <div class = "product_row">
                <h1><%=taxon%></h1>
                <% taxonProducts = Array.new %>
                <% products.each do |product| %>
                    <%@ptaxon = product.get_taxonomy%>
                    <%if @ptaxon == taxon%>
                        <% taxonProducts.push(product) %>
                    <% end %>
                <% end %>
                <div class ="featured_product_list">
                    <ul class = "featured_products">
                    <div class = "page">
                        <%= render :partial=> 'product_listing', :locals=>{:collection=> taxonProducts} %>
                    </div>
                    </ul>
                </div>
            </div>
        </ul>
    <% end %>
    </div>
</div>
<% end %>

i.e it renders another partial _product_listing which has the following script:

<script>
    $("document").ready(function(){
       $("li#product_<%=product.productId%>").hover(
        function(){$("div#quick_look_<%=product.productId%>").css("visibility", "visible");}, 
        function(){$("div#quick_look_<%=product.productId%>").css("visibility", "hidden");}
        );
       $("div#quick_look_<%=product.productId%>").css("visibility", "hidden");
    });

    hide_sold_out({
      url: "<%= sold_out_status_taxons_url(@taxon) %>",
      data: {
        pids: "<%= collection.map(&:id).join(",") %>"
      }
    });
  </script>

Helper:

var hide_sold_out = function(options){
$.ajax({
url: options["url"], 
data: options["data"],
type: 'get',
dataType: 'text',
success: function(data){
  pids = data.split(',');
  for(var i = 0; i < pids.length; i++) {
    if($("li#product_"+pids[i]).children("div.info").children("span.offer.sold").length == 0) {
    $("li#product_"+pids[0]).children("div.info").append("<span class='offer sold'></div>");
    $("li#product_"+pids[0]).children("div.info").children("div.product_listing_info_hover").children("div.listing_buttons").html("");
}
}
},
error: function(data){
 console.log(data);
}

. I tried using the following in /views/product_search/index.js.erb:

$("ul.products").append("<div class='page'><%= escape_javascript(render(:partial => 'product_listing', :locals=>{:collection=> @productsProxy})) %></div></div>")

This didn't work. Then i tried:

<%@taxons.each do |taxon|%>
    <%taxonProducts = Array.new%>
    <%@productsProxy.each do |product|%>
            <%@ptaxon=product.get_taxonomy%>
            <%if @ptaxon==taxon%>
                    <%taxonProducts.push(product)%>
            <%end%>
    <%end%>
    $("ul.products").append("<div class='page'><%= escape_javascript(render(:partial => 'product_listing', :locals=>{:collection=> @taxonProducts})) %></div></div>")
<%end%>

But the AJAX call is not doing what its supposed to do. Please could someone help me debug this. Thanks

Answer 1

These

url: options["url"], 
data: options["data"],

should be

url: options.url,
data: options.data,