CODEWITHSUNDEEP
jqueryvisual-studio-2008updatepanel
user1512593
user1512593

Reputation: 383

Scrollable function not executing after updatepanel

QI have a jQuery function that causes my datagrid search results to be scrollable.
However, if I update the panel the scroll bar is gone and the results just fill the entire page over everything. Is it because it is notcalling that function again? Here is my current code.

jQuery

<script type="text/javascript">

        $(document).ready(function scroll() {
            $('#<%=gvMapping.ClientID%>').Scrollable({ ScrollHeight: 370 });
        }
        )
</script>
<script type="text/javascript">
    function getGL(){
    var button = document.getElementById("<%= btnGetGLDept.ClientID %>");
    button.click();
}
</script>

HTML

 <%--Mapping Search Bar --%>
    <div class="searchrev1">
    <asp:TextBox ID="mpSearch" class="txtbox" runat="server" text="Please start entering Department Name or Number to search"
        onfocus="if(this.value==this.defaultValue) {this.value='';$(this).css('color','#3B3B3B');}"  
        onblur="if(this.value=='') {this.value=this.defaultValue;$(this).css('color','rgb(173,180,195)');}" Width="400px"/>
    <asp:Button  ID="mapsearch" text="Search" runat="server" 
        onclick="getGLDepts" />
    <asp:CheckBoxList ID="mpcbl" class="cbl" runat="server" DataSourceID="Rollup" 
            DataTextField="COA_SYSTEM" DataValueField="COA_SYSTEM" ondatabound="chkFormat" OnClick="javascript:scroll;getGL();"></asp:CheckBoxList>
        <asp:SqlDataSource ID="Rollup" runat="server" 
            ConnectionString="<%$ ConnectionStrings:Rollup2ConnectionString %>" 
            SelectCommand="SELECT DISTINCT [COA_SYSTEM] FROM [T_ROLLUP_GL_EXCEPT]">
        </asp:SqlDataSource>
    </div>
    <%--Mapping Graph --%>
    <div class="botcontent">
    <asp:Label ID="lblGLDeptData" runat="server"></asp:Label>
    </div>
    <asp:UpdatePanel runat="server">
        <ContentTemplate>
            <div class="topcontent">
                <asp:GridView ID="gvMapping" runat="server" GridLines="none" AutoGenerateColumns="false">
                <HeaderStyle CssClass="GVFixedHeader" />
                <Columns>...</Columns>
                </asp:GridView>
                <asp:Button ID="btnGetGLDept" runat="server" OnClick="getGLDepts" CssClass="invisible" />
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>

I have the Checkboxlist call the function getGL() when clicked. That calls then jquery function that calls the buttom click to call the c# code. This is when the scrollable doesnt occur.

Upvotes: 0

Views: 547

Answers (2)

Brandon Culley
Brandon Culley

Reputation: 1334

Your function for jQuery document.Ready will only be called once because your grid is contained in an updatePanel. UpdatePanels cause partial postbacks which will trigger the pageLoad event

Try replacing your code for 

$(document).ready(function scroll() {
  $('#<%=gvMapping.ClientID%>').Scrollable({ ScrollHeight: 370 });
});

with

function pageLoad() {
  $('#<%=gvMapping.ClientID%>').Scrollable({ ScrollHeight: 370 });
}

Upvotes: 0

Rab
Rab

Reputation: 35572

need to add this javascript, for when update panel is called

var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_endRequest(EndRequest);

    function EndRequest(sender, args) {
       $('#<%=gvMapping.ClientID%>').Scrollable({ ScrollHeight: 370 });
    }

or replace your document.ready with this

Sys.Application.add_load(initSomething);
function initSomething()
{
    $('#<%=gvMapping.ClientID%>').Scrollable({ ScrollHeight: 370 });
  // will execute on load plus on every UpdatePanel postback
}

Upvotes: 1

Related Questions