0

I'm feeling silly here, but for the life of me I can't find out what's going on.

I'm trying to fill in a dropdown based on the value of another dropdown. I've done this about a million times before, but the JSON just doesn't want to load into the dropdown. It actually looks like it's just skipping the getJSON entirely.

Any ideas?

var url = "http://lostpetposters.org/json/dogs.json";
function populateDropdown(url) {
    $("#animalBreed").attr('disabled', false);
    $("#animalBreed").empty();
    $("#animalBreed").append('<option selected="true" disabled></option>');

    $.getJSON(url, function (data) {
        console.log(data)
        $.each(data, function (key, entry) {
            $('#animalBreed').append($('<option></option>').attr('value', entry.name).text(entry.name));
        })
    });
}

A fiddle to play with https://jsfiddle.net/zazvorniki/dpzt8sve/12/

zazvorniki
  • 3,512
  • 21
  • 74
  • 122
  • And where you call your function? I didn't find it even on fiddle. So basically it hard to say that is not working. MB you missed jQuery, MB you have misspelled function name during the call... – SouXin Mar 28 '22 at 17:59
  • The semicolon on the declaration of `url` has mistakenly been placed inside the quotes. Should be `var url = "http://lostpetposters.org/json/dogs.json";`. Also, as mentioned, where is `populateDropdown()` called? – Mike Irving Mar 28 '22 at 18:05
  • @SouXin In my code I am calling it when I make a selection of another dropdown. I didn't include that on the fiddle because I know that part is working and wanted to focus on what is broken. – zazvorniki Mar 28 '22 at 18:09
  • @MikeIrving I'm sorry for the typo here, that is not actually in my code so that's not the issue. As I stated above I did not include that call because that's not a part of the issue. I was trying to focus on the real issue which you can see within the fiddle. There I am just calling it on dom ready – zazvorniki Mar 28 '22 at 18:11
  • Please share the code. There is at least one possibility if you use dynamic html you cannot bind it directly. Something like this: `$('selector').on('click',()=>{})` won't work. You have to use `$(document).on('click', 'selector', ()=>{})` – SouXin Mar 28 '22 at 18:54
  • https://stackoverflow.com/questions/4032104/http-ajax-request-via-https-page .... https://stackoverflow.com/questions/1790860/jquery-ajax-post-to-non-ssl-page-while-current-page-is-ssl ... https://stackoverflow.com/questions/27374373/jquery-ajax-call-from-https-to-http – Mohamed-Yousef Mar 28 '22 at 19:08
  • @SouXin, the only thing dynamic on this page is this dropdown. I'm using a on change $('#animalType').on(change, function (e) { I have also tried $('#animalType').change(function (e) { but neither work. I can get into the function just fine. It just skips over the $.getJSON even if the $.getJSON is in the dm ready – zazvorniki Mar 28 '22 at 19:11
  • @Mohamed-Yousef I was working on a strictly http site. that's why the url was http. I changed it to https only for the jsfiddle. – zazvorniki Mar 28 '22 at 19:13

1 Answers1

0

The issue here was the JSON file itself. There was an improper syntax issue, a missed comma.

When it was getting to

 $.getJSON(url, function (data) {
        console.log(data)
        $.each(data, function (key, entry) {
            $('#animalBreed').append($('<option></option>').attr('value', entry.name).text(entry.name));
        })
    });

It was failing silently. I added on something like this

.fail(function() { alert("error"); })

and was able to see what my actual issue was.

zazvorniki
  • 3,512
  • 21
  • 74
  • 122