Conflict between Pinterest and Fancybox

Question

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?

Answer 1

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).