Question

Within an asp.net webform I have some jquery that controls the positioning of elements on the page. Since this is a webform and some of these controls talk to the server to get jquery to work I have the controls nested in an AJAX UpdatePanel to prevent postbacks from resetting my controls.

aspx:

<asp:UpdatePanel ID="searchupdatePanel" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <div id="searchholder" >
            <div id="searchoptions">
                <a href="#" id="btnClose">Close</a> <a href="#" id="btnAdvanceSearch">Advanced Search</a>
                <br />
                <a href="#" id="btnFilters">Filters</a>
            </div>
            <div id="search" class="searchcontainer">
                <asp:TextBox ID="tbsearchterm" CssClass="watermark" runat="server" OnTextChanged="tbsearchterm_TextChanged" />
                <div class="buttons">
                    <asp:LinkButton runat="server" Text="Search" class="button search-big" ID="btnSearch" OnClick="btnSearch_Click" />
                    <asp:LinkButton runat="server" Text="Fx" class="button left big" ID="btnOperators" />
                    <asp:LinkButton runat="server" Text="Save" class="button right big" ID="btnSave" />
                </div>
            </div>
            <div id="divAdvSearch">
            </div>
        </div>
    </ContentTemplate>
</asp:UpdatePanel>

<div id="divBody">
    <asp:UpdatePanel runat="server" UpdateMode="Always">
        <ContentTemplate>
            <div id="divSearchResults" visible="true" runat="server">
                <uc:SearchResultsControl ID="SearchResultsControl" runat="server"></uc:SearchResultsControl>
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>

When the search button is clicked I modify the css class for the search control to reposition my search div layer which is the update panel “searchudpatepanel”

searchcontrol.js

$(function () {
    $("#searchupdatePanel").addClass("searchmenubar");
    $("#btnClose").hide();
});

$(function () {
    $("#btnSearch").click(function () {
        $(".searchmenubar").animate({ "margin-top": "5px" }, "fast");
        $("#btnAdvanceSearch").show();
        $("#btnFilters").show();
        $("#btnClose").hide();
        $("#divAdvSearch").hide();
        alert("search");
    });
});

The button click also calls serverside code to retrieve and populate the results within a user control called SearchResultsControl ( second update panel)

Where I am confused is when the searchResult Control is loaded with the results all references to the jquery classes are lost. As a result every div element that is hidden or button click that is called ceases to work. Working through this in debug I can see when the user control is called the Page_Load for the default.aspx file is invoked as second time. I assume this partial load is dropping reference to the js files I just don’t know how to correct this.

I tried a test within the page load using IsStartupScriptRegistered to see if the js was getting called

string csname = "PopupScript";
Type cstype = this.GetType();

ClientScriptManager cs = Page.ClientScript;

if (!cs.IsStartupScriptRegistered(cstype, csname))
{
    StringBuilder cstext1 = new StringBuilder();
    cstext1.Append("<script type=text/javascript> alert('Hello World!') </");
    cstext1.Append("script>");
    cs.RegisterStartupScript(cstype, csname, cstext1.ToString());
}

Here on the initialization of the page I would see the pop up occur however when the UserControl was loaded I would pass through this a second time in the page load but the alert never displayed( I assume this is due to a partial load so the browser thinks the script is already registered).

The only other thing I can think of is I am overriding the rendering of the UserControl being loaded as it loads a custom result set.

protected override void Render(HtmlTextWriter htw)
{
    if (IsPostBack)
    {
        QueryResponse qr = iu.GetSearchResults(SearchTerm);
        int num = qr.TotalMatchesReturned;

        SearchData sd = new SearchData();
        htw.Write("<table style='width: 100%; height:100%'><tr ><td style='width: 50%'>");
        htw.Write("<div id='divResultDetail' runat=server >");
        htw.Write("<script type='text/javascript' src='../js/paging.js'></script><div id='pageNavPosition'></div><table id='results'>");

        for (int i = 0; i < num; i++)
        {
            ...edited for brevity.

Any suggestions or guidance as to why I am losing reference to the jquery functions? I am not using master pages so I haven’t used the ASP ScriptManager.

This all worked fine prior to using UpdatePanels. I define “fine” as: the postback was reloading/registering the js files each time, so they were being reset (which was okay). However, now with some other changes needed I need to look at leveraging UpdatePanels.

Thanks for any suggestions or ideas.

Answer 1

You can use the live or delegate jQuery methods to get your handlers to be bound to any elements added to the page.

Alternatively, if you need some setup to always happen after every partial postback in addition to original page load, you can put it in a pageLoad method instead of document.ready. ASP.NET calls this on page load, and after every partial postback.

function pageLoad()
{
    // Setup code here
}

Check this article for more:
http://encosia.com/document-ready-and-pageload-are-not-the-same/