FB.ui dialog not showing after loading jquery ajax

Question

here is the script

window.fbAsyncInit = function() {
            FB.init({
                appId      : 'xxxxxx',
                xfbml      : true,
                version    : 'v2.1'
            });

            $.ajax({
                url: 'save.php',
                dataType: 'JSON',
                method: 'POST',
                data: {image_data: img_src, save2server: 'y'},
                success: function(response){
                    FB.ui({
                        method: 'feed',
                        link: response.url,
                    }, function(r){

                    });
                }
            });
        }

the ajax request is succesfully, and i hande it, but the dialog doesn't show up..any clue?

Answer 1

Are you including Facebook SDK script? If not, include it just after the opening the body tag:

<script>
(function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "//connect.facebook.net/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>

Good luck!

Answer 2

For anyone that has the same issue, here is the answer: https://stackoverflow.com/a/7666936/1756281

FB.login or FB.ui methods must be called on a user initiated action (click) in Safari for new window/popup/iframe to be rendered by FB.UIServer. If you try calling these methods on a network callback event it will be blocked and the exception you described will occur