问题描述:

From the jquery UI you can now apply .button() to an anchor, a button, a submit button etc.

I've got a simple asp.net button that looks like this:

<asp:Button ID="btnFindSearch" runat="server" Text="Search"

onclick="btnFindSearch_Click" />

It is however inside of an updatepanel like so:

 <div id="dialog" title="Select Address">

<asp:UpdatePanel ID="upNewUpdatePanel" UpdateMode="Conditional" ChildrenAsTriggers="true" runat="server">

<ContentTemplate>

<div id="search" style="width:100%; text-align:center;">

<asp:TextBox ID="txtFindSearch" runat="server"></asp:TextBox>

<asp:Button ID="btnFindSearch" runat="server" Text="Search"

onclick="btnFindSearch_Click" />

</div>

</ContentTemplate>

</asp:UpdatePanel>

</div>

In my jquery I can do:

$('#btnFindSearch').button();

And it gives me the jquery ui look of a button...awesome I thought. But the minute I click my button the button returns to the plain old looking asp.net server button. Its as if the .button() is no longer applied.

Is this due to the fact that it is inside an UpdatePanel or what could be causing this???

网友答案:

This can be done with the jQuery livequery plugin.

It can be used to define a function for all the elements what are currently in the dom and those which wud be added later.. that would solve most of your problems.

Here is an example usage:

$("#btnFindSearch").livequery(function(){$(this).button();})
网友答案:

This is because on the button click a server PostBack occurs and the original DOM elements are replaced.

UpdatePanel is not particularly clever. It just replaces all of the child content with the new HTML sent from the server (think innerHTML = severStuff). The newly created DOM elements are thus "not decorated". The .button() magic needs to be run again on the new DOM elements.


Barring a better way to handle this, of which I do not know, here is a helpful class for inline script blocks that automatically handles different scenarios. It's sort of a kludge and "hackish", but it does work rather well (we use a modified version).

Usage might look like (this must be inside the [updated] UpdatePanel for it work on partial PostBacks):

<UpdatePanel ...>
  <OtherControls ...>
  // Put other controls first, because this will be rendered in-order
  // (which should usually be last!) in a normal/full PostBack.
  // It will use the appropriate "RegisterScript" for partial PostBacks.
  <InlineScript runat="server">
    <script>
        // Add .button() stuff here - note that InlineScript is last
        // so the previous (control) DOM nodes exist already in current
        // browser implementations, even if there is no "DOM loaded" per-se...
        // -- or --
        jQuery(function ($) {
            // Add .button() stuff here; using $.ready here might (??)
            // actually cause the browser to update the UI first...
            // ...but it will guarantee the DOM is completely loaded.
        })
    </script>
  </InlineScript>
</UpdatePanel>
相关阅读:
Top