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?

Forgot to mention I'm using Fancybox 2.1.3 with jquery 1.8.3 — Jason McElfresh, Dec 06 '12 at 22:17
Didn't manage to reproduce the issue using exactly the same code [check here](http://www.picssel.com/playground/jquery/pinterestConflict_07dec12.html) ... maybe something else in your page but hard to say without a link. Could you create a sample page to see the issue? — JFK, Dec 07 '12 at 19:09
How come do you want to get help if you don't provide any feedback to the questions/comments provided!?!?!?! your code works fine as in the example provided **[HERE](http://www.picssel.com/playground/jquery/pinterestConflict_07dec12.html)** — JFK, Mar 13 '13 at 06:59
I have the same issue except my error is `Uncaught TypeError: Cannot read property 'data-pin-log' of null` which happens after I close FancyBox — Francis Kim, Mar 13 '13 at 22:16
@fkim : did you see my example? ... no errors; can you share a link to the page with your issue? — JFK, Mar 14 '13 at 02:10
@JFK: I've been getting the issue described in the question in some of my code, but I *also* get it on your example page. (I'm using Chrome 25 on Windows, and the error appears in the Web Inspector's JavaScript console.) — Paul D. Waite, Mar 25 '13 at 09:48

Paul D. Waite · Answer 1 · 2013-06-27T22:41:51.890

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

I've [reported the issue to Pinterest](https://help.pinterest.com/anonymous_requests/new). — Paul D. Waite, Mar 25 '13 at 16:06
Their site is obnoxious. I gave up looking for a dev portal. Is there a tracking URL for the issue or anything? — ashack, May 03 '13 at 21:31
@ashack: I think they auto-closed my original issue because I didn’t reply to their initial auto-reply, but I’ve re-opened it now. It might be viewable at the following URL, although you may have to sign in with a Pinterest account (and, for all I know, *my* Pinterest account): https://help.pinterest.com/requests/1041252 — Paul D. Waite, May 03 '13 at 21:40
@ashack: a Community Specialist from Pinterest has passed the write-up to their engineers. — Paul D. Waite, May 30 '13 at 10:50
I'm having the same issue, but my particular node should have a `parentNode`. It has a parentNode in Firefox. It is a `button` element that is the child of a `div`. Also, I checked the above issue link and nothing is showing up. — xdhmoore, Jun 25 '13 at 16:20
@xdhmoore: sure - yeah I can't get to my help request either now, even when logged into Pinterest (the login link in the Pinterest help site header doesn't seem to do anything). If you're having a similar but different issue, I'd recommend asking a Stack Overflow question about it. — Paul D. Waite, Jun 26 '13 at 08:37
@Paul: Thanks. I realized the parent was being deleted, but FF was still allowing access via the DOM, where IE wasn't for some reason. However, I ended up fixing our problem. Added a brief description in an answer below. — xdhmoore, Jun 27 '13 at 20:55
@xdhmoore: ah,okay. Glad you got it fixed, and good to get another approach documented. — Paul D. Waite, Jun 27 '13 at 22:40

score 2 · Answer 2 · answered Mar 15 '13 at 21:08

2

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

answered Mar 15 '13 at 21:08

JoeyP

2,622
2
26
25

I dug into this issue a bit more; you might want to have a read of [my answer](http://stackoverflow.com/a/15616800/20578) to see if it helps your situation. – Paul D. Waite Mar 25 '13 at 16:09

score 1 · Answer 3 · answered Jun 25 '13 at 20:12

1

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.

answered Jun 25 '13 at 20:12

xdhmoore

8,935
11
47
90

score 1 · Answer 4 · answered Jul 02 '13 at 22:03

1

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/

answered Jul 02 '13 at 22:03

Kent Brewster

2,480
2
22
27

Conflict between Pinterest and Fancybox

4 Answers4