getJSON not working within a function for event change

Question

I would like to use getJSON to grab properties of an item that a user selects from a drop down menu.

However, when I place $.getJSON in a function that is activated by the drop down selection it does not work.

//DOES NOT WORK :(
var $SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
function json_tolerances() {
    $.getJSON($SCRIPT_ROOT + '/_json_tolerances', { machine: $('#machine').val() }, function(data){
         tolerances(data);
    });
};
$('#machine').change(json_tolerances);

Strangely, when I place $.getJSON outside the function it works. Unfortunately, it is now not tied to my dropdown menu.

//WORKS :)
var $SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
$.getJSON($SCRIPT_ROOT + '/_json_tolerances', { machine: $('#machine').val() }, function(data){
    tolerances(data);
});

More strangely, when I hand code in the array that $.getJSON is suppose to provide it works, so it is something to do with $.getJSON.

//WORKS :)
var $SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
function json_tolerances() {
    //$.getJSON($SCRIPT_ROOT + '/_json_tolerances', {machine: $('#machine').val()}, function(data){
    var data = {"result": [{"form_field": "polyethylene", "maximum": "-110", "minimum": "-80"}, {"form_field": "air", "maximum": "-993", "minimum": "-983"}, {"form_field": "acrylic", "maximum": "135", "minimum": "105"}, {"form_field": "water", "maximum": "4", "minimum": "-4"}]}
    tolerances(data);
    //});
};
$('#machine').change(json_tolerances);

I'm a newbie to javascript so any help would be greatly appreciated.

what is the problem you're observing? are you seeing an error? is nothing happening at all? — kinakuta, Aug 11 '14 at 14:54
not sure 100% but I would suggest adding a "return false" before you close the function parenthesis. — codegeek, Aug 11 '14 at 16:55
No errors are shown for all three methods in chrome console. As I am new to javascript, I'm not sure if chrome console is the best way to debug. — spitz, Aug 11 '14 at 17:12

score 0 · Answer 1 · answered Aug 12 '14 at 22:47

Placing everything in (document).ready(function() {}) solved this issue for me. This may have something to do with the asynchronous nature of $.getJSON...

(document).ready(function() {
    var $SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
    function json_tolerances() {
        $.getJSON($SCRIPT_ROOT + '/_json_tolerances', { machine: $('#machine').val() }, function(data){
        tolerances(data);
        });
    };
    $('#machine').change(json_tolerances);
})

score -1 · Answer 2 · answered Aug 11 '14 at 14:53

-1

var $SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
function json_tolerances() {
    $.getJSON($SCRIPT_ROOT + '/_json_tolerances', { machine: $('#machine').val() }, function(data){
         tolerances(JSON.parse(data));
    });
};
$('#machine').change(json_tolerances);

answered Aug 11 '14 at 14:53

JAYBEkster

780
1
6
19

1

Shouldn't have to play spot the difference. Use your words; explain what you've changed/added and why. – Anthony Grist Aug 11 '14 at 14:55
It's not a problem with $.getJSON. The difference is that your first example return object as string (json-format), and the 2nd returns real Object – JAYBEkster Aug 11 '14 at 14:55
the getjSON method already calls $.parseJSON on the returned data - also note that the first code snippet the O.P. has indicated works – kinakuta Aug 11 '14 at 14:59
It seem that this question was also raised here [link](http://stackoverflow.com/questions/15788260/jquery-getjson-not-working-within-a-function) ,however, no solution was given. – spitz Aug 11 '14 at 17:15

getJSON not working within a function for event change

2 Answers2