CODEWITHSUNDEEP
javascriptjquery
user2641103
user2641103

Reputation: 702

How to access variable parent scope from an event handler

I have the following piece of code to retrieve a Wikipedia infobox:

function foo() {
    var searchTerm = "Something...";
    var bnameonly = "Something else...";    
    var url = "https://en.wikipedia.org/w/api.php?action=parse&format=json&page=" + searchTerm + "&redirects&prop=text&callback=?";
    $.getJSON(url, function(data) {
        if (typeof(data.parse) !== 'undefined') {
            wikiHTML = data.parse.text["*"];
            $wikiDOM = $("<table>" + wikiHTML + "</table>");
            infobox = $wikiDOM.filter('.infobox.biota');
            $("#wiki").contents().find('#myinfobox').html(infobox);
        } else {
            var url = "https://en.wikipedia.org/w/api.php?action=parse&format=json&page=" + bnameonly + "&redirects&prop=text&callback=?";
            $.getJSON(url, function(data) {
                if (typeof(data.parse) !== 'undefined') {
                    wikiHTML = data.parse.text["*"];
                    $wikiDOM = $("<table>" + wikiHTML + "</table>");
                    infobox = $wikiDOM.filter('.infobox.biota');
                    $("#wiki").contents().find('#myinfobox').html(infobox);
                }
            });
        }    
    });
}

However, if the first query fails (detected by typeof(data.parse) == 'undefined' being true) then the else clause should be executed. The problem is that the bnameonly variable is undefined at that point even when it has been declared in the parent environment.

Upvotes: 0

Views: 214

Answers (2)

Adam Jenkins
Adam Jenkins

Reputation: 55613

You can only check to see if the HTML is empty after you know the response has come back from the server (regardless of if it succeeded or failed). You can use jQuery's always method on it's jqXHR to test for this.

function foo() {
    var searchTerm = "Something...";
    var bnameonly = "Something else...";    
    function  myCallback(data) {
       ...
    }

    var url="https://en.wikipedia.org/w/api.php?action=parse&format=json&page=" + searchTerm + "&redirects&prop=text&callback=?";   
    $.getJSON(url,{data})
       .done(myCallback)
       .always(function() {
          //executed only after $.getJSON succeeds or fails
          if ($("#wiki").contents().find('#myinfobox').html() === '') {
            var url="https://en.wikipedia.org/w/api.php?action=parse&format=json&page=" + bnameonly + "&redirects&prop=text&callback=?";
            $.getJSON(url, {data}, myCallback);
          }
       })
}

Upvotes: 1

user2641103
user2641103

Reputation: 702

based on the answers I've found in this other forum (https://forum.jquery.com/topic/how-do-i-access-json-data-outside-of-getjson), I've found a solution by using a callback function:

function foo() {
    var searchTerm = "Something...";
    var bnameonly = "Something else...";
    function myCallback(data) {
        if (typeof(data.parse) !== 'undefined') {
            wikiHTML = data.parse.text["*"];
            $wikiDOM = $("<table>"+wikiHTML+"</table>");
            infobox = $wikiDOM.filter('.infobox.biota');
            $("#wiki").contents().find('#myinfobox').html(infobox);
        } else {
            $("#wiki").contents().find('#myinfobox').html('');
        }
    }

    var url="https://en.wikipedia.org/w/api.php?action=parse&format=json&page=" + searchTerm + "&redirects&prop=text&callback=?";   
    $.getJSON(url, {data}, myCallback);

    if ($("#wiki").contents().find('#myinfobox').html() === '') {
        var url="https://en.wikipedia.org/w/api.php?action=parse&format=json&page=" + bnameonly + "&redirects&prop=text&callback=?";
        $.getJSON(url, {data}, myCallback);

    }
}

Upvotes: 0

Related Questions