AJAX interfering with google sign in button

[ShaharB via StackOverflow]

Im trying to add a google signin button to my website My website Is a google-app-engine application

It seems that for some reason, my AJAX code on the page is interfering with the google api script (When I remove the script and signin button everything works fine, and when I remove the AJAX function everything works fine)

The site also contains a facebook sign in button (which works)

I tried to follow the guide at https://developers.google.com/+/web/signin/#using_the_client-side_flow , but I'm fairly new to web programming so maybe I did something wrong

The code with the AJAX is the following class:

var ImageToScreen = Class.create({
init: function(parentName, width, height)
{
    this.imageWidth = width;
    this.imageHeight = height;
    this.parentName = parentName;

    var currClass = this;
    $.ajax({
          type: "GET",
          url: my servlet name,
          scriptCharset: "utf-8" , contentType: "application/json; charset=utf-8"})

  .done(function(fullData) 
  { 
      console.log("here");
       $.each(fullData, function(index,data) { 
          parent = $("." + currClass.parentName);
          figure = document.createElement("figure");
          id = data.projectName;
          figure.setAttribute("id",id); 

          numOfImages = $("." + currClass.parentName + "_Generated").length;
          row = Math.floor(numOfImages/3);
          column = numOfImages%3;
          img = $('<img id="' + id + '_image">');
          img.attr('src', data.imageName);
          img.attr('class',currClass.parentName + "_Generated");

          parent.append(figure);
          $("#" + id).append(img);
          caption = document.createElement("figcaption");
          $("#" + id + "_image").attr("width", currClass.imageWidth);
          $("#" + id + "_image").attr("height",currClass.imageHeight);

          ($("#" + id)).append(caption);
          $("#" + id + " figcaption").text(data.label);
          img.click(function() 
          {
              currClass.click(data.imageName,data,currClass);
          });
       });
  })
  .fail(function(data) { console.log(data);});
},
click: function(imageName, data, currClass)
{
    $("#displayDiv").remove();
    var div = $("<div id='displayDiv'  z-index='99'  position='fixed' ></div>").hide();

    figure = $("<figure class='TopFigure'></figure>");
    img = $('<img class="TopImage" >');
    img.attr('src', data.imageName);
    caption = $("<figcaption class='TopText'>" + data.description + "</figcaption>");
    div.append($("<h1 class='TopText'>"+data.label + "</h1>"));
    figure.append(img);
    figure.append(caption);
    div.append(figure);
    $(document.body).append(div);
    div.fadeIn('slow');

    div.click(function() {$("#displayDiv").fadeOut('slow'); });

}

});

The google signin button code is

<span id="signinButton">
  <span
    class="g-signin"

    data-clientid= 'my client id'
    data-cookiepolicy="single_host_origin"
    data-requestvisibleactions="http://schemas.google.com/AddActivity"
    data-scope="https://www.googleapis.com/auth/plus.login">
  </span>
</span>

And adding the google script is done right before the /body

   (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/client:plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();

Thanks!

Please DO NOT REPLY directly to this email but go to StackOverflow:
http://stackoverflow.com/questions/18848421/ajax-interfering-with-google-sign-in-button