Using the jquery layout within an ASP.NET UpdatePanel_问答_开发者

I have a ASP.NET site with nested Masterpages that utilize the .layout() function in jquery.layout.js.

All of the pages display beautifully resizing dynamically, rendering a resizer bar, and vertically scrolling areas. i.e. all of the layout functionality is working.

However I would like to eliminate the "flicker" I am getting on PostBack, so wanted to introduce an ASP:UpdatePanel.

I tried to surround everything within the form on the root Master page with an ASP:UpdatePanel, at which point all of my beautiful formating disappeared, and my pages look a mess. I seem to lose my resizer bar completely and my ui-layout-center now appears at the bottom of the screen.

My master page resembles the following:

<body id="body">
    <form id="BaseForm" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:UpdatePanel ID="updPanel" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
            <div class="ui-layout-north banner">
              etc etc
               '
               '
        </ContentTemplate>
    </asp:UpdatePanel>
    </form>
</body>

I am using the following script to format my pages:

            $(document).ready(function() {
            var myLayout;

            // myLayout = $('body').layout(); -- syntax with No Options
            myLayout = $('#body').layout({

                // enable showOverflow on north-pane so popups will overlap other panes
                north__showOverflowOnHover: false
                // some resizing/toggling settings
      , north__spacing_open: 0
  // no resizer-bar when open (zero height)
      , north__spacing_closed: 0  
// big resizer-bar when open (zero height)
      , south__spacing_open: 0
      , south__spacing_closed: 0
      , east__spacing_open: 0
      , east__spacing_closed: 0
      , south__minSize: 40
      , east__maxSize: 10
      , north__minSize: 80
      , west__minSize: 300
      , west__maxSize: 600
            });
        });

The styles are as follows:

    .ui-layout-pane { /* all 'panes' */
    background: #FFF;
    border: 0px solid #fff;
    padding: 10px;
    overflow: auto;
}
.ui-layout-north {*overflow:hidden;}
.ui-layout-south {padding:0px;}
.ui-layout-east {padding:0px;}
.ui-layout-west {
    margin-bottom:10px !important;
    margin-left:10px !important; 
    border-right: solid 10px transparent;
    padding-top:0px;
    padding-right:0px;
    padding-bottom:0px;
    background:#f2f2f3;
    border-left:1px solid red;
    border-bottom:1px solid red;
}
.ui-layout-center {
    padding: 0px !important; 
    margin-right:10px !important; 
    margin-bottom:10px !important;
    background:#f2f2f3;
    border-right:1px solid red;
    border-bottom:1px solid red;
}
.ui-layout-resizer { /* all 'resizer-bars' */
    background: #fff;
}
.ui-layout-resizer-west {
    background:#efef开发者_开发百科ef;
    border-bottom:1px solid red;
}

.ui-layout-toggler { /* all 'toggler-buttons' */
    background: #111;
}

I have tried various ways of registering my script - Registering this script using ClientScript.RegisterClientScriptInclude - using pageload() - using Sys.WebForms.PageRequestManager.getInstance().add_endRequest

I am sure that the script is running ok as I have added alert("Please work!"); and the alert displays. So something else is interferring with the rendering.

Has anyone any ideas?

A quick suggestion off the top of my head:

If your layout is being broken by the additional div tag that the update panel renders - can you make it just replace the top level div in your layout, instead of surrounding it?

<asp:UpdatePanel ID="updPanel" runat="server" 
      UpdateMode="Conditional" CssClass=""ui-layout-north banner">
        <ContentTemplate>
              etc etc
               '
               '
        </ContentTemplate>
    </asp:UpdatePanel>

Try registering your javascript file in your scriptmanager.

For example:

<asp:ScriptManager ID="SMgr" runat="server">
  <Scripts>
    <asp:ScriptReference path="MyScript.js" />
  </Scripts>
</asp:ScriptManager>

the fix is simple, you just have to update the "jquery.layout.js" defaults to allow for nested content.

first add a parent container, this can sit just inside the update panel, see:

<asp:UpdatePanel ID="UpdatePanel" runat="server">
  <ContentTemplate>
    <div id="ui-wrapper">

remember the closer:

    </div>
  </ContentTemplate>
</asp:UpdatePanel>

then update the script parameters (You can do this in the "myLayout" bit):

, north__paneSelector: "#ui-wrapper .ui-layout-north" 
, south__paneSelector: "#ui-wrapper .ui-layout-south"
, east__paneSelector: "#ui-wrapper .ui-layout-east"
, west__paneSelector: "#ui-wrapper .ui-layout-west"
, center__paneSelector: "#ui-wrapper .ui-layout-center"

Hope this helps

Chris