JQuery only excecutes after Alert in Firefox

Question

I'm trying to add a 'like' in my database with the 'changeRating()' method when a user clicks a local like button, a fb like button or a Twitter button.

But my 'likes' do not increase when a user clicks those buttons in Firefox, in Chrome everything works fine. In Firefox it only works when the alert in the beginning of the JQuery is activated?

jQuery(document).ready(function () {
        //alert('test'); (when this is activated it works)

        $(".fb-like").mouseup(function () {

            var vraagIdToUpdate = $(".vraagid").attr("value");

            if (vraagIdToUpdate != '') {
                changeRating(vraagIdToUpdate);
            }
        });

        FB.Event.subscribe('edge.create',
        function (response) {
            var vraagIdToUpdate = $(".vraagid").attr("value");

            if (vraagIdToUpdate != '') {
                changeRating(vraagIdToUpdate);
            }
        });

       $(".twitter-share-button").mouseup(function () {
            var vraagIdToUpdate = $(".vraagid").attr("value");

            if (vraagIdToUpdate != '') {
                changeRating(vraagIdToUpdate);
            }
        });

        twttr.events.bind('click', function () {
            var vraagIdToUpdate = $(".vraagid").attr("value");

            if (vraagIdToUpdate != '') {
                changeRating(vraagIdToUpdate);
            }
        });

        $("#stemknop").click(function () {
            //voeg event handler toe aan de click-functie op de link (die als className twitter-share-button heeft meegekregen)
            var vraagIdToUpdate = $(".vraagid").attr("value");
            //alert('gelukt');
            $(this).css({ 'opacity': '0.4' });

            if (vraagIdToUpdate != '') {
                changeRating(vraagIdToUpdate);
            }
        });

        function changeRating(vraagId) {
            //Maak een JSON object aan met dezelfde property-name als ons Model classe
            var shareModel = { vraagID: vraagId };

            $.post("/api/ShareAPI/ChangeNumberOfShares", shareModel).success(function (result) { $('.aantalStemmen').text(result.newAantalShares) });
        }
    });

I know that there is posibly something that loads too fast or isn't there when a bit of code needs that specific thing... The alert() causes my code to 'wait' and so it does work. But I can't seem to find what bit of code causes this problem.

Edit: my firefox console states the following:

ReferenceError: FB is not defined Vraag:143 ReferenceError: FB is not defined Vraag:247 Gebruik van getUserData() of setUserData() wordt niet meer ondersteund. Gebruik in plaats daarvan WeakMap of element.dataset. requestNotifier.js:64 "Invalid App Id: Must be a number or numeric string representing the application id." sdk.js:53 "The "fb-root" div has not been created, auto-creating" sdk.js:53 "No callback passed to the ApiClient" sdk.js:53 Error: Container is not defined format+nl,default+nl,ui+nl,corechart+nl.I.js:130 Gebruik van getUserData() of setUserData() wordt niet meer ondersteund. Gebruik in plaats daarvan WeakMap of element.dataset. requestNotifier.js:64 Gebruik van getPreventDefault() wordt niet meer ondersteund. Gebruik in plaats daarvan defaultPrevented. jquery-1.8.2.js:3260 Error: Container is not defined

I guess the code is asynchronous and takes some time to load, when you have the alert it gives the browser an extra second to download/execute in the background — Jon Snow, May 06 '14 at 07:27
Yes I'm inclined to agree with @crisbeto. Make sure you are loading the FB JS before the javascript you are calling in your code above. — Rob Schmuecker, May 06 '14 at 07:29
Try looking around the facbook API, most likely they have a callback when everything has been loaded — Jon Snow, May 06 '14 at 07:34
I think the callback method will be the solution but I don't really know how to implement it — Jelle, May 06 '14 at 07:42

score 0 · Answer 1 · answered May 06 '14 at 07:34

0

change your post request to ajax and make the request synchronous : For eg :

$.ajax({
   type: 'POST',
   url: "/api/ShareAPI/ChangeNumberOfShares",
   data: shareModel,
   success: function(result) {
                  $('.aantalStemmen').text(result.newAantalShares);
              },
   async:false
});

answered May 06 '14 at 07:34

user3580371

31
2

The same error's as in my post, FB is undefined etc – Jelle May 06 '14 at 07:52

score 0 · Answer 2 · edited May 23 '17 at 10:26

EDIT: Try looking at the answers here too Is there a way to detect if the Facebook Javascript SDK loaded successfully?

Try this:

jQuery(document).ready(function () {
        //alert('test'); (when this is activated it works)

        FB.Event.subscribe('edge.create', function (response) {
            var vraagIdToUpdate = $(".vraagid").attr("value");

            if (vraagIdToUpdate != '') {
                changeRating(vraagIdToUpdate);
            }

            $(".fb-like").mouseup(function () {

                var vraagIdToUpdate = $(".vraagid").attr("value");

                if (vraagIdToUpdate != '') {
                    changeRating(vraagIdToUpdate);
                }
            });

            $(".twitter-share-button").mouseup(function () {
                var vraagIdToUpdate = $(".vraagid").attr("value");

                if (vraagIdToUpdate != '') {
                    changeRating(vraagIdToUpdate);
                }
            });

            twttr.events.bind('click', function () {
                var vraagIdToUpdate = $(".vraagid").attr("value");

                if (vraagIdToUpdate != '') {
                    changeRating(vraagIdToUpdate);
                }
            });

            $("#stemknop").click(function () {
                //voeg event handler toe aan de click-functie op de link (die als className twitter-share-button heeft meegekregen)
                var vraagIdToUpdate = $(".vraagid").attr("value");
                //alert('gelukt');
                $(this).css({ 'opacity': '0.4' });

                if (vraagIdToUpdate != '') {
                    changeRating(vraagIdToUpdate);
                }
            });

            function changeRating(vraagId) {
                //Maak een JSON object aan met dezelfde property-name als ons Model classe
                var shareModel = { vraagID: vraagId };

                $.post("/api/ShareAPI/ChangeNumberOfShares", shareModel).success(function (result) { $('.aantalStemmen').text(result.newAantalShares) });
            }
        });
    });

JQuery only excecutes after Alert in Firefox

2 Answers2