I am facing an issue with my DynamicPopulateExtender control. I need it to render HTML based on the value of an asp:DropDownList. The problem lies in writing the JavaScript code that can fetch the dropdown value, assign it to the DynamicPopulate control's contextKey, and trigger the update.
At the moment, my code freezes when it reaches the populate() method in the JavaScript, indicating that there might be an issue with my JavaScript implementation.
Below are the components involved - DropDownList, Extender, and the panel to be updated:
<asp:DropDownList id="cboResponse" cssclass="DataControl" DataTextField="lov_label" DataValueField="lov_cd" runat="server" />
<asp:Panel ID="pSectFunc" runat="server" />
<ajaxToolkit:DynamicPopulateExtender ID="DPE" runat="server" TargetControlID="pSectFunc" ServicePath="/ajax/SAT.asmx" ServiceMethod="GetPanelHTML" />
Here is my current JavaScript code. While I can successfully retrieve the value from the drop down into ServiceId, I'm struggling to locate and invoke the extender with the correct ContextKey:
<script type="text/javascript">
function ValPickListSelection(val, args) {
args.IsValid = document.getElementById(val.controltovalidate).selectedIndex > 0;
}
//Updating the contextKey of the DynamicPopulateExtender with the right
//ServiceId is essential for rendering the accurate sector-function combination.
$(document).ready(function () {
$('#<%= cboResponse.ClientID %>').change(function () {
var dpe = $('#<%= DPE.ClientID %>');
var ServiceId = Number($(this).val());
if (ServiceId > 0) {
dpe.ContextKey = ServiceId;
dpe.populate();
}
});
});
</script>