Javascript object cannot access url if it was received from AJAX

Question

If url is assigned manually, for example imgUrl="http://image.jpg" it works perfectly, but if it received with the use of AJAX in function "getRemote" from back end it didn't. If the request asynchronous it's not even in this block, but if it synchronous it is received, but AR object cannot use it. Any ideas why?

var imgUrl = getRemote();
this.img = new AR.ImageResource(imgUrl);
this.imgOverlay = new AR.ImageDrawable(this.img, 0.5, {
    offsetX: 0,
    offsetY: 0,
});

getRemote function:

function getRemote() {
return $.ajax({
    type: "GET",
    url: "http://someurl.php",
    async: true
}).responseText;

}

It is better to show even the getRemote() code because the feeling is that the error may be within that function. — pinturic, Sep 10 '15 at 11:18
When asynchronous the code will continue executing before the AJAX request completes.. Can we see the result/code of the `getRemote()` method? This is probably the root of the issue — Callan Heard, Sep 10 '15 at 11:19
[How to return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-asynchronous-call) and maybe [Cross domain javascript concept](https://stackoverflow.com/questions/25310450/cross-domain-javascript-cors-concept) — Andreas, Sep 10 '15 at 11:19

score 0 · Accepted Answer · answered Sep 10 '15 at 11:19

Unless you can wait for response a method cannot return an ajax response, instead you should wrap your code in a function and use it a a callback, that will be executed when ajax is complete:

var callOnRemote = function(imgUrl){
   this.img = new AR.ImageResource(imgUrl);
   this.imgOverlay = new AR.ImageDrawable(this.img, 0.5, {
       offsetX: 0,
       offsetY: 0,
   });
};

getRemote(callOnRemote);

The getRemote function with jquery would look something like this:

$.ajax({
  url: "/test.html"
}).success(callOnRemote);

Javascript object cannot access url if it was received from AJAX

1 Answers1