The conflict between Pinterest and Fancybox

I have a page with Fancybox and Pinterest buttons. 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 is displayed as follows:

 <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 loads 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> 

In general, this is a fairly simple setup. For kicks, I used the usual built-in script tag for Pinterest, but got the same error.

Has anyone seen this error and know how to fix it?

+7
source share
4 answers

I had a similar problem with the Pinterest button. This turned out to be a problem with the Pinterest pinit.js script.

Ive reported a Pinterest problem (login required) and they are looking at it.

We used the Pinterest button on the page with another link to it with the designated click event. Roughly speaking, an HTML link:

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

The click event handler was as follows:

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

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

I unminified https://assets.pinterest.com/js/pinit.js to track error is easier. This showed up in this function in unminified pinit.js:

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

In particular, typeof b[c] . get() is called from getData() , and the value of b is passed directly from anything called getData() . This turned out to be such a function:

 click: function (b) { if ((b = afgetEl(b || awevent)) && b !== adb) { if (!afgetData(b, "log")) b = b.parentNode; 

This works when a user clicks on something on a page with a Pinterest button. The final bit, b.parentNode , is what caused us problems.

At this point, b was assigned to the element on which the click event occurred. In our case, it was <span> inside <a> . However, since our JavaScript replaced the contents of the <a> tag with text, <span> no longer part of the document and therefore no longer had parentNode .

So b = b.parentNode caused b s to be null .

We worked on this without removing the <span> from the document when clicked. However, it would be nice if Pinterest could add a check to see if b.parentNode or something like that exists.

(I don’t understand the Pinterest script well enough to know what the best solution will be, but it is built with the assumption that the source of the click event will always have a parentNode , which, as this shows, is not a safe assumption).

+5
source

I get an Uncaught TypeError: Cannot read property 'data-pin-log' of null error on this page.

A hacky way to fix the problem 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 will also work for the OP problem, replacing data-pin-log with data-pin-aha

+2
source

We had the same problem 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.

+1
source

Correct what it is pushing today; Sorry to bother you. If you encounter difficulties with pinit.js in the future, please let us know:

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

+1
source

All Articles