mardi 21 février 2017

send multiple checkboxes values in ajax and get final data URL using JQuery

I want to send multiple checkboxes values in array using Jquery.

The problem is that it does not send correct values. Means if I choose 1 and 2 it send it as 1 1 or same it also start to add values of price types as well like Free, Paid etc.

I am looking for something like:

Parameters: {"tab"=>"playlists", "term"=>"phy", "utf8"=>"✓", 
"rating"=>["5", "4", "3", "2"], "price_type"=>["free", "paid"]}

The Url after request will be:

"/private_search/search_all?tab=playlists&term=phy&utf8=✓&utf8=✓&rating[]=5&
rating[]=4&rating[]=3&rating[]=2&price_type[]=free&price_type[]=paid"

The form is:

<%= form_tag request.original_url, method: :get, id: "filter_form", remote: true do %>
    <h4>Rating</h4>
    <div class="col-sm-12">
      <div class="checkbox">
        <label>
          <%= check_box_tag "rating[]", "5", (params[:rating].present? and params[:rating] == "5"), id: "rating" %>
          5 Stars
        </label>
      </div>
      <div class="checkbox">
        <label>
          <%= check_box_tag "rating[]", "4", (params[:rating].present? and params[:rating] == "4"), id: "rating" %>
          4 Stars
        </label>
      </div>
      <div class="checkbox">
        <label>
          <%= check_box_tag "rating[]", "3", (params[:rating].present? and params[:rating] == "3"), id: "rating" %>
          3 Stars
        </label>
      </div>
      <div class="checkbox">
        <label>
          <%= check_box_tag "rating[]", "2", (params[:rating].present? and params[:rating] == "2"), id: "rating" %>
          2 Stars
        </label>
      </div>
      <div class="checkbox">
        <label>
          <%= check_box_tag "rating[]", "1", (params[:rating].present? and params[:rating] == "1"), id: "rating" %>
          1 Star
        </label>
      </div>
    </div>
    <h4>Price</h4>
    <div class="col-sm-12">
      <div class="checkbox">
        <label>
          <%= check_box_tag "price_type[]", "free", (params[:price_type].present? and params[:price_type] == "free"), id: "price_type" %>
          Free
        </label>
      </div>
      <div class="checkbox">
        <label>
          <%= check_box_tag "price_type[]", "paid", (params[:price_type].present? and params[:price_type] == "paid"), id: "price_type" %>
          Paid
        </label>
      </div>
    </div>
<% end %>

The code is:

$(document).ready(function () {
    $("#rating, #price_type").change(function () {
        var data = {'rating[]': [], 'price_type[]': []};
        $(":checked").each(function () {
            data['rating[]'].push($(this).val());
            data['price_type[]'].push($(this).val());
        });
        $.ajax({
            dataType: 'script',
            data: data,
            url: $("#filter_form").attr("action")
        });
    });
});

Another question: I want to get the complete ajax url after request will be sent to controller. How I can get that complete URL as well?

I need to get the complete data url after request will be send like:

"/private_search/search_all?tab=playlists&term=phy&utf8=✓&utf8=✓&rating[]=5&
rating[]=4&rating[]=3&rating[]=2&price_type[]=free&price_type[]=paid"




Aucun commentaire:

Enregistrer un commentaire