I have a strange issue where I am using jQuery to "slidetoggle" a div when the user clicks on an edit image.

When the page is first loaded, the toggle display works fine. However if the user clicks on a button within the module that results in a AJAX call back (using Supports Partial Rending = yes), the image no longer works.

Here is a snippet of my code

   <!-- This is the image button -->

    <div class="EditImage CCcustomise" tabindex=100></div>
   

    <!-- This is the edit panel div that is displayed via the slidetoggle function -->
    <div class="EditPanel CCEditPanel" style="display:none">
        <br /><br />
        <div style="padding-left:50px">
            <asp:label id="lblDefaultFromCurrency" CssClass="EditWhiteLarge" runat="server" controlname="DDLFromCurrency" ></asp:label><br />
            <asp:DropDownList ID="ddlDefaultFromCurrency"  CssClass="EditDDL"  CausesValidation="false" runat="server"></asp:DropDownList>
            <br /><br />
            <asp:label id="lblDefaultToCurrency" CssClass="EditWhiteLarge" runat="server" controlname="DDLToCurrency" ></asp:label><br />
            <asp:DropDownList ID="ddlDefaultToCurrency"  CssClass="EditDDL"  CausesValidation="false" runat="server"></asp:DropDownList>
            <br /><br />
        </div>
        <div class="EditSeparator">&nbsp;</div>
        <div class="EditButtons" style="padding-left:50px">
            <asp:button id="cmdCCUpdate" resourcekey="cmdUpdate" runat="server" ></asp:button>&nbsp;&nbsp;
            <asp:button id="cmdCCCancel" resourcekey="cmdCancel" class="CCCancel" runat="server" ></asp:button>
        </div>
        <div class="EditSeparator">&nbsp;</div>
    </div>
 

<script type="text/javascript">jQuery.noConflict();</script>
<script type="text/javascript">

        jQuery(document).ready(function() {

        jQuery(".CCcustomise").click(function(event) {
            CCcustomise.click")
                    jQuery(".CCEditPanel").slideToggle("normal");
                });

        });
      
  </script>
 

CSS:

.EditPanel {
    background-color: #737173;
    color: White;
    overflow:hidden;
    font-size: 0.8em;
    width:100%;
    vertical-align:top;
}

.EditImage {
    height: 20px;
    cursor:pointer;
    background-image: url(images/edit-img.gif);
    background-color: Transparent;
    text-align:right ;
    vertical-align: top;
    margin: 4px 4px 4px 260px;
    width: 37px;
}

.EditSeparator
{
    background-image: url(images/SeparatorWhite.GIF);
    background-repeat: repeat-x;
    width:100%;
}

.EditButtons
{
    text-align:left;
    background-color: #737173;
    padding-bottom: 20px;
    margin-left:10px;
}   

.EditDDL
{
    width:160px;
}

 

As you can see I have placed an Alert in the CCcustomise.Click function (where the jQuery SligeToggle is actioned).

On the first load of the page, when clicking on the EditImage, the CCEditPanel is toggled correctly.

It is only AFTER an AJAX callback is actioned that this stops working. Clicking on the image simply does nothing.

It is not a problem with the SlideToggle function as the Alert in the click function is not shown.

Any ideas or suggestions as to what could be going wrong because I am tearing my hair out (what little is still left!) trying to fix this

Thanks for the reply Brian, what you say makes perfect sense.

However I have applied the code and after the AJAX call back I get the following javascript error:

Error: 'Sys.Webforms.PageRequestManager' is null or not an object

Any ideas why I should get this error?

Looks like that error was a typo on my part (though I could've sworn I copied that from a working example).  It needs to be Sys.Webforms (with a capital F) rather than Sys.Webforms.

Hope it helps,