$.getJSON is not running inside addEventListener

Question

I have included the uncompressed version of jquery <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>. When I write $.getJSON function globally or in other user define functions and call that function globally it works fine but when I write $.getJSON function inside the addEventListener it give me this error Uncaught TypeError: $.getJSON is not a function.

city.addEventListener("change", function(){
  cityName = this.value;
  $.getJSON('https://api.mapbox.com/geocoding/v5/mapbox.places/' + cityName + '.json?access_token=' + API,
      function(data) {
          json = data;
      }
  );
  lng = json.features[0].geometry.coordinates[0];
  lat = json.features[0].geometry.coordinates[1];
  zoom = 10;
  mapfun();
});

and also when I define $.getJSON in user define the function and call that function in addEventListener it also gives me the same error.

city.addEventListener("change", function(){
    cityName = this.value;
    getData();
    lng = json.features[0].geometry.coordinates[0];
    lat = json.features[0].geometry.coordinates[1];
    zoom = 10;
    mapfun();
});
function getData() {
    $.getJSON(url + cityName + '.json?access_token=' + API,
        function(data) {
            json = data;
        }
    );
}

https://stackoverflow.com/questions/23667086/why-is-my-variable-unaltered-after-i-modify-it-inside-of-a-function-asynchron — epascarello, Sep 04 '20 at 17:54
Why are you using "vanilla" `addEventListener` if you have jQuery? — gen_Eric, Sep 04 '20 at 18:11
Check your developer console, especially the network tab. You should see the request. `$.getJSON` *is* working, but it's asynchronous. This means the rest of the code in your event listener runs while the `$.getJSON` is running in the background. Once the request is done, at some point in the future, the callback will run. You need to do everything relayed to the `data` (or `json`) variable inside the callback. — gen_Eric, Sep 04 '20 at 18:15

SJacks · Answer 1 · 2020-09-04T18:25:48.237

-2

Try this:

 $(document).on('change', '#city', function() {
 var cityName=$("#city").val();

 // Your other stuff

 });

edited Sep 04 '20 at 18:25

answered Sep 04 '20 at 18:15

SJacks

408
3
19

This doesn't address the asynchronous nature of `$.getJSON`. Plus, why would you add a `change` event to **every** `input` element (assuming it's not a `select` element) when all we need is the `#city` (which may or not be the id) value? I don't know why OP chose to use `city.addEventListener` instead of jQuery's event listeners, but that's not the problem here. – gen_Eric Sep 04 '20 at 18:23
It does because it specifies .on which is needed for the function to work. Fair enough on the input, that can be changed easily to an id - done. – SJacks Sep 04 '20 at 18:25
What do you mean by "`.on` [which] is needed for the function to work"? jQuery's `.on()` just calls the native `.addEventListener()` internally. The OP has correctly bound the `change` event to his `city` element. The problem here is that `$.getJSON` is *asynchronous*. – gen_Eric Sep 04 '20 at 18:29
.on is used to fire the function after the content has loaded! Without this actions fail on js generated content. Example: ever displayed content using AJAX and then wanted to make that content js interactive? Doesn't work unless you specify .on. I've tried it many times. – SJacks Sep 04 '20 at 18:36
I see what you are saying. What you are *actually* doing is binding an event to the `document` and just checking if the element triggered was `#city`. This works because `document` always exists, whereas `#city` may not. Generally, events are bound inside of a `$(function(){})` block (which is shorthand for `$(document).ready(function(){})`). This makes sure the DOM elements exist before binding events. When you add elements in the future - like from an AJAX callback - then you either need to bind the events *then* or have the event bound to a parent element (like `document`) that exists. – gen_Eric Sep 04 '20 at 18:40
I'm assuming that `city` exists and was not added inside a callback. So, the OP's code is fine in regard to event handling. I assume this code is inside a `DOMContentLoaded` or `$(function(){})` block, so `city` should exist and you can bind to it. You can also just do `$('#city').change(function(){})`. You don't need to delegate events unless the element is added in the future. – gen_Eric Sep 04 '20 at 18:44
See: https://learn.jquery.com/events/event-delegation/ – gen_Eric Sep 04 '20 at 18:45

$.getJSON is not running inside addEventListener

1 Answers1