CODEWITHSUNDEEP
javascriptfancyboxfancybox-2pinterest
Jason McElfresh
Jason McElfresh

Reputation: 106

Conflict between Pinterest and Fancybox

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?

Upvotes: 7

Views: 2011

Answers (4)

Kent Brewster
Kent Brewster

Reputation: 2520

Fix for this is pushing today; very sorry for the trouble. If you run into difficulties with pinit.js in the future, please let us know here:

https://github.com/pinterest/widgets/

Upvotes: 1

Paul D. Waite
Paul D. Waite

Reputation: 98846

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

Upvotes: 5

xdhmoore
xdhmoore

Reputation: 9905

We were having the same issue using jQuery Modal. We solved the problem by adding an onHide handler that hid the modal window, waited a few seconds, and then deleted the modal window. Not the prettiest solution, but it worked.

Upvotes: 1

JoeyP
JoeyP

Reputation: 2702

I'm getting the Uncaught TypeError: Cannot read property 'data-pin-log' of null error on that page.

A hacky way to fix the issue would be to add an afterShow event that adds the data-pin-log attribute to the close button

  $(".watch").fancybox({
    helpers: {
        media: {}
    },
    afterShow: function(e){
        $('.fancybox-close').attr('data-pin-log', false);
    }
  });

This would also work for the OP's problem by replacing data-pin-log with data-pin-aha

Upvotes: 2

Related Questions