Search code examples
javascriptajaxchrome-app-developer-tool

Javascript/AJAX debugging

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?

Solution

  • 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)}

     });