I have a problem with Updating Form Element Look and Feel under Update Panel Control.
I Used Uniform JQuery Plugin to shape form controls such as DropDown. it works very well in a ASP.net form but i used an update panel to generate CheckboxList Items when user selects a dropDownList Item.
The picture Below Shows form Look and Feel:
but when I Select a Category from list to update the UpdatePanel Template and updating CheckBoxes the uniform style removes from controls located inside update panel:
I call uniform function above the form:
<script type="text/javascript">
$(function() {
$("input, textarea, select, button").uniform();
});
</script>
and Update Panel Markup:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<p>
انتخاب دسته: <myCtrl:CategoryDDL AutoPostback="True" EmptyItemText="همهی دستهها"
ID="CategoryDDL" OnSelectedIndexChanged="CategoryDDL_SelectedIndexChanged" runat="server"
SelectedCategoryId="0" />
</p>
<p>
برند محصولات<br />
<asp:CheckBoxList ID="CheckBoxListBrands" runat="server">
</asp:CheckBoxList>
</p>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="CategoryDDL" />
</Triggers>
</asp:UpdatePanel>
Know Can Anyone Help me to correct this bug??? is there any possible way to keeping update panel control style from removing?
You can't keep it from removing the styles (the elements are replaced completely), but you can re-apply it by running this once in your code:
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function() {
$("#updatePanelDiv :input").uniform();
});
What this does is attach an event handler to run the plugin again when the endRequest
event of the UpdatePanel fires (each time it comes back with new content/elements).
As noted in comments, wrapping the UpdatePanel in a wrapper will restrict the plugin to just this area.