Uncaught TypeError when using Google API JavaScript Client

Question

I am developing a simple Tic Tac Toe on Google App engine using cloud endpoints. My API name is tictactoe2D. I have only 1 endpoint method by the name tictactoe2D.compute2DMove() in my API which I have tested in the APIs explorer, and is working absolutely fine.

Now I am working to create the front end of the game, and using Google APIs JavaScript Client library to communicate with my endpoint method. I have followed exactly the same procedure as shown in the Getting Started page, which is a complete tutorial on using the library.

Here is code snippet from board.html, which loads the Javascript library-

<head>
    <title>Tic Tac Toe 3D</title>
    <meta http-equiv="content-type" charset="utf-8" content="text/html"/>

    <link href="css/main.css" rel="stylesheet" type="text/css">

    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://apis.google.com/js/client.js?onload=onLoadCallback"></script>

    <script type="text/javascript">
        function onLoadCallback()   {
           gapi.client.setApiKey('AIzaSyB7p7mH_vZGgtrbF4ntmKN2nBcsRyRFY1w');
           gapi.client.load('tictactoe2D', 'v1');   
       }
   </script>

   <script type="text/javascript" src="js/render.js"></script>
</head>

And here is the code from render.js, which add the functionality to deal with click event of all squares, and also communicates with my endpoint method-

$(document).ready(function() {
    $("#board td").click(function() {
        $(this).html("X");

        var boardString = [];
        var buttons = document.querySelectorAll('td');
        for (var i=0; i<buttons.length; i++)    {
            boardString.push(buttons[i].innerHTML);
        }

        boardString.join('');

        gapi.client.tictactoe2D.compute2DMove({'state': boardString}).execute(function(resp)    {
            document.write(resp.result.state);
        });
    });
});

Here is the JSFiddle for the whole code.

Problem occurs when I try to click one of the squares on the game board. Unexpectedly, nothing happens. I opened up the JavaScript console in Chrome, and found out that the console showed the following error whenever I click on a square-

       Uncaught TypeError: Cannot read property 'compute2DMove' of undefined

I have not been able to figure out why is this happening, and how can I fix it. Can anybody please help me out? Thankyou very much in advance.

Prateek Mathur · Accepted Answer · 2014-08-31 13:00:41Z

I ended up fixing the bug myself after I observing a new error on the JS console- The error was-

Failed to load resource: The server responded with a status of 403 (Forbidden)

I checked the JSON object that the server returned, and the object was something like this-

{"error":{"errors":[{"domain":"global","reason":"sslRequired","message":"SSL is required to perform this operation."}],"code":403,"message":"SSL is required to perform this operation."}}

After seeing this, I guessed that a secure connection(HTTPS) was not used to connect to the app, and that is why server was not loading the required data. To fix this, I needed to mandate that a secure connection be used every time the app is loaded. For this, I added the following tag to web.xml-

<security-constraint>
   <user-data-constraint>
      <transport-guarantee>CONFIDENTIAL</transport-guarantee>
   </user-data-constraint>
</security-constraint>

I updated my app on appspot, and checked the JS console. There was no error there, and my endpoint method executed too. I hope this information if helpful to anyone who faces a similar issue.

Also, I found out that the gapi library had some stability issues in the past, and the best way to safeguard your API calls against any possible flaws is to construct a REST request using gapi.client.request(), instead on making JSON-RPC requests. (see, Constructing REST requests using gapi.client.request). Constructing REST requests might be lengthy and cumbersome, but is safe too.

Collectives™ on Stack Overflow

Uncaught TypeError when using Google API JavaScript Client

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related