Rails с помощью jQuery для перенаправления на URL с параметрами

Question

У меня есть боковое меню со списком категорий, в котором есть какой-то jQuery, который вытаскивает подменю. В этом подменю есть аккордеон с jQuery и списком ссылок. Моя индексная страница имеет адаптивную таблицу, которая на самом деле сортируется на основе результатов поиска В идеале, когда кто-то нажимает на ссылку, он обновляет таблицу передаваемыми параметрами. Однако при нажатии на ссылку никаких действий не происходит, а URL-адрес будет отображаться в нижней части страницы. На самом деле это не обновление / перенаправление с результатами.

Вот навигация, с которой я работаю:

<nav class="col-md-1 d-none d-md-block sidebar entire-bar">
  <div class="sidebar-sticky">
    <ul class="nav flex-column">
      <li class="nav-item sidebar-main">
        <%=link_to image_tag('products.png') + 'Products', '/', class: 'nav-link d-flex align-items-center flex-column sidebar side-links', id: 'sidebarCollapse', data: { toggle: 'collapse', target: '#submenu'}, :onlick=> 'sideSwitch()'%>
      </li>
      <li class="nav-item sidebar-main">
       <%=link_to image_tag('channels.png') + 'Channels', '/channels', class: 'nav-link d-flex align-items-center flex-column side-links', id: 'channel-link'%>
      </li>
     </ul>
  </div>
</nav>

Вот jQuery на данный момент:

$(document).ready(function () {

 $('#sidebarCollapse').on('click', function () {
     $('#sidebar').toggleClass('active').toggleClass('col-lg-2 col-md-2');
     $('#dash-wrapper').toggleClass('col-lg-11').removeClass('col-lg-9');
     $('#sidebar').toggle();
 });

});

$(document).ready(function (){
 $('.list-depth-0').each(function(elem){
   $(this).on('click', function(){
     $(this).toggleClass('list-active');
   }).children('.list-depth-1');

 })
})

Верхняя часть управляет переключением подменю, а нижняя имеет гармошку. Я попытался проверить следующее:

    $(document).ready(function () {

    $('#sidebarCollapse').on('click', function () {
        $('#sidebar').toggleClass('active').toggleClass('col-lg-2 col-md-2');
        $('#dash-wrapper').toggleClass('col-lg-11').removeClass('col-lg-9');
        $('#sidebar').toggle();
        window.location.href="/www.google.com";
    });

});

В течение нескольких секунд после нажатия на боковую панель он сразу попытался перенаправить на localhost: 3000 / www.google.com

Как передать параметр через jQuery для перенаправления?

Answer 1

Вы можете просто вставить строку запроса в window.location.href, как показано ниже:

let qry_str = "q=apple"
window.location.href="/www.google.com/search?" + qry_str

Чтобы сделать его динамичным, вам нужно добавить атрибут к каждому элементу списка, например data-item='submenu1', и в javascript получить атрибут данных выбранного элемента списка, например, $(event.target).attr('data-item')

 $(document).ready(function () {    
    $('#sidebarCollapse').on('click', function (event) {
        let clicked_item = $(event.target).attr('data-item');            
    });    
});