Question

I have a page with an editable field and several required fields. The problem is that whenever I click on a button to activate the editable field for making changes, or when applying/cancelling those changes, it causes my Javascript to fire again which appends yet another “required field” indicator to my required fields. I want the indicator to ONLY be appended on the first load, and not to be affected by buttons clicked on the interface. How can I accomplish this? I believe I just need the right condition for my Javascript “if” statement, but have no idea what that might be. I’ve researched it and come up dry.

Here’s my markup. You can safely ignore entire UpdatePanel region. The only thing you need to know, is that the buttons within it are causing the Javascript to run again for each click.

Thanks! 😉

<asp:Content runat="server" ContentPlaceHolderID="HeadContent">
    <script type="text/javascript">
        function contentPageLoad() {
            // Add "Required Field" Indicators
            if (/*NEED CONDITION*/) {
                $("h4.required").append(" <span class=\"r\">*</span>");
            }
        }
    </script>
</asp:Content>
<asp:Content runat="server" ContentPlaceHolderID="MainContent">
    <!-- This is an updatable textfield. -->
    <!-- PROBLEM!: LinkButtons here cause the double firing of the javascript above. -->
    <!-- Remember that "ChildrenAsTriggers" defaults to True for UpdatePanel. -->
    <asp:UpdatePanel ID="RequestorNameUpdatePanel" runat="server">
    <ContentTemplate>
    <asp:MultiView ID="RequestorName_mv" runat="server" ActiveViewIndex="0">
        <asp:View ID="RequestorNameNormalView" runat="server">
            <div class="rightCol">
                <asp:LinkButton ID="editRequestorName" runat="server" />
                <h6 class="inlineH">Requestor's Name: <asp:Label ID="RequestorName_lbl" runat="server"></asp:Label></h6>
            </div>
        </asp:View>
        <asp:View ID="RequestorNameEditView" runat="server">
            <div class="rightCol">
                <asp:LinkButton ID="updateRequestorName" runat="server" />
                <asp:LinkButton ID="cancelRequestorName" runat="server" />
                <h6 class="inlineH">Requestor's Name: </h6>
                <asp:DropDownList ID="RequestorName_ddl" runat="server" ViewStateMode="Inherit" AutoPostBack="False" ></asp:DropDownList>
                <asp:TextBox ID="RequestorName_cb" runat="server" EnableViewState="True" AutoPostBack="False"></asp:TextBox>
                <button id="RequestorName_btn" type="button" class="toggle ui-button"></button>
            </div>
        </asp:View>
    </asp:MultiView>
    </ContentTemplate>
    </asp:UpdatePanel>

    <!-- "REQUIRED" indicator from javascript appended here -->
    <h4 class="required">First Name</h4>
    <asp:TextBox ID="tbFirstName" runat="server"></asp:TextBox>
</asp:Content>

Answer 1

Put this code on document ready.

$(document).ready(function() {
  $("h4.required").append(" <span class=\"r\">*</span>");
});

Then it will not be called when your update panels load.