button click is not working inside jquery

Question

I am new to html and java script. I try to create a button and get the JSON back from a URL and add the result to a drop down list. After the Nodejs server is up and running, if you enter http://localhost:8080/restapi/test/projects , it will return {example} as the result.

So there are couple questions here: 1) for some reason, the button click is not working inside jquery 2) $.getJSON can only used inside jquery, is there any other way to obtain JSON from a URL respond?

 $(document).ready(function () { $(document).on('click', '#button1', function() { var selector = document.getElementById('selector'); var api = 'http://localhost:8080/restapi/test/projects'; $.getJSON(api, function (data) { $.each(data, function (index, d) { var option = document.createElement('option'); option = d; selector.add(option); }); }) }) })

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <div id='first'> <h1>project options</h1> <button id='button1'>Get Projects</button> </div> <div id='second'> <h2>all projects</h2> Projects: <select id='selector'></select> </div>

Thanks for any tips.

Answer 1

{example} is not valid JSON. Try {"1":"example"}

Also, option = d ; will overwrite your option. Try option.value = d;

Here is a cleaned up version for you :

$(document).ready(function () {
    $('#button1').click(function() {
        var selector = document.getElementById('selector');
        var api = 'http://localhost:8080/restapi/test/projects';
        $.getJSON(api, {"1":"example","2":"other example"},function (data) {
            $.each(data, function (index, d) {
                selector.options[selector.options.length] = new Option(d,d);
            });
        });
    });
});

Fiddle: https://jsfiddle.net/trex005/65hc1srh/

Answer 2

Try the following:

$(document).ready(function () {
    $('body').on('click', '#button1', function() {//this sintax is used most for dynamically added elements
        var selector = $('#selector');
        var api = 'http://localhost:8080/restapi/test/projects';
        $.getJSON(api, function (data) {
            $.each(data, function (index, d) {
                var option ='<option>'+d+'</option>';
                selector.append(option);
            });
        })
    })
})

Answer 3

the click button is actually working... maybe there's a problem with the response. you can check the network log by opening the inspector. to open the inspector on chrome use right click and then 'inspect' or 'inspect element'.

this is what happened when i click the button.

for the second question you can make an AJAX request using the XMLHttpRequest object.

Answer 4

It will not worked because you did not do the exact thing clicked.All you have done is that $(document).click() which don't know what elements or document to click.

You should have used

 $('#button1').on('click',function() {

        });

for button click which tells that it will response only when the button is clicked.For your better understanding I am giving the code snippet

 $(document).ready(function () { $('#button1').on('click',function() { var selector = document.getElementById('selector'); var api = 'http://localhost:8080/restapi/test/projects'; $.getJSON(api, function (data) { $.each(data, function (index, d) { var option = document.createElement('option'); option = d; selector.add(option); }); }); }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <div id='first'> <h1>project options</h1> <button id='button1'>Get Projects</button> </div> <div id='second'> <h2>all projects</h2> Projects: <select id='selector'></select> </div>

It will work.If not then please check your api url.