CODEWITHSUNDEEP
javascriptasp.nettriggersupdatepanel
user3339242
user3339242

Reputation: 641

Javascript function is not called after asyncpostbacktrigger

I am using javascript to implement a double scrollbar for my listview. When I change the asyncpostbacktrigger to postbacktrigger for the button click, the double scroll bar shows up fine and it goes through the javascript. However, everytime I use asyncpostbacktrigger it never goes back into the javascript after the button is clicked. Is there a way to fix this?

<script type="text/javascript">
    function DoubleScroll(element1) {
        var element = document.getElementById(element1);
        if (!element) return;
        var scrollbar = document.createElement('div');
        scrollbar.appendChild(document.createElement('div'));
        scrollbar.style.overflow = 'auto';
        scrollbar.style.overflowY = 'hidden';

        scrollbar.firstChild.style.width = element.scrollWidth + 'px';
        scrollbar.firstChild.style.paddingTop = '0px';
        scrollbar.firstChild.appendChild(document.createTextNode('\xA0'));
        scrollbar.onscroll = function () {
            element.scrollLeft = scrollbar.scrollLeft;
        };
        element.onscroll = function () {
            scrollbar.scrollLeft = element.scrollLeft;
        };
        element.parentNode.insertBefore(scrollbar, element);
    }

    $(document).ready(function () {
        DoubleScroll('doublescroll');

    })


</script>

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always">
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="DropDownList1" />
            <asp:AsyncPostBackTrigger ControlID="Button1" />
            <asp:AsyncPostBackTrigger ControlID="CloneButton" />
        </Triggers>
        <ContentTemplate>
            <div style="text-align: center;">
                <asp:Button ID="CloneButton" runat="server" Text="Clone Report Period" OnClick="CloneButton_Click" />
            </div>
            <div  style="text-align: center; position: absolute; margin-left: auto; margin-right: auto; left: 0; right: 0">
                <b>Program Name</b>
                <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" DataSourceID="SqlDataSource2" DataTextField="Program" DataValueField="ProgramID">
                </asp:DropDownList>
                &nbsp &nbsp
                <b>Report Period</b>
                <asp:DropDownList ID="DropDownList2" runat="server" DataSourceID="SqlDataSource3" DataTextField="ReportLabel" DataValueField="DataCollectionPeriodID" Height="21px" Width="172px">
                </asp:DropDownList>
                <asp:Button ID="Button1" runat="server" Height="30px" OnClick="Button1_Click" Text="Search" />
            </div>
   Omitted  
 </ContentTemplate>
    </asp:UpdatePanel>
    <asp:UpdateProgress ID="updateProgress" runat="server">
        <ProgressTemplate>
            <div style="position: fixed; text-align: center; height: 100%; width: 100%; top: 0; right: 0; left: 0; z-index: 9999999; background-color: transparent; opacity: 0.7;">
                <asp:Image ID="imgUpdateProgress" runat="server" ImageUrl="~/images/ajax-loader.gif" AlternateText="Loading ..." ToolTip="Loading ..." Style="padding: 10px; position: fixed; top: 45%; left: 50%;" />
            </div>
        </ProgressTemplate>
    </asp:UpdateProgress>

Upvotes: 1

Views: 1332

Answers (1)

sh1rts
sh1rts

Reputation: 1874

Try putting your code in the client-side pageLoad function instead of $(document).ready(function () {

This article on MSDN explains the client-side lifecycle, might be of some use:- http://msdn.microsoft.com/en-us/library/vstudio/bb386417(v=vs.100).aspx

Upvotes: 2

Related Questions