我怎么弄清楚哪些其他JS文件干扰了我关注的一个？

Question

I have a page that has a checkout from billing function - that basically triggers some JS.

You can view it here .

Choose Blue & Small and add it to your cart.

Then go to checkout.

Enter some dummy data and press the 'copy from billing'. It won't work. But, if you refresh the page and do the process again...it will work.

Also, you will notice that in the first go around, the 'shipping method' dropdown doesn't work. But, once you refresh, it does.

I tried the JS responsible for this functionality in the console and it works fine, on the first load. So I know the code is right (all the fields it is trying to select are right, etc.).

How on earth do I debug this?

Answer 1

I was able to verify the behavior on your site, and get it to work on the first load of the page, with one small tweak. I think the order of loading is at the heart of the issue.

I was able to get it to work by rerunning the first line from your piggyback.js file after the page had loaded.

Here is a quick screencast showing the issue and quick fix.

If you could have this part run at the end of the load, I think that would fix it for you.

UPDATE 1: You might also turn off turbolinks on the 'Proceed to Checkout' button. When I added data-no-turbolink="true" to the link, then clicked, the page was not turboloaded, but loaded as a full page refresh. Then the copy shipping functionality worked as expected.

UPDATE 2: The real issue is most likely that your js code isn't triggering because it only expects a dom ready event. You might be able to trigger it when turbolinks loads it, using a page:load event, as described here .

Answer 2

So this is what is happening...

On the cart page, http://apt-605.herokuapp.com/checkout/cart where you have the Proceed to Checkout Button, there is some javascript that is hooking onto all anchor tags, making an ajax request with the anchor tag's href and then replacing the content of the document with the content received from the ajax call.

What this is doing, is that the new content does not load like a new page, the head is never rendered, and the piggybak js is never loaded.

You can verify this, keep firebug open, switch to net tab, on the cart page. Now when you click on Proceed to checkout, you'll notice an XHR request is made to get checkout , and the checkout page loads without the net tab refreshing. You will also not see the puiggybak js loading in the net tab.

So basically you have to figure out what js you are using on your cart page that is attaching itself to all anchor tags, my guess would be a library that gives ajaxified navigation out of the box.

Hope this helps.

Answer 3

Are you ajaxing in the content?

You're head is missing

<script src="/assets/piggybak/piggybak-application-1d1707f6934602bfae8e3a33d27a4a9b.js" type="text/javascript"></script>

javascript file on first load of page.

Answer 4

I agree with @Austin

The script <script src="/assets/piggybak/piggybak-application-1d1707f6934602bfae8e3a33d27a4a9b.js" type="text/javascript"></script>

is not getting called when you load the page at first, when you reload the page this link is inserted there dynamically, you must have written some code to handle that, If possible reveal that code so that we can help you further...