Twitter Button breaks Turbolinks?

[optikfluffel]

Twitter Button breaks Turbolinks?

[ryw]

Hi @optikfluffel Can you supply sample code? Are you binding a javascript event to the button? Does the button work if you load that page directly, or is the button only broken after getting to the page after a click from a different page?

To help, need to know more precisely what you mean by "Turbolinks stops working".

[optikfluffel]

Ok sorry, by "Turbolinks stops working" I mean it does whole page reloads after I follow the steps from twitter.com to add a button and add this to my template:

<a href="https://twitter.com/optikfluffel" class="twitter-follow-button" data-show-count="false" data-lang="en">
  Follow @user
</a>
<script>
  ! function (d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (!d.getElementById(id)) {
      js = d.createElement(s);
      js.id = id;
      js.src = "//platform.twitter.com/widgets.js";
      fjs.parentNode.insertBefore(js, fjs);
    }
  }(document, "script", "twitter-wjs");
</script>

[ryw]

So when you click the newly added button the page reloads?

A few ideas...

1. I think you'd want that button to be opted out of Turbolinks. See https://github.com/rails/turbolinks#opting-out-of-turbolinks.

2. I don't know exactly what the obfuscated widgets.js Javascript is doing but it does call preventDefault seven times. From the Turbolinks README:

Also, Turbolinks is installed as the last click handler for links. So if you install another handler that calls event.preventDefault(), Turbolinks will not run. This ensures that you can safely use Turbolinks with stuff like data-method, data-remote, or data-confirm from Rails.

[optikfluffel]

No not the link itself is the problem. If I only inlcude the widget.js it starts reloading everything.

[reed]

Here are two ways you can handle this:

1. Convert the JS snippet that Twitter provides into a named function, move it into one of your application JS files, and bind it to both the document ready and page:load events. Take a look at #131 for more details on the general premise.
2. Cut out the middle man. Just put this in the body:

<script src="//platform.twitter.com/widgets.js"></script>

Note that the execution of external script tags within the body was just recently pulled into turbolinks (#88), so the only way you can use the second method is to either wait for the next version (0.5.3) or point your gemfile to the github repo.

[optikfluffel]

ah OK, Thanks :)