Visualforce remoting XMLHttpRequest error

Question

I'm trying to use Visualforce Remoting in order to populate fields on a custom object but I'm getting the error "[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/."

Since I'm using visualforce I'm not sure that the $.getScript() solution applies to me. I'm trying to understand why the alert(id) doesn't work and what to do about the synchronous XMLHttpRequest problem but haven't found a good solution on my own.

Here's my jquery script

<script> 
       var j$=jQuery.noConflict();

        j$(document).ready(function(){
          var game;
                var id;
                var name;
                var screenshots;
                var rating;

            j$('[id$=searchButton]').on("click", function(event){
                 game = j$('[id$=gameSearch]').val();

                console.log(game);//this is getting the game correctly so the problem is with the call...
                Visualforce.remoting.Manager.invokeAction(
                '{!$RemoteAction.AdminPageController.getGameInformation}',
                    game,
                    function(result,event){
                        if(event.status){
                            id = result[0].id;
                            console.log(id);//will output the id here correctly but still getting error. 
                            name=result[0].name;
                            screenshot = result[0].screenshots;
                            rating = result[0].rating;
                            console.log(rating); //outputs rating correctly here. 
                        }else if (event.type === 'exception') {
                        document.getElementById("responseErrors").innerHTML = event.message;
                        } else {
                            document.getElementById("responseErrors").innerHTML = event.message;
                            }
                    },
                    {buffer: false, escape:true}
                );
                alert(id); //will output undefined here...
                event.preventDefault(); //prevents submit from refreshing the page to debug. 

            });
     });
    </script>

I tried using the buffer:false above because I was told that helps make the XMLHttpRequest asynchronous but no such luck. This is my Apex Controller

 @RemoteAction
public static List<Object> getGameInformation(string search)
{
    String URL = 'https://api-2445582011268.apicast.io/games/?search='+ search +'&fields=id,name,rating,screenshots';
    Http client = new Http();
    HttpRequest request = new HttpRequest();
    request.setEndpoint(URL);
    request.setMethod('GET');
    request.setHeader('user-key', '***MY KEY IS HERE****');
    request.setHeader('Cache-Control', 'no-cache'); 
    HttpResponse response = client.send(request);
    List<Object> results = (List<Object>) JSON.deserializeUntyped(response.getBody());

    System.debug('The response body'+ response.getbody());
    System.debug('The list results' + results);
    For(Object o: results)
        system.debug(o); //all the debugs work. returns correct fields.
    return results;

}

Firstly note that what you're seeing in the console is a warning, not an error. It also doesn't mean that your code won't work, but instead that it's not following good practice. The code you've shown looks like it's using the async callback pattern, so it's hard to say exactly where the issue is coming from. Is the `Visualforce.remoting.Manager.invokeAction()` function something you have control over? — Rory McCrossan, Dec 18 '17 at 14:31
Thank you very much for the response! Its a built in function for visualforce to pass javascript variables to the apex controller. The only things I have control over are the buffer, timeout, and escape options by the look of it. https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_js_remoting_configuring_request.htm also, I noted that even though I am declaring the id inside the ready function and referring to it later, its not "sticking" so that is why its coming up undefined at the end of the code where I say alert(id) and I'm not sure why. — ToddDay98, Dec 18 '17 at 15:09
`id` is unchanged because the code you've shown is asynchronous. This means that you're trying to use `id` before it's been set. See [this question](https://stackoverflow.com/questions/23667086/why-is-my-variable-unaltered-after-i-modify-it-inside-of-a-function-asynchron) to understand the issue better. To solve that issue you need to work with the `id` value *inside* the callback function you provide to `invokeAction()`. Judging from this behaviour, the code you've shown is not causing the 'sync blocking' warning in the console. — Rory McCrossan, Dec 18 '17 at 15:13
Ahhhhh okay that makes perfect sense and thank you for the follow up/resource. Very much appreciated. — ToddDay98, Dec 18 '17 at 16:23

Visualforce remoting XMLHttpRequest error

0 Answers0