Unable to get property 'click' of undefined or null reference

Question

0.00/5 (No votes)

See more:

Using the answer in my previous question, "ModalPopupExtender: Popup Closes After TextChanged Method of Textbox FIres", I was able to get the popup to work as intended as a stand-alone form including the addition of a third button to the "modal popup":

<asp:Button ID="btnReset" runat="server" Text="Standard" OnClick="btnReset_Click"/>

However when I add the relative code an existing website, I receive the following error:

"Error: Unable to get property 'click' of undefined or null reference".

The website uses a master page and the modal popup panel is within two panels, all of which is surrounded by an update panel on a tab panel. What would prevent execution of the onclick code of the new button? Is there another method to executing the code?

XML

I only have javascript for the Ok and Cancel button of the popup (none for the Reset):

    <script type="text/javascript">
        function onOk() {
            document.getElementById('btnOk').click();
        }

        function onCancel() {
            document.getElementById('btnCancelRates').click();

        }
    </script>

How would I call the onclick code for the new button?

Posted 12-Jul-13 5:54am

FabeCode

Updated 12-Jul-13 6:27am

v2

Add a Solution

Comments

ZurdoDev 12-Jul-13 11:58am

You need to post the relevant JavaScript code. The error is saying that the ID of what you are trying to reference is not valid. Being that it is now on a master page just view source and you'll see that extra information gets added to its ID so that .Net makes sure it is unique.

FabeCode 12-Jul-13 12:10pm

I only have javascript for the Ok and Cancel new button of the popup (none for the Reset):

<script type="text/javascript">
function onOk() {
document.getElementById('btnOk').click();
}

function onCancel() {
document.getElementById('btnCancelRates').click();

}
</script>

I would I call the onclick code for the new button?

ZurdoDev 12-Jul-13 12:17pm

OK. So, put a breakpoint and find out what is happening. Also, use the improve question link and post this code as part of your question. It will be easier to follow.

FabeCode 12-Jul-13 13:02pm

Where should I put a breakpoint?

ZurdoDev 12-Jul-13 13:10pm

I'm confused. You have 2 lines of code. One for clicking OK and one for clicking Cancel. Which button are you clicking?

FabeCode 12-Jul-13 13:31pm

I am clicking on a third button (btnReset) which I added. So there is a Ok, Cancel and Reset button. The first two have corresponding java function which is called via the ModalPopupExtender. How do I call the code behind for the third button?

ZurdoDev 12-Jul-13 13:54pm

Again, I am confused as to why you are. You have code for 2 buttons and now you don't know how to add the code for a 3rd button?

FabeCode 12-Jul-13 15:30pm

As a default, the ModalPopup has an two events, OnOkScript and OnCancelScript that call the relative javascript functions. I have added another button which I want to use to reset objects to a previously stored value. E.G. The user starts to make changes but then decides to use the "standard" values.

So, when I press the "Standard" button, the objects are set to the default values. However, when I press that button, I get the error: "Error: Unable to get property 'click' of undefined or null reference". So the newly added button's OnClick event is not accessible.

ZurdoDev 12-Jul-13 15:32pm

But you haven't posted the code for your Reset button. The markup you posted shows that you have server side code but I think you just want JS code instead.

FabeCode 12-Jul-13 15:36pm

<asp:Button ID="btnReset" runat="server" Text="Standard" OnClick="btnReset_Click"/>

ZurdoDev 12-Jul-13 15:48pm

OnClick is a server side event for an asp button. So, it should post back. Is that really what you want?

FabeCode 12-Jul-13 15:53pm

Since I just need to reset the objects, I guess not (Not Sure, new to ASP). I need to replace text box values with those previously entered and stored in a datatable.

ZurdoDev 12-Jul-13 15:55pm

But the error you started this post out with suggests that you already have JavaScript code and that is what is erroring. Can you post that code?

FabeCode 12-Jul-13 16:21pm

The javascript code is posted. There are only two functions defined. The ModalPopup has three buttons, but only two are refrenced in the extender:

<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="btnCustCharges"
PopupControlID="pnlCustCharge" BackgroundCssClass="modalBackground" DropShadow="true"
EnableViewState="true" OkControlID="OkButton" OnOkScript="onOk()" CancelControlID="CancelButton"
önCancelScript="onCancel()"/>

FabeCode 12-Jul-13 16:27pm

Here's the panel code:
<asp:Panel ID="pnlCustCharge" Width="275px" runat="server" Style="display: none">
<table style="margin-left: 75px">
<tr>
<td>
<asp:Button ID="OkButton" runat="server" Text="OK" Style="display: none"/>
<asp:Button ID="btnOk" runat="server" Text="OK"
OnClick="btnOk_Click"/>
</td>
<td style="width: 10px">
</td>
<td>
<asp:Button ID="CancelButton" runat="server" Text="Reset" />
<asp:Button ID="btnCancelRates" runat="server" Text="Cancel"
Style="display: none" OnClick="btnCancelRates_Click" />
</td>
<td style="width: 10px">
</td>
<td>
<asp:Button ID="ResetButton" runat="server" Text="Standard" />
<asp:Button ID="btnReset" runat="server" Text="Standard"
Style="display: none" OnClick="btnReset_Click" />
</td>
</tr>
</table>

FabeCode 12-Jul-13 16:30pm

Correction the OnClick is on the ID="ResetButton" button. When pressed the error occurs.

1 solution

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

FabeCode · Accepted Answer · 2013-07-12T11:20:00

Found the solution. I removed the JS for the OnCancel. removed the CancelControlID and OnCancelScroipt from the ModalPopupExtendedupdates, and used OnClick events for Reset and Cancel buttons. The Ok button uses the JS,

XML

<asp:Panel ID="pnlCustCharge" Width="275px" runat="server" Style="display: none">
    <table style="margin-left: 75px">
        <tr>
            <td>
                <asp:Button ID="OkButton" runat="server" Text="OK" Style="display: none"/>
                <asp:Button ID="btnOk" runat="server" Text="OK"
                     OnClick="btnOk_Click"/>
            </td>
            <td style="width: 10px">
            </td>
            <td>
                <asp:Button ID="CancelButton" runat="server" Text="Reset"
                OnClick="btnCancelRates_Click" />
            </td>
            <td style="width: 10px">
            </td>
            <td>
                <asp:Button ID="ResetButton" runat="server" Text="Standard"
                    OnClick="btnReset_Click" />
            </td>
        </tr>
    </table>
</asp:Panel>
<br />
<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="btnCustCharges"
    PopupControlID="pnlCustCharge" BackgroundCssClass="modalBackground" DropShadow="true"
    EnableViewState="true" OkControlID="OkButton" OnOkScript="onOk()"
    />

Unable to get property 'click' of undefined or null reference

1 solution

Solution 1

Add your solution here

Preview 0

Unable to get property 'click' of undefined or null reference

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us