Javascript/AJAX debugging

Question

I'm trying to implement a custom Google Hangouts app and am stuck trying to pass the Hangouts ID from the Hangouts app to my own app. Hangouts runs on Google's server so I believe it's a cross domain issue.

I have this code in the body of my custom Hangouts app, which is loaded in an iframe in the overall Hangouts window:

<body>
   <script>
   var postHangoutId = function(hangoutId) {
     console.log("in function(hangoutId)");

     $.post({
       url: "https://www.myserver.com", 
       crossDomain: true,             
       dataType: "json",                 
       data: {
         "hangouts_id" : hangoutId
       },

       success: function( response ) {
         console.log( response ); // server response
       }
     });
  }

  gapi.hangout.onApiReady.add(function() {
    console.log("gapi.hangout.onApiReady.add");
    postHangoutId(gapi.hangout.getHangoutUrl().split('/').pop());
  });


  window.onload = function() {
    console.log("hangouts load");
    console.log("onload getURL" + gapi.hangout.getHangoutUrl());
  }
</script>

My App

The main goal is to get the Hangouts ID and Post it to my server. Nothing seems to be happening, so I've littered the code with console.log statements. The header, "My App", is displayed, so at least I know the custom app is running.

However, when I open Chrome's Developer Tools on the opened Hangouts window and go to the Console tab, this is all I see:

enter image description here

I've removed my AJAX call and rerun the app to make sure, and these errors are still there, so they aren't related to the AJAX call. As you can see, none of my logs are here. What am I doing wrong?

Your problem seems to be that the browser is disallowing cross-domain requests. It does this to hamper CRSF-XSRF scripters. I don't remember exactly how to get around this. — laptou, Jun 27 '14 at 01:11
But my more basic question is why are none of my logs showing? That first error seems to be from a different call, and from what I can tell my AJAX call never gets run. — OdieO, Jun 27 '14 at 01:12
Maybe `console.log` doesn't work in Chrome. I don't know why it's not working. — laptou, Jun 27 '14 at 01:13
If you are going cross domain I believe your 'datatype' needs to be JSONP and not JSON. — Max Baldwin, Jun 27 '14 at 01:14

score 1 · Accepted Answer · answered Jun 27 '14 at 04:41

You need to use JSONP as dataType in jQuery Ajax Cross Domain Requests Javascript Security blocking the requests in your code

$.post({
       url: "https://www.myserver.com", 
       crossDomain: true,             
       dataType: "jsonp",                 
       data: {
         "hangouts_id" : hangoutId
       },

       success: function( response ) {
         console.log( response ); // server response
       },error : function(err){console.log(err)}

     });

Javascript/AJAX debugging

My App

1 Answers1