Question

I am working on a website. Basically, I have two scripts in my website. The first script is being executed well. However, the second script won’t work.

Basically, what I want to do is that if the user clicks on a button, certain elements on the page are hidden whilst others are shown. The elements in question are tables (NOT asp tables).

Here is the code.

<script type="text/javascript">
        function Open_Window()
        {
            window.open("DonationConfirmation.aspx")
        }
    </script>

    <script type="text/javascript">
        $(document).ready(function () {
            $("#PayPalButton1").click(function () {
                $("#PayPalTableButton").show();
                $("#DonationsTableButton").hide();
            });
            $("#GoogleButton1").click(function () {
                $("#PayPalTableButton").hide();
                $("#DonationsTableButton").show();
            });            
        });
    </script>

The first script, that is, function Open_Window() is working perfectly.

However, the second script, written in jQuery, won’t work.

Here is the code of the buttons (in the form of images) and the tables.

<asp:Image ID="PayPalButton1" runat="server" ImageUrl="Resources/Icons/PayPal.jpg" onmouseover="this.style.cursor = 'pointer';" Height="65px" Width="130px" />

<asp:Image ID="GoogleButton1" runat="server" ImageUrl="Resources/Icons/Google.jpg" onmouseover="this.style.cursor = 'pointer';" Height="65px" Width="130px" />

<table id="PayPalTableButton" runat="server" style="margin:auto; text-align:center; width:100%;">
                            <tr>
                                <td style="text-align:center; height:60px;">
                                    //Code
                                </td>
                            </tr>
                        </table>

                        <table id="DonationsTableButton" runat="server" style="margin:auto; text-align:center; width:100%;">
                            <tr>
                                <td style="text-align:center; height:60px;">
                                    //Code
                                </td>
                            </tr>
                        </table>

Answer 1

ASP.NET transforms the button ID’s into something else.

Set the ClientIDMode to Static on each button.