Does JavaScript get excuted when partial view is loaded?

Question

Background

I'm working with ASP.NET MVC. I've got a partial view which contains JavaScript. I'm using AJAX get to load the partial view into a <div> tag. The JavaScript registers a click event for a group of radio buttons.

Problem

It doesn't seem to be executing: when the radio buttons are clicked, the form doesn't get submitted.

Here is my partial view:

<% using (Ajax.BeginForm(ActionName.Approve, ControllerName.Supervisor, new AjaxOptions { HttpMethod = "POST", InsertionMode = InsertionMode.Replace, UpdateTargetId = "Result"}, new { id = "IsSupervisorApprovalRequiredForm" }))
   {%>
    <p>Is supervisor approval required?</p>
    <label for="IsSupervisorApprovalRequired">Yes</label><%=Html.RadioButton("IsSupervisorApprovalRequired", "0", new { @class = "IsSupervisorApprovalRequiredYes" })%>
    <label for="IsSupervisorApprovalRequired">No</label><%=Html.RadioButton("IsSupervisorApprovalRequired", "1", new { @class = "IsSupervisorApprovalRequiredNo" })%>
<%} %>
<script type="text/javascript">
    $("#IsSupervisorApprovalRequired").click(function() {
     $("form#IsSupervisorApprovalRequiredForm").submit();
    });
</script>

Question

Does JavaScript get executed when partial view is loaded?

Answer 1

Wrap the statement in $(function() {...}); so it will get called when the document is ready.

So it would look something like this:

$(function() {
    $("#IsSupervisorApprovalRequired").click(function() {
        $("form#IsSupervisorApprovalRequiredForm").submit();
    });
});

Answer 2

Yes and no. The order of execution in your scenario is as follows:

1. Page gets requested
2. ASP.NET Renders Partial View into the parent page
3. Javascript gets executed on that entire page

For your particular problem. You'll need to load that Javascript snippet on page load before it can actually bound to the events. Your code should look like the following:

<% using (Ajax.BeginForm(ActionName.Approve, ControllerName.Supervisor, new AjaxOptions { HttpMethod = "POST", InsertionMode = InsertionMode.Replace, UpdateTargetId = "Result"}, new { id = "IsSupervisorApprovalRequiredForm" }))
   {%>
    <p>Is supervisor approval required?</p>
    <label for="IsSupervisorApprovalRequired">Yes</label><%=Html.RadioButton("IsSupervisorApprovalRequired", "0", new { @class = "IsSupervisorApprovalRequiredYes" })%>
    <label for="IsSupervisorApprovalRequired">No</label><%=Html.RadioButton("IsSupervisorApprovalRequired", "1", new { @class = "IsSupervisorApprovalRequiredNo" })%>
<%} %>
<script type="text/javascript">

    $(function() {
        $("#IsSupervisorApprovalRequired").click(function() {
            $("form#IsSupervisorApprovalRequiredForm").submit();
        });
    });

</script>

Answer 3

This might also be caused by the HTML generated by the HtmlHelper. Multiple HTML elements with the same ID are not allowed, but the helper will generate something like:

<input id="IsSupervisorApprovalRequired" name="IsSupervisorApprovalRequired" type="radio" />
<input id="IsSupervisorApprovalRequired" name="IsSupervisorApprovalRequired" type="radio" />

As a result, when you match "#IsSupervisorApprovalRequired" with jQuery, it's looking for an element with that ID. Since two of them exist, the function will only be bound to the first one, causing the second radio button's "click" event to never fire.

As an alternative, try this:

$("input[name=IsSupervisorApprovalRequired]").click(function () { /* ... */ });

This approach checks the "name" attribute of the element instead of its ID. Since "name" values, unlike IDs, don't have to be unique, jQuery is able to handle multiple elements matching that pattern and should bind the event correctly.