Programmatic Save button not working

Question

I'm working on a site that will have more than one 'Save' button per page, and I need a callback for each one so that I can register in my own system that the user has completed the Save action. I thought I had figured out how to do this programmatically... but for each widget I create, when I try to add it to the DOM through the SDK, I get a "Cannot read property 'style' of null" error.

Here's my Javascript

<script type='text/javascript'>
    (function () {
        window.___fourSq = {
            "uid": "31904528",
            "secure": true,
            "explicit": false,
            "onReady": function () {
                $('.fourSquareVenueId').each(function () {
                    var vid = $(this).val();
                    var widget = new fourSq.widget.SaveTo({
                        "vid": vid
                    });
                    var container = $(this).parent().find('.placeholder');
                    widget.replace(container);
                });
            }
        };
        var s = document.createElement('script');
        s.type = 'text/javascript';
        s.src = 'https://platform-s.foursquare.com/js/widgets.js';
        s.async = true;
        var ph = document.getElementsByTagName('script')[0];
        ph.parentNode.insertBefore(s, ph);
    })();

Basically, when the SDK is loaded, I go through and find all of my hidden inputs with the venue id in it, and there I try to create a 'Save' widget to replace an empty anchor tag I have as a place holder.

And here's a link to the screenshot of the error in the Chrome console:

http://gyazo.com/f011c25bb88181251e2820e748b41093.png

Any help would be greatly appreciated. Thanks.

EDIT: Here's the Foursquare documentation i'm using: https://developer.foursquare.com/overview/widgets#programmatic-instantiation

Answer 1

A long shot, but did you change the prototype of the Array object ?