Conflict between Pinterest and Fancybox

fancybox, fancybox-2, javascript, pinterest

Solution

I had a similar issue with the Pinterest button. It turned out to be a problem with Pinterest's pinit.js script.

I’ve reported the issue to Pinterest (sign in required), and they’re looking at it.

We were using the Pinterest button on a page that had another link on it with a click event assigned. The link's HTML was, roughly speaking, like this:

<a href="#" class="youCanClickThis"><span>Select</span></a>

The click event handler was like this:

$('.youCanClickThis').click(function (e) {
    $(this).html('Selected');
});

This click handler was somehow causing an error in pinit.js (`Uncaught TypeError: Cannot read property 'data-pin-log' of null`).

I unminified https://assets.pinterest.com/js/pinit.js in order to trace the error more easily. It was showing up in this function in the unminified pinit.js:

get: function (b, c) {
    var d = null;
    return d = typeof b[c] === "string" ? b[c] : b.getAttribute(c)
},

Specifically, `typeof b[c]`. `get()` is called from `getData()`, and the value of `b` is passed straight through from whatever called `getData()`. That turned out to be this function:

click: function (b) {
    if ((b = a.f.getEl(b || a.w.event)) && b !== a.d.b) {
        if (!a.f.getData(b, "log")) b = b.parentNode;

This appears to fire whenever the user clicks on anything on a page that has a Pinterest button. The last bit - `b.parentNode` - is what caused us problems.

By that point, `b` has been assigned to the element that the click event originated on. In our case, that was the `<span>` inside the `<a>`. However, because our JavaScript replaced the contents of the `<a>` tag with text, the `<span>` was no longer part of the document, and thus no longer had a `parentNode`.

Thus `b = b.parentNode` caused `b`’s value to be `null`.

We worked around this by not removing the `<span>` from the document on click. However, it would be good if Pinterest could add a check to see if `b.parentNode` exists, or something.

(I don’t understand the Pinterest script well enough to know what the best fix would be, but it’s built with the assumption that the source of a click event will always have a `parentNode`, which, as this demonstrates, isn’t a safe assumption).

Problem

I have a page that has both Fancybox and a Pinterest pin button. Both seem to work as they should, but when I close the Fancybox overlay I see the following JavaScript error: ``` Uncaught TypeError: Cannot read property 'data-pin-aha' of null ``` My Pinterest button renders as this: ``` <a href="http://pinterest.com/pin/create/button/?url=http://www.mywebsite.com/somepage&amp;media=http://www.mywebsite.com/content/images/2c63a4e0-3b65-4464-934c-77f2a7166090-Dim459X612.jpg&amp;description=some description" class="PIN_1354830754034_pin_it_button PIN_1354830754034_pin_it_beside PIN_1354830754034_hazClick" data-pin-aha="button_pinit" data-pin-config="beside"><span class="PIN_1354830754034_pin_it_button_count" id="PIN_1354830754034_pin_count_0"><i></i>3</span></a> ``` Just for fun, my Pinterest button is being loaded asynchronously with this: ``` (function () { window.PinIt = window.PinIt || { loaded: false }; if (window.PinIt.loaded) return; window.PinIt.loaded = true; function async_load() { var s = document.createElement("script"); s.type = "text/javascript"; s.async = true; if (window.location.protocol == "https:") s.src = "https://assets.pinterest.com/js/pinit.js"; else s.src = "http://assets.pinterest.com/js/pinit.js"; var x = document.getElementsByTagName("script")[0]; x.parentNode.insertBefore(s, x); } if (window.attachEvent) window.attachEvent("onload", async_load); else window.addEventListener("load", async_load, false); })(); ``` And my Fancybox link: ``` <a href="//vimeo.com/36573701" class="watch"><span>Watch Our Story</span></a> ``` Overall it's a pretty basic setup. Just for kicks I used the normal inline script tag for Pinterest, but got the same error. Has anyone ever seen this error and know how to fix it?

Original source