How to make javascript work along with Ajax UpdatePanel

Question

I am trying to add validation on my form. I am using AJAX controls in my form fields. When I remove the Update panel and AJAX control, my validation starts working, but when keeping both the things together, my validation is not working. How could I make them work together?

<script type="text/javascript">

    function Validate() {
        var QuestionTextArea = document.getElementById("ctl00_ctl00_cphBody_midbox_fvInsert_txtQuestion");

        varError = "";
        if (!IsTextBoxEmpty(QuestionTextArea, "\nQuestion Text Area  not be Empty.")) {
            alert(varError);
            document.getElementById("ctl00_ctl00_cphBody_midbox_fvInsert_txtQuestion").focus();
            return false;
        } return true;
    }
</script>



    <asp:UpdatePanel ID="UpdatePanel2" runat="server">
            <ContentTemplate>

             <asp:TextBox ID="txtQuestion" runat="server" MaxLength="1000" Columns="50" Rows="5" Style="width: 380px;
             float: none" Text='<%# Bind("Description") %>' TextMode="MultiLine" />
             <AjaxControl:TextBoxWatermarkExtender runat="server" TargetControlID="txtQuestion"
              WatermarkCssClass="water" WatermarkText="Type your Question Here.">
             </AjaxControl:TextBoxWatermarkExtender>


           </ContentTemplate>
        </asp:UpdatePanel>

When I removes ajax extender and Update Panel. My textbox gets validated and when using UpdatePanel. No javascript function created by me is called.

It would be simpler for us to answer your question when you post relevant parts of your source. — Marcel Korpel
– Marcel Korpel, Commented Aug 27, 2010 at 17:44

Community · Accepted Answer · 2017-05-23 12:22:40Z

1

An UpdatePanel completely replaces the contents of the update panel on an update.
This means that those events you subscribed to are no longer subscribed because there are new elements in that update panel.
Full answer here

In your Page or MasterPage, put the following script

<script type="text/javascript">
  Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);

  function EndRequestHandler(sender, args)
  {
    Validate(); 
  }   
</script>

edited May 23, 2017 at 12:22

CommunityBot

11 silver badge

answered Sep 28, 2011 at 11:13

Emanuele Greco

12.8k7 gold badges55 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

BigMomma · Accepted Answer · 2011-02-24 16:46:52Z

A well known issue with the first version of the ajax extensions was to break validators. ScottGu even blogged about the solution to add the folowing nodes under <system.web><controls><pages> in your web.config:

<tagMapping>
   <add tagType="System.Web.UI.WebControls.CompareValidator" 
        mappedTagType="Sample.Web.UI.Compatibility.CompareValidator, Validators, Version=1.0.0.0"/>
   <add tagType="System.Web.UI.WebControls.CustomValidator" 
        mappedTagType="Sample.Web.UI.Compatibility.CustomValidator, Validators, Version=1.0.0.0"/>
   <add tagType="System.Web.UI.WebControls.RangeValidator" 
        mappedTagType="Sample.Web.UI.Compatibility.RangeValidator, Validators, Version=1.0.0.0"/>
   <add tagType="System.Web.UI.WebControls.RegularExpressionValidator" 
        mappedTagType="Sample.Web.UI.Compatibility.RegularExpressionValidator, Validators, Version=1.0.0.0"/>
   <add tagType="System.Web.UI.WebControls.RequiredFieldValidator" 
        mappedTagType="Sample.Web.UI.Compatibility.RequiredFieldValidator, Validators, Version=1.0.0.0"/>
   <add tagType="System.Web.UI.WebControls.ValidationSummary"
        mappedTagType="Sample.Web.UI.Compatibility.ValidationSummary, Validators, Version=1.0.0.0"/>
</tagMapping>

Collectives™ on Stack Overflow

How to make javascript work along with Ajax UpdatePanel

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related