Question

How can I use the callback function properly cause it’s not working.
I want to retrieve my json values from the server to the client side.

For starters I tried this to see if its working.

sample code

index.html

<button onClick = "Json()">Click Here</button>

my.js

function Json() 
{ 
var url = "http://www.sample.com/test.js?callback=displayUser";
var script = document.createElement('script');
script.src = url;
document.body.appendChild(script);   

} 

function displayUser(json) 
{
    alert("working");

}

test.js

var obj = { "a": "hey", "b": "what?"}

but does not return any alert, so I guess it does not proceed to my displayUser function.

Answer 1

If you want displayUser() called in test.js, you have to have code in test.js that will call it. It won’t get called just because you put it in the URL. You would need to code parse it out of the URL and then call it.

Or, alternatively, you can hook up a notification when the script has finished loading and just call displayUser() yourself from outside of test.js after test.js is fully loaded.

To detect when the external script file has loaded successfully and just call displayUser() yourself, see this reference.

If you want to get the callback value from the test.js script file itself and execute it from within test.js, this is the only way I know of to do it:

window.displayUser = function() {
    // do whatever
}

var scripts = document.getElementsByTagName("script");
for (var i = 0; i < scripts.length; i++) {
    var url = scripts[i].src;
    // extract filename and callback parameter from the URL
    var matches = url.match(/\/([^\/]+)\?.*callback=(.*?)(&|$)/);
    if (matches && matches[1] == "test.js") {
        // call the callback function
        window[matches[2]]();
    }
}