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

Question

I am facing an issue while using a Jquery JqTransform plugin with controls inside an Ajax update panel in asp.net. Here is the code:

<%@ 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>

when the Page loads it applies jqtransform to convert the dropdown and other Controls and apply some style. But as soon as I select an Album from the dropdownlist it does a postback and retrieves further details from the database. To avoid that full postback I am using an update panel. But after using it I started facing the problem "my controls on the page aren't converted by the jqtransform".

In the page head there is a script, the file that calls the JqTransform. Here it is:

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

Please help me i just want that jqTransform will be applied to controls even if i select an album from the dropdownlist and it causes a partial postback.

Answer 1

In case of a 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 2

Create a new div inside the <ContentTemplate> and call jqTransform plugin for that div.

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

and then call jqTransform plugin as below:

<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 worked fine for me even after getting postbacks through the updatepanel.

Answer 3

If you want to call your jquery method on every postback then you need to have an Ajax pageLoad, not just on document ready. To get jqTransform working on pageLoad use the following:

<script type="text/javascript">

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

</script>

Answer 4

I've had this situation before, its not an issue its by design. What you are doing is reloading a new list into a combobox effectively destroying whats already rendered. Sounds like the partial postback is an ajax call so for example if your ajax function looked like this

$.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!
   }
});

You could even go ahead and just re-jqTransform the combo box if thats then only item being updated instead of the whole form for performance. Hope that helps!