Javascript – Does JavaScript get excuted when partial view is loaded

ajaxasp.net-mvcjavascript

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?

Best Answer

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>
Related Topic