1

I wrote a userscript to call the API at Forvo.com and display the results on a third-party page, Memrise.com. Accessing Forvo's API requires a private key; I use it while testing, but I've erased it in the publicly-available code. The script works perfectly in Chrome, but not in Firefox.

The code below is the important parts of this user script, with some extra debugging comments added in. When run in Firefox, the log shows that the callback function exists, the ajax call is sent, and the success event is triggered,, but "callback function triggered" never appears and none of the code in the callback function is executed.

What am I doing wrong? Is the jsonp code run in a different context somehow?

document.addEventListener("DOMNodeInserted", function(e) {

    if (e.relatedNode.className != "level-things table") return false;

    $(e.relatedNode).find('th').eq(4).after('<th class="column"><span class="txt">Other Audio</span></th>');
    $(e.relatedNode).find('tr').each(function(){
        var word = $(this).find('td').eq(1).find('.text').text();
        $(this).find('td').eq(4).after('<td><div class="btn-group forvo-check" data-word="' + word + '"><button class="btn btn-mini dropdown-toggle" data-toggle="dropdown" style="overflow:hidden;">Check Forvo<i class="ico ico-s ico-arr-down"></i></button><div class="dropdown-menu audios"><img src="https://d107cgb5lgj7br.cloudfront.net/img/icons/loader@2x.gif" style="width:30px;" /></div></div></td>');
    });

    $('.forvo-check .dropdown-menu').css({'min-width':'30px', padding:'5px'});

    $('.forvo-check').click(function(){
        var languageCode = forvoCodes[ $('.add-level .dropdown-menu a:first').text().trim() ];
        //console.log(languageCode);

        var word = encodeURI( $(this).attr("data-word") );

        console.log("Confirming callback function");
        console.log(showForvoLinks);

        console.log("Sending ajax");
        $.ajax({
            url: "http://apifree.forvo.com/action/word-pronunciations/format/json/word/" + word + "/language/" + languageCode + "/order/rate-desc/limit/4/key/" + forvoApiKey + "/",
            jsonpCallback: "showForvoLinks",
            dataType: "jsonp",
            type: "jsonp",
            cache: false,
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                // typically only one of textStatus or errorThrown
                // will have info
                console.log("Error occured textStatus=" + textStatus + " errorThrown=" + errorThrown);
            },
            success: function(data) {
                console.log('API response successful');    
            }
        });
    });

}, true);  //end of addEventListener




showForvoLinks = function(data){
    console.log("callback function triggered")
    popupHTML = '';
    for (i in data.items) popupHTML += '<p><a class="audio-player audio-player-hover" href="' + decodeURI(data.items[i].pathmp3) + '"></a></p>';
    if (popupHTML=='') popupHTML = '<a href="http://www.forvo.com/word/' + encodeURI( $('.forvo-check.open').attr("data-word") ) + '/" target="_blank">nothing</a>';
    $('.forvo-check.open .dropdown-menu').html(popupHTML);
}
carpiediem
  • 1,918
  • 22
  • 41
  • By the way, the API response does show up in the Network tab of Firefox's web console. Everything looks correct there: showForvoLinks({"attributes":{"total":2}, ... – carpiediem Nov 10 '14 at 10:00
  • This is just a "shot in the dark", but I personally never use functions like `var myfunction = function()` but I rather use `function myfunction()`. Your way has (at least) some scope issues – devnull69 Nov 12 '14 at 15:36

0 Answers0