title: Ajax always returns error
body: <p>Hello to those viewing this!</p>
  
  <p>I'm having some trouble a bad Ajax call.
  In my MVC3 project I have a database that registers a row when a user adds another user on his friend list.</p>
  
  <p>Here is the html/Razor code:</p>
  
  <pre><code>@if(!Model.areFriends){
      &lt;div id="AddFriendAncor" class="AddButton"&gt;&lt;a href="#" id="@Model.theUser.userID" class="Add"&gt;Add to friendlist&lt;/a&gt;&lt;/div&gt;
  }
  else
  {
      &lt;div class ="AddFriendAncor"&gt;&lt;a href="#" id="DoneAdding"&gt;You are friends&lt;/a&gt;&lt;/div&gt;   
  }
  </code></pre>
  
  <p>Here is the Javascript/jQuery/Ajax code.</p>
  
  <pre><code>$(".Add").on("click", function (event) {
      event.preventDefault();
      var acceptThisFriend = { "ID": event.target.id };
      $.ajax({
          type: "POST",
          url: "/Profile/AddFriend",
          contentType: "application/json; charset=utf-8",
          dataType: "json",
          data: JSON.stringify(acceptThisFriend),
          success: function () { alert("Works");},
          error: function ()
          {
              document.getElementById(acceptThisFriend.ID).innerHTML = "Friend Added";
          }
      });
  });
  </code></pre>
  
  <p>You might notice that the error function actually holds what the success function should have.
  The reason is that it works that way. It's terrible, but I had to get something working.</p>
  
  <p>Also, it adds two instances to the database. This is because it dynamically creates the Html, any ideas on how to unbind this when I create it?</p>
  
  <p>EDIT: The AddFriend function:</p>
  
  <p>The AddFriend function was made into this instead:</p>
  
  <pre><code>    public virtual ActionResult AddFriend(string ID)
      {
          System.Diagnostics.Debug.WriteLine(ID);
          var friendID = Convert.ToInt32(ID);
          var user = u_rep.GetUser(User.Identity.Name);
  
          f_rep.AddFriend(user.userID, friendID);
          return Json(true);
      }
  </code></pre>
  
  <p>I changed the AddFriend to look like what it does above, now the Ajax gets something and returns success, but I still add twice to the database dispite changing my Ajax to this:</p>
  
  <pre><code>$(".Add").on("click", function (event) {
      event.preventDefault();
      var acceptThisFriend = { "ID": event.target.id };
      $.ajax({
          type: "POST",
          url: "/Profile/AddFriend",
          contentType: "application/json; charset=utf-8",
          dataType: "json",
          data: JSON.stringify(acceptThisFriend),
          success: function () { $("#AddFriendAncor").replaceWith("&lt;p&gt;Vini bætt við&lt;/p&gt;"); },
          error: function ()
          {
              alert("fail");
          }
      });
  });
  </code></pre>