Ajax request does not respond correctly on first form submit

Question

I am using ajax to update the search result of a product in my ruby-on-rails project. The request is not sent to the right controller method when the form is submitted at the first time, but works fine since the second click. I am still new to rails and ajax, please help. Thanks!

Here are the relative codes:

on view:

<form id="search-product">
<div class="container">
  <div class="row">
    <div class="col-md-1">Search by:</div>

    <div class="col-md-1">
      <select name="searchOption">
        <option value="UPC">UPC</option>
        <option value="Vendor_SKU">Vendor SKU</option>
      </select>
    </div>
    <div class="col-md-3">
      <form><input type="text" name="searchValue"></form>
    </div>
    <div class="col-md-2">
    <input type="submit" value="Search" >
    </div>
  </div>
</div>
</form>

on controller:

def search
    search_option = params[:searchOption]
    search_value = params[:searchValue]
    if search_option === 'UPC'
      @product = Product.find_by(upc: search_value) if search_value.length === 12
    elsif search_option === 'Vendor_SKU'
      @product = Product.find_by(vendor_sku: search_value) unless search_value.empty?
    end

    @b_found = false
    @b_found = true if @product
    respond_to do |format|
      format.js
    end
  end

I have configured the route to direct the request to the controller action.

In search.js:

<% if @b_found %>
  $('#product_search_result').html("<%=escape_javascript render('show', product: @product) %>");
<% else %>
  $('#product_search_result').html("<%=escape_javascript 'No matched product was found!' %>");
<% end %>

in application.js:

$("#search-product").submit(function(e) {
    e.preventDefault();
    var valuesToSubmit = $(this).serialize();
    $.ajax({
      type: "POST",
      url: "/search_product",
      data: valuesToSubmit,
      dataType: "script",
    });
  })

I tried putting after document.ready but did not make a difference.

```@b_found = !!@product``` or ```@b_found = @product.present?``` will both create a boolean from ```@product``` cleanly in one line. — A Fader Darkly, Mar 18 '15 at 16:32
@AFaderDarkly good to learn it. will definitely use this cleaner way. Thanks! — user3716495, Mar 18 '15 at 16:38
Difficult to say why the wrong controller is being hit. How do you know? Can you show us the appropriate part of the log? And the output from the system you used if different? Can you show us the relevant part of the routes file and any ```before``` filters in the controller or ApplicationController? — A Fader Darkly, Mar 18 '15 at 16:40
In `route.rb`: `post '/search_product(.:format)' => 'products#search'`. In development.log: I see `Started GET "/Groups/2/checkin_items/new?searchOption=UPC&searchValue=" for ::1 Processing by CheckinItemsController#new as HTML' when it was first submitted. And it became `Started POST "/search_product" for ::1 Processing by ProductsController#search as JS Parameters: {"searchOption"=>"UPC", "searchValue"=>""}` from second submits. I also verified using `binding.pry` in the `search` action to verify whether it reaches there. There is no `before` filters in ApplicationController. — user3716495, Mar 18 '15 at 17:21

score 1 · Answer 1 · edited May 23 '17 at 10:24

1

I figured out this is because $(document).ready was not triggered due to turbo-link. And I was able to find the solution for it at Rails 4: how to use $(document).ready() with turbo-links

edited May 23 '17 at 10:24

Community

1
1

answered Mar 20 '15 at 05:41

user3716495

21
1
1
3

Ajax request does not respond correctly on first form submit

1 Answers1