.NET MVC Ajax Form - How do you hide it?

Question

Ok, everything is 'functionally' working with what I am attempting to accomplish and once again, I am sure this is something dumb, but I cannot figure out how to do this one thing.

I have an edit form for an entity, lets say a car. This 'car' can have 0 - many passengers. So on my edit form, I have all the fields for the car, then a list view showing each passenger (partial). I also have a 'add new passenger' button that will render a new partial view that allows you to enter a passenger. This has a cancel link and an add button to submit an Ajax form. When you add a passenger, the passenger is automatically added to the list, but I need the enter passenger form to go away. I have tried using the onSuccess and onComplete functions to hide the div that the form is in, but both render just the partial view HTML elements (white screen, text) and not the partialView in the context of the entire page.

Sources: 1) Main Edit View

    <script type="text/javascript">
    Function hideForm(){
        document.getElementById('newPassenger').style.display = 'none';
    }

</script>
<h2>Edit</h2>

<%-- The following line works around an ASP.NET compiler warning --%>
<%= ""%>

<%Html.RenderPartial("EditCar", Model)%>
<h2>Passengers for this car</h2>
<%=Ajax.ActionLink("Add New Passenger", "AddPassenger", New With {.ID = Model.carID}, New AjaxOptions With {.UpdateTargetId = "newPassenger", .InsertionMode = InsertionMode.Replace})%>
<div id="newPassenger"></div>
<div id="passengerList">
    <%Html.RenderPartial("passengerList", Model.Passengers)%>
</div>
<div>
    <%= Html.ActionLink("Back to List", "Index") %>
</div>

2) AddPassenger View. The cancel link below is an action that returns nothing, thus removing the information in the div.

<%  Using Ajax.BeginForm("AddPassengerToCar", New With {.id = ViewData("carID")}, New AjaxOptions With {.OnSuccess = "hideForm()", .UpdateTargetId = "passengerList", .InsertionMode = InsertionMode.Replace})%>   
    <%=Html.DropDownList("Passengers")%> 
    <input type="submit" value="Add" />
    <%=Ajax.ActionLink("Cancel", "CancelAddControl", _
                                            New AjaxOptions With {.UpdateTargetId = "newPassenger", .InsertionMode = InsertionMode.Replace})%><% end using %>

Answer 1

Ok - figured this out, I suppose it was getting too late last night. So, here is the answer, it actually turned out to be a few small issues culminating into one.

1. Function hideForm() in the javascript should be function hideForm(), no capitals. Too used to writing controller functions I suppose.
2. I was using "hideForm()" in the OnSuccess attribute, not "hideForm" - doh.
3. You probably don't want to hide the div as when you click the add new passenger link again, the div won't display. Changed hideForm function to set the innerHTML property of the div to ''.

Thanks again darin for your assistance, I was trying to making more out of it than it turned out to be.

Answer 2

Make sure that you've referenced both the MicrosoftAjax.js and MicrosoftMvcAjax.js scripts in your page. The reason for getting the partial view contents (white screen, text) could be a script error which prevents the ajax from executing correctly. Look with FireBug if there are some errors during the execution.

As far as hiding the form is concerned you could use the OnSuccess callback:

<% Using Ajax.BeginForm("AddPassengerToCar", 
    New With { .id = ViewData("carID")}, 
    New AjaxOptions With {
        .UpdateTargetId = "passengerList", 
        .InsertionMode = InsertionMode.Replace,
        .OnSuccess = "hideForm"
}) %>

The hideForm javascript function will be executed if the AJAX call succeeds and will hide the desired div.