Question

在asp.net的Ajax更新面板中使用带有控件的Jquery JqTransform插件时，我遇到了一个问题。这是代码：

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" EnablePartialRendering="true"></asp:ToolkitScriptManager>

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
      <asp:DropDownList ID="ddlArtist" runat="server" AutoPostBack="True" onselectedindexchanged="ddlArtist_SelectedIndexChanged"></asp:DropDownList>
      <p class="maintext"><asp:Literal ID="ltrArtistDesc" runat="server"></asp:Literal></p>
    </ContentTemplate>

    <Triggers>
       <asp:AsyncPostBackTrigger ControlID="ddlArtist" EventName="SelectedIndexChanged" />
    </Triggers>

</asp:UpdatePanel>

当页面加载时，它应用jqtransform来转换下拉列表和其他控件并应用某些样式。但是，只要我从下拉列表中选择一个相册，它就会进行回发并从数据库中检索更多详细信息。为了避免完整的回发，我使用的是更新面板。但在使用它后，我开始面临问题“我的页面上的控件没有被jqtransform转换”。

在页眉中有一个脚本，即调用JqTransform的文件。这是：

<script language="javascript" type="text/javascript">
        $(function(){
            $('form').jqTransform({imgPath:'jqtransformplugin/img/'});
        });
</script>

请帮助我，我只是希望jqTransform将应用于控件，即使我从下拉列表中选择一个相册并导致部分回发。

Answer 1

我之前遇到过这种情况，这不是设计问题。你正在做的是将一个新列表重新加载到一个组合框中，有效地破坏了已呈现的内容。听起来像部分回发是一个ajax调用，例如，如果你的ajax函数看起来像这样

$.ajax({
url: 'ajax/updatelist.html',
  success: function(data) {
      ...your code to update list...then
      $('form').jqTransform({imgPath:'jqtransformplugin/img/'}); //this will re render your form!
   }
});

你甚至可以继续只是重新jqTransform组合框，如果那样只有项目被更新而不是整个表格的性能。希望有所帮助！

Answer 2

如果是Microsoft Update Panel

$(document).ready(function () {
        var prm = Sys.WebForms.PageRequestManager.getInstance();

     prm.add_endRequest(EndRequest);

     function EndRequest(sender, args) {

             $('form.jqtransform').removeClass('jqtransformdone');
             $('form.jqtransform').removeClass('jqTransformHidden');

                    $("form.jqtransform").jqTransform({ selectwidth: 240 });
            }
});

Answer 3

在<ContentTemplate>内创建一个新div，并为该div调用jqTransform插件。

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
    <div class="formstyle">
        ......... Your form elements
    </div>
    </ContentTemplate>
</asp:UpdatePanel>

然后调用jqTransform插件，如下所示：

<script type="text/javascript">
  $(function () {
    //Initial bind
    $(document).ready(function () {
      BindControlEvents();

      //Re-bind for callbacks
      var prm = Sys.WebForms.PageRequestManager.getInstance();
      prm.add_endRequest(function () {
        BindControlEvents();
      });

      function BindControlEvents() {
        $('.formstyle').jqTransform();
      }
    });
  });
</script>

jqTransform即使在通过更新面板获得回发后也能正常使用。

Answer 4

如果你想在每个回发上调用你的jquery方法，那么你需要有一个Ajax pageLoad，而不仅仅是文档就绪。要使jqTransform在pageLoad上运行，请使用以下命令：

<script type="text/javascript">

    function pageLoad() {
        $("form").removeClass("jqtransformdone");
        $("form").jqTransform(); 
    };

</script>

问题在asp.net的Ajax更新面板中使用Jquery JqTransform插件时

4 个答案: