CODEWITHSUNDEEP
jqueryasp.netwebformsaccordionajaxcontroltoolkit
midoriha_senpai
midoriha_senpai

Reputation: 187

Trouble accessing control using JQuery

How do I use JQuery on a Web Forms Master Page to access the value of an HTML text input control, which resides in an Ajax Control Toolkit accordion pane, which resides on a Web Forms Content Page?

I have a Master Page called Site.Master and the Content Page is goes into a placeholder called MainContent. A few visuals:

Site.Master:

<body>
  <form runat="server">
    <asp:ScriptManager runat="server">
      <scripts>...</scripts>
    </asp:ScriptManager>

    <div class="container body-content">
      <asp:ContentPlaceHolder ID="MainContent" runat="server">
    </asp:ContentPlaceHolder>
...

Here is my accordion (which lives in a content page (Default.aspx); the content page lives in the MainContent placeholder above):

<ajaxToolkit:Accordion 
    ID="Accordion1" 
    runat="server"
    HeaderCssClass="accordionHeader"
    HeaderSelectedCssClass="accordionHeaderSelected"
    max-height="300px"
    ContentCssClass="accordionContent"
    AutoSize="None"
    FadeTransitions="true"
    TransitionDuration="250"
    FramesPerSecond="40"
    EnableViewState="true"
    RequireOpenedPane="false"
    SuppressHeaderPostbacks="true">
    <Panes>
...
        <ajaxToolkit:AccordionPane 
            ID="AccordionPane1" 
            runat="server">
            <Header>
                Use a list
            </Header>
            <Content>
                <asp:UpdatePanel ID="UpdatePanel3" runat="server">
                    <ContentTemplate>
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="file-upload-container">
                                    <div class="input-group">
                                        ...
                                        <input 
                                            class="form-control"
                                            id="Text03" 
                                            placeholder="Browse or enter a file"
                                            runat="server"
                                            style="border: none"
                                            type="text" />
                                    </div>
                                    ...
                                </div>
                            </div>
                        </div>
                    </ContentTemplate>
                </asp:UpdatePanel>
            </Content>
        </ajaxToolkit:AccordionPane>
    </Panes>
</ajaxToolkit:Accordion>

Here is my JQuery that takes the text result of an HTML file input and copies it into the appropriate HTML text input (Text03, above):

<script type="text/javascript">
    $(document).ready(function () {
        $("#file-upload-button").change(function () {
            var fileName = $(this).val().split("\\").pop();
            var txtBoxID= <%# MainContent.FindControl("Text2").ClientID %>;
            $(txtBoxID).val(fileName);
        });
        $("#file-upload-button2").change(function () {
            var fileName = $(this).val().split("\\").pop();
            var txtBoxID= <%# MainContent.FindControl("Text03").ClientID %>;
            $(txtBoxID).val(fileName);
        });
        ...
    });
</script>

It works fine with only the "Text2" function. But when I try to add the "Text03" function, it gives me this error, with line 30 being highlighted:

Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

Exception Details: System.NullReferenceException: Object reference not set to an instance of an object.

Source Error:


Line 28:             $("#file-upload-button2").change(function () {
Line 29:                 var fileName = $(this).val().split("\\").pop();
Line 30:                 var txtBoxID= <%# MainContent.FindControl("Text03").ClientID %>;
Line 31:                 $(txtBoxID).val(fileName);
Line 32:             });

Is my control somehow not existing? Is there some kind of binding issue? I would appreciate any advice, I've been throwing stones at this for a whole day now. Thanks!

Upvotes: 0

Views: 50

Answers (1)

Paul Abbott
Paul Abbott

Reputation: 7211

You're not going to be able to refer to it directly in code because it is inside a ContentTemplate. Try adding it as an indicator class instead, like class="form-control text03" and then refer to it via $(".text03").val(fileName); instead.

Upvotes: 1

Related Questions