jsFiddle jQuery ajax函数在onLoad上不起作用

Question

I have an jQuery ajax function within jsFiddle

• It works within an onlick
• It DOES NOT work when the page initially loads.

Is this possible or am I missing something?

Here is the jsFiddle:

http://jsfiddle.net/djlerman/bbj8k9pe/

I tried the delay option but that didn't fix the issue.

 // Run ajax function onLoad -- DOESN'T WORK getNodeViaAjax(); // Run ajax function ON Button click -- WORKS $( "#buttonID" ).on( "click", "", function() { getNodeViaAjax(); }); // ajax function function getNodeViaAjax() { $.ajax({ type: 'POST', url: '/echo/json/', data: { json: JSON.stringify( jsonData ) }, success: function(data) { $('#displayResponse').html(JSON.stringify(data)); }, error:function(error){ alert('there was an error'); }, dataType: 'json' }); } // Data to return via ajax /* This is an echo of some data sent back via ajax */ /* This data should be filtered by nodeID and return only childNodeID's. */ /* vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv. */ var jsonData = { "nodeID": { "1": { "childNodeID": { "1.1": { "childNodeType": "branch", "childData": [ "1.1: column 1", "1.1: column 2" ] }, "1.2": { "childNodeType": "leaf", "childData": [ "1.2: column 1", "1.2: column 2" ] }, "1.3": { "childNodeType": "leaf", "childData": [ "1.3: column 1", "1.3: column 2" ] } } }, "1.1": { "childNodeID": { "1.1.1": { "childNodeType": "leaf", "childData": [ "1.1.1: column 1", "1.1.1: column 2" ] }, "1.1.2": { "childNodeType": "leaf", "childData": [ "1.1.2: column 1", "1.1.2: column 2" ] } } }, "2": { "childNodeID": { "2.1": { "childNodeType": "leaf", "childData": [ "2.1: column 1", "2.1: column 2" ] }, "2.2": { "childNodeType": "leaf", "childData": [ "2.2: column 1", "2.2: column 2" ] }, "2.3": { "childNodeType": "leaf", "childData": [ "2.3: column 1", "2.3: column 2" ] } } } } }; /* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */ /* This is an echo of some data sent back via ajax */ /* This data should be filtered by nodeID and return only childNodeID's. */ 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <button id="buttonID">Click to Load ajax</button> <div id="displayResponse"></div> 

Answer 1

If you add a quick console.log statement, you'll find that your jsonData is undefined...

function getNodeViaAjax() {
    console.log('Running now...' + jsonData);

You are attempting to send that data in the POST, so make sure the data is initialized before you use it... although the variable is hoisted, the place where the value is set is not - so move your var jsonData = ... to before your getNodeViaAjax() function call.