Javascript getElementById gives error 'null' is null or not an object

Question

I want to call a c# function using javascript, so I added an invisible asp.net button to my Default.aspx, and now I am tring to call it inside javascript so that it will trigger the c# function, but it gives 'null' is null or not an object. I tried to move my javascript part to many places to solve the problem but it didn't work.

<asp:Content ID="HeaderContent" runat="server"
ContentPlaceHolderID="HeadContent">
</asp:Content>

    <asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
        <h2>        WELCOME     </h2>
     <div style="display: none;">
            <asp:Button ID="button1" runat="server"
             OnClick="btn_SearchLibrary_Click" />
     </div>

        <script type="text/javascript">
            function displaymessage() {
                var button = document.getElementById('button1');
                button.click();
            }
        </script>


<!-- Some codes in here, below there is a gridview templatefield -->



    <asp:TemplateField HeaderText="BookName"
    SortExpression="BookName" ItemStyle-Width="150px">
                                <ItemTemplate>
                                    <asp:HyperLink ID="HyperLink1"
    runat="server" Text='<%# Bind("BookName") %>'
    NavigateUrl="javascript:displaymessage()"></asp:HyperLink>
                                </ItemTemplate>
                            </asp:TemplateField>

Are you sure the rendered page uses the literal `id` format instead of the old `ctl00` prefix format? — Grant Thomas, Mar 12 '12 at 14:29
I am not sure, but I am using .NET 4.0, so possibly it will not be an old format, am I right — HOY, Mar 12 '12 at 14:30
JavaScript is on the client. c# is on the server. You cannot "call" a c# function from JavaScript - they're on two different machines! — Diodeus - James MacFarlane, Mar 12 '12 at 14:30
Diodeus, please see the second answer that has 18 up votes in this topic, that is what I am tring to do http://stackoverflow.com/questions/3713/call-asp-net-function-from-javascript, I am calling asp.net function with javascript, asp.net function will be firing the c# function — HOY, Mar 12 '12 at 14:32
assuming the javascript error is client-side error in the browser, it will be better to post the markup returned to the browser as well. — yas, Mar 12 '12 at 14:37
The reasoning is correct, my guess is that .net is adding a subfix to the generated id attibute generating something like ` — lmcanavals, Mar 12 '12 at 14:39

score 2 · Answer 1 · answered Mar 12 '12 at 14:35

You should solve this with an Ajax implementation. This way you can call a webservice wich will contain some business logic and sends a response back to the client.

Create a web service using eq. (WCF, ServiceStack)
Create a button
Subscribe to the click event of the button with jQuery and call your webservice.
In the success callback function, do some client side logic like updating your list of books.

Best regards,

Rob

score 2 · Accepted Answer · answered Mar 12 '12 at 14:37

2

try this

     document.getElementById('<%=button1.ClientID%>')

answered Mar 12 '12 at 14:37

DotNetUser

6,494
1
25
27

score 1 · Answer 3 · answered Mar 12 '12 at 14:41

While I would highly suggest pursuing an ajax/WCF solution, the problem with your current approach is most likely the ID of the button. ASP controls are usually not rendered with the ID you specify in markup, but prefixed by "ct100" or "container$id" or "container_id", depending on the version of ASP. I would suggest you view source on your page to see the rendered ID and make sure that you are passing that to your document.getElementById.

Javascript getElementById gives error 'null' is null or not an object

3 Answers3