How to make jquery stack/work together

Question

Hey i'm a new programmer getting started in RoR, HTML, CSS and JS ran into a bit of a problem that im not to sure how to fix, searched the web and could't find an answer so here it is.

I have a date picker and 2 dropdown menu but i cant get them to work together, each time i select something it refreshes everything. here is what the code looks like.

        <script type="text/javascript">
                        $(function() {
                            function cb(start, end) {
                                $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));

                            }
                            cb(moment(), moment());

                            $('#reportrange').daterangepicker({
                                ranges: {
                                   'Today': [moment(), moment()],
                                   'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                                   'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                                   'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                                   'This Month': [moment().startOf('month'), moment().endOf('month')],
                                   'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
                                   'This Year': [moment().startOf('year'), moment()]
                                }
                            }, cb);



                            $('#reportrange').on('apply.daterangepicker', function(ev, picker) {
                              //do something, like clearing an input
                                data = {
                                    startDate: picker.startDate.format(),
                                    endDate: picker.endDate.format()
                                }


                                window.location.href = "/invoices?startDate=" + data["startDate"] + "&endDate=" + data["endDate"]
                            });
                        });
                        </script>
<script type="text/javascript">
                    $(function(){
                        $(".dropdown-menu li a").click(function(){
                                choice = $(this).text()

                                if(choice == "Normal"){
                                    $("tr.false").show()
                                    $("tr.true").hide()
                                }else if(choice == "Special"){
                                        $("tr.false").hide()
                                        $("tr.true").show()
                                }else if(choice == "Pudu"){
                                        $("tr[data-id='2']").hide()
                                        $("tr[data-id='1']").show()
                                        window.location.href = "/invoices?hotel_id=" + 1
                                }else if(choice == "Kota"){
                                        $("tr[data-id='1']").hide()
                                        $("tr[data-id='2']").show()
                                        window.location.href = "/invoices?hotel_id=" + 2
                                }else if(choice == "All"){
                                        $("tr").show()
                                }

                                $(this).closest(".dropdown").find(".btn").text(choice)


                                console.log($(this))


                        });
                    });
                </script>

Any help will be appreciated

heres the ruby code.

controller

def index
@startDate = Date.parse(params[:startDate]) if params[:startDate]
@endDate = Date.parse(params[:endDate]) if params[:endDate]


@invoices = Invoice.all


if params[:startDate]
  @invoices = @invoices.where("created_at >= ?", @startDate).where("created_at <= ?", @endDate.tomorrow)
else
  @invoices = @invoices.where("created_at >= ?", Date.today)
end


if params[:hotel_id]
  @invoices = @invoices.where(hotel_id: params[:hotel_id])
end

and heres in the view

<% @invoices.each do |inv| %>
    <tr class="<%= inv.special %> data-item" data-id ="<%= inv.hotel_id %>">
        <td><%= link_to inv.name, invoice_path(inv) %></td>
        <td><%= inv.identification %></td>
        <td><%= inv.room %></td>
        <td><%= inv.rate * inv.days %></td>
        <td class="col-md-1"><%= link_to "Edit", edit_invoice_path(inv)%></td>
        <% if current_user.sk?%>
        <td class="col-md-1"><%= link_to "Delete", inv, method: :delete, data: {confirm: 'Are you sure you want to delete this invoice?'} %></td>
        <% end %>
    </tr>
    <% end %>

Answer 1

Refreshes, because in the handlers you have window.location.href = ..., that means it changes the current URL location of your browser, remove all 3 of them.

Update:

You have to assign the endDate, startDate and hotel_id values in the handlers to variables and add a submit button to the page. While clicking on the submit button, you change the window.location.href containing the parameters.