ASP.NET MVC2 App Losing jquery ui button theme on Ajax call

Question

I'm writing an ASP.NET MVC2 application that uses a jquery theme. I have a partial view that is updated with an Ajax call. When the partial view is re-rendered the buttons lose their jquery theme. I tried having the "onComplete" function restyle them, but no luck.

JS function in master page:

function styleControls() {
            $("input:submit, button").button();
        }

Partial View. The submit button styles correctly on load, but when a Ajax call updates the view it does not style.

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<MVCBugTracker.ViewModels.ProjectPriorityViewModel>" %>
<div id="priorities">
    <% if (Model.Priorities.Count > 0)
       { %>
    <table id="priority-table">
        <tr>
            <th>
            </th>
            <th>
                Priorities
            </th>
            <th>
                Image
            </th>
        </tr>
        <% foreach (var item in Model.Priorities)
           { %><tr id="#row-<%: item.PriorityID %>">
               <td>
                   <%: Ajax.ActionLink("Delete", "DeletePriority", new { id = item.PriorityID }, new AjaxOptions { UpdateTargetId = "priorities", OnFailure = "handleFailure", OnComplete="styleControls", Confirm = "Are you sure you want to delete this Priority?" })%>
               </td>
               <td>
                   <%: item.Name%>
               </td>
               <td style="text-align: center;">
                   <img src="<%: ResolveUrl(item.ImageUrl) %>" alt="" />
               </td>
           </tr>
        <% } %>
    </table>
    <% } %>
    <% using (Ajax.BeginForm("AddPriority", "Project", new { id = Model.ProjectID }, new AjaxOptions { UpdateTargetId = "priorities", OnFailure = "handleFailure", OnComplete = "styleControls" }))
       { %>
    <p>
        <label for="name">
            Priority Name:</label>
        <%: Html.TextBox("priorityname", "")%></p>
    <p>
        <% int count = 0;
           foreach (string s in Model.ImagesUrls)
           {%>
            <input type="radio" name="imageurl" value="<%: s %>" <%= count == 0 ? "checked=\"checked\"" : "" %> /><img src="<%: ResolveUrl(s) %>" alt="" />
        <% count++;
           } %>
    </p>
    <p>
        <input type="submit" value="Submit" /></p>
    <% } %>
    <span id="priority-message" class="field-validation-error">
        <% if (Model.Message != null)
           { %>
        <%: Model.Message%>
        <% } %>
    </span>
</div>

The partial view is inside a jquery tab.

Answer 1

Does your code ever call the onComplete function? If you use Firebug, you can use the debugger keyword to stop the script and invoke the debugger.

Have your Firebug window open and put this in your function:

$.onComplete(function(){
   debugger;  
});

Answer 2

I figured it out. Need to use the onSuccess function instead of the onComplete. onComplete is called after the ajax call is made. onSuccess is called after the ajax call has returned and updated the html.