ASP.NET MVC - PartialView html not changing via jQuery html() call
- by Bryan Roth
When I change the selection in a DropDownList, a PartialView gets updated via a GET request. When updating the PartialView via the jQuery html() function, the html returned is correct but when it displayed in the browser it is not correct. For example, certain checkboxes within the PartialView should become enabled but they remain disabled even though the html returned says they should be. When I do a view source in the browser the html never gets updated.
I'm a little perplexed. Thoughts?
Search.aspx
<%@ Page Title="" Language="VB" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
Search
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<script type="text/javascript">
$(document).ready(function () {
$("#Sections").change(function () {
var section = $("#Sections").val();
var township = $("#Townships").val();
var range = $("#Ranges").val();
$.get("Search/Search?section=" + section + "&township=" + township + "&range=" + range,
function (response) {
$("#cornerDiv").html(response)
});
});
});
</script>
<h2>Search</h2>
<%--The line below is a workaround for a VB / ASPX designer bug--%>
<%=""%>
<% Using Ajax.BeginForm("Search", New AjaxOptions With {.UpdateTargetId = "searchResults", .LoadingElementId = "loader"})%>
Township <%= Html.DropDownList("Townships")%>
Range <%= Html.DropDownList("Ranges")%>
Section <%= Html.DropDownList("Sections")%>
<div id="cornerDiv">
<% Html.RenderPartial("Corners")%>
</div>
<input type="submit" value="Search" />
<span id="loader">Searching...</span>
<% End Using%>
<div id="searchResults"></div>
</asp:Content>
