CODEWITHSUNDEEP
jqueryruby-on-rails
Jake
Jake

Reputation: 1370

Rails using jQuery to redirect to url with parameters

I have a sidemenu that has a list of categories that I have some jQuery on that pulls out a submenu. That submenu has an accordion, with jQuery, on it with a list of links. My index page has a responsive table that will actually sort based on search results. Ideally when someone clicks on the link it will update the table with the parameters that are being passed. However when the link is clicked there's no action but the url will present itself on the bottom of the page. It's not actually refreshing/redirecting with the results.

Here's the navigation that I'm working with:

<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>

Here's the jQuery at the moment:

$(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');

 })
})

The top is handling the toggling of the submenu and the bottom has the accordion. I've tried putting the following to test:

    $(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";
    });

});

Within a few seconds of clicking on the sidebar it immediately attempted to redirect to localhost:3000/www.google.com

How do I pass a parameter through jQuery for the redirect?

Upvotes: 0

Views: 471

Answers (1)

Shiko
Shiko

Reputation: 2624

You can simply inject the query string into the window.location.href as below:

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

To make it dynamic, you need to add an attribute to each list item like data-item='submenu1' and in javascript get the data attribute of clicked list item like this $(event.target).attr('data-item')

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

Upvotes: 1

Related Questions