Rails 5 load JS with turbolink

Question

I am having a hard time getting javascript to work without reloading a page. I believe the problem has to do with turbo links.

I am setting an onsubmit listener to a form like this

<%= form_for @cart, url: cart_path, html: {onsubmit: "addCart(event, #{@product.id})"} do |c| %>

I am then submitting the form via ajax like this

function addCart(event, id){
   event.preventDefault();
   var quantity = $("#"+id+'_product_quantity').val()
   $.post('/cart/add', {
     product_id: id,
     quantity: quantity
   }, function(data, status, xhr){
     if(xhr.status !== 200){
       alert("There was an error. Please try again")
     }else {
       $("#"+id+'_product_submit').val("Added");
     }
   })
}

Everything works perfectly when I reload the page but when I go to the page via a link the javascript does not get called. The weird thing is that the event.preventDefault() is working. When I remove the javascript completely the form will submit like a normal html form. I am a pretty new to jquery and cannot figure out how to get the javascript to load.

No I am not. I was under the impression that was only necessary when attaching listeners via the $("#id").submit() syntax. — Sam M
– Sam M, Commented Mar 7, 2017 at 1:16

Mark · Accepted Answer · 2017-03-07 01:18:25Z

2

This could be a turbolinks issue. In your javascript file, surround your javascript code with

$(document).on('turbolinks:load', function() {
  // your code
});

answered Mar 7, 2017 at 1:18

Mark

11.2k6 gold badges34 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sam M Over a year ago

That event is triggering but it still is not working. I think the problem has to do with how I'm attaching the listener

Sam M Over a year ago

No. There wasn't anything

Sam M · Accepted Answer · 2017-03-07 05:16:31Z

0

So this had to do with turbolinks. I couldn't figure out how to make it work with turbo links so I removed the //= require turbolinks line from assets/javascripts/application.js file.

answered Mar 7, 2017 at 5:16

Sam M

6601 gold badge8 silver badges19 bronze badges

Collectives™ on Stack Overflow

Rails 5 load JS with turbolink

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related