开发者

Controls inside Update Panel and JQuery Form Look and Feel Plugin Problem!!! HELP

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:

Controls inside Update Panel and JQuery Form Look and Feel Plugin Problem!!! HELP

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:

Controls inside Update Panel and JQuery Form Look and Feel Plugin Problem!!! HELP

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>
                انتخاب دسته开发者_开发问答:&nbsp;<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.


change this method

$(function() {
$("input, textarea, select, button").uniform();
});

with

function pageLoad(){
 $("input, textarea, select, button").uniform();
}

that is it..

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜