CODEWITHSUNDEEP
javascriptasp.netajaxvalidationupdatepanel
Shantanu Gupta
Shantanu Gupta

Reputation: 21198

How to make javascript work along with Ajax UpdatePanel

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.

Upvotes: 0

Views: 2074

Answers (2)

Emanuele Greco
Emanuele Greco

Reputation: 12731

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>

Upvotes: 1

BigMomma
BigMomma

Reputation: 338

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>

Upvotes: 0

Related Questions