MVC 3 Razor Dynamically added Ajax.Action Link Only works first time in IE8

Question

I am very new to web development (about a month) and i have run into something strange.

I am using VS2010, MVC 3 Razor to create a simple app.

I have two tables holding the same type of information. As in both table A and Table B hold users. the Difference being, Table A has users who are in the "Role", and table B holds the users who are not in the "Role".

Both tables have two columns, One with the user name, the other holds a Ajax.ActionLink.

So, to add a user to Table "B", I click the "Ajax.Actionlink" on Table "A". The "add" is save through the MVC action, and i move the Table Row using AjaxOption OnSuccess event. The OnSuccess event basically, moves the Row, and alters the Ajax.ActionLink so the newly added User row's ActionLink will Remove the User.

I hope that's clear.

This all works fine. I can add user "A" to the table "A" and everything works fine. I can remove user "A" from table "A" to table "B" and everything is fine. But I can not re-add User A to table "A". The OnSuccess runs, so the row is move, but the Action event is not called. So if i refresh the screen i can see the move did not actually take place. it is the same if i start with User "B" on table "B". Also, a page refresh (F5) does not fix the links, the remain broken until i close and reopen the page.

Everything looks good in the HTML, it shows in the status bar that when i click the link, the correct href is being called, but fiddler registers no call and the action is not called.

I suspect i have some sort of binding issues, but i am lost here. Everything works fine in Firefox

Please help. Code below, with Comments added. Remember this works to add and remove, remove and add, but re-add and re-remove only calls the function but does not call the Action. So i know the Actions are spelt correctly etc.

//// element is the ID of the element i am Moving
//// targetElement is the ID of the tbody i am moving the element to
function move_element(element, targetElement) {
    try 
    {
       //// get the HTM 
       var elementHTML = $("tr[id=" + element + "]").children(".Action").html();
       //// based on the tbody id
       switch (targetElement) 
       {
       case "AssignedToGroup":
            //// Change the target body for next call to this function
            elementHTML = elementHTML.replace("AssignedToGroup", "UnassignedToGroup");
            //// change th action name
            elementHTML = elementHTML.replace("AddGroupRole", "DeleteGroupRole");
            //// change the display label
            elementHTML = elementHTML.replace("Assign", "Remove");
            break;
       case "UnassignedToGroup":
            elementHTML = elementHTML.replace("UnassignedToGroup", "AssignedToGroup");
            elementHTML = elementHTML.replace("DeleteGroupRole", "AddGroupRole");
            elementHTML = elementHTML.replace("Remove", "Assign");
            break;
     }
     //// Create the new Ajax <td> element
      $("tr[id=" + element + "]").children(".Action").replaceWith("<td  class='Action'>" + elementHTML +  "</td>")
      //// Add the row to the other body
      $("tr[id=" + element + "]").appendTo($("tbody[id=" + targetElement + "]"));
   }
   catch (e) 
   {
     alert(e.Message); ////NO ERROR IS RAISED
   }
}

Answer 1

I was looking at a similar issue you have had and found a solution here: Cache issue with Ajax.ActionLinks To summarize:

• One suggestion was to call this: $.ajaxSetup({ cache: false }); If you are using unobtrusive javascript support for jquery.
• Another suggestion was to use "HttpMethod = "POST" in the AjaxOptions.

Anyways hopefully this may help you or someone else, so I posted it here.