Referral SaaSquatch compatibility about turbolinks-compatibility

[reed]

How can I tell if it's working or not? What behavior is Turbolinks breaking?

[loganvolkers]

Turbolinks is breaking a javascript modal from loading.

Here's the expected behaviour (click the button on this page): http://jsfiddle.net/loganvolkers/xHxhf/

If a page is loaded by Turbolinks, then the button will not show the modal.

To test this, try loading this HTML via turbolinks.

  <div class="container">
    <div class="page-header">
         <h1>Turbolinks demo</h1>
    </div>

    <section>
        <p>
            <div class="btn btn-primary squatchpop">This button should open a modal</div>
        </p>
    </section>

</div>



<script type='text/javascript'>//<![CDATA[ 

var _sqh = _sqh || [];

// Push user details for the user who is logged in to your SaaS app
_sqh.push(['init', {
    tenant_alias: 'demo',
    account_id: 'abcd',
    user_id: '1234',
    email: '[email protected]',
    first_name: 'Bob',
    last_name: 'Testerson'
}]);

// Autofill connects referral coupons to your payment form
_sqh.push(['autofill', '#my_coupon']);

// Include squatch.js
(function(){function l(){var s=document.createElement("script");s.type="text/javascript";s.async=true;s.src=location.protocol+"//d2rcp9ak152ke1.cloudfront.net/assets/javascripts/squatch.min.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(s,t)}if(window.attachEvent){window.attachEvent("onload",l)}else{window.addEventListener("load",l,false)}})();
//]]>  

</script>

I believe this has something to do with our onload behaviour being dependant on document.ready, as per your docs, but just wanted to confirm.

Feature request -- would be cool if you had a jsFiddle-style testbed for testing arbitrary html/code snippets to see if they work with Turbolinks.

[reed]

Well it's far from ideal, but this seems to work:

<script data-turbolinks-eval="false">
  // Include squatch.js
  (function(){
      function l(){
          window._sqh = window._sqh || [];

          // Push user details for the user who is logged in to your SaaS app
          window._sqh.push(['init', {
              tenant_alias: 'demo',
              account_id: 'abcd',
              user_id: '1234',
              email: '[email protected]',
              first_name: 'Bob',
              last_name: 'Testerson'
          }]);

          // Autofill connects referral coupons to your payment form
          window._sqh.push(['autofill', '#my_coupon']);

          var s = document.createElement("script");
          s.type = "text/javascript";
          s.async=true;
          s.src = location.protocol+"//d2rcp9ak152ke1.cloudfront.net/assets/javascripts/squatch.min.js";
          var t = document.getElementsByTagName("script")[0];
          t.parentNode.insertBefore(s,t)
      }
      if (window.attachEvent){
          window.attachEvent("onload",l);
          document.attachEvent('page:load',l);
      }else{
          window.addEventListener("load",l,false);
          document.addEventListener('page:load',l,false)
      }
  })();
</script>

I don't think it'd be possible to implement your feature request, at least not in any meaningful way.

[loganvolkers]

Thanks for the workaround, Nick.

Do you have any suggestions for my developers to make our library more Turbolinks friendly? (besides what's listed here: http://reed.github.io/turbolinks-compatibility/)

[reed]

Hmm. Maybe separate loading from initialization, adding a function to the public api that will re-initialize a page without having to reload all of the scripts. Then anybody using turbolinks could just bind that method to the page:load event.

[ryanwood]

Hey. I'm the "customer" Logan mentioned. Sadly, that solution doesn't work. The issue is that the init method both configures and adds the popup div to the body. @reed's suggestion is correct. There needs to be a separation of the configuration and rendering phase. When turbolinks is enabled, the configuration should only be loaded once but there needs to be a page:load event that injects the popup div into the page each time the page is loaded.

The workaround above wires up the page:load event but the issue is that when clicking on another link on the page, the injected div is no longer present so the squatch.js event fails as the div is not found.

Honestly, I'm simply buried right now or I'd take a stab at it.

[reed]

Are you sure it doesn't work? You're right about the issue, but it started working for me when I moved the _sqh configuration inside the l function (and added data-turbolinks-eval="false" to the script tag).

[ryanwood]

I didn't noticed that you moved everything inside 1. Thanks for the heads up. The popup is working but I'm now getting the following security warnings in the console:

XMLHttpRequest cannot load http://api.segment.io/v1/t. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://app.referralsaasquatch.com' is therefore not allowed access. 

Any ideas?

[loganvolkers]

@ryanwood that's interesting. It would seem that Segment.io, a tool that we use inside of our widget, may have an error in the XDM headers. Any chance that you can push your update to staging so I can test the new code with the account you sent me?

[ryanwood]

@loganvolkers Looks like it's working now. It may have been the location I was connecting from (a conference) or could have been an intermittent issue with Segment.io. Thanks to both of you.

[reed]

Glad I could help!