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>
