OnSelectedIndexChange only fires on second click when using custom page validation script

Posted by Kris P on Stack Overflow See other posts from Stack Overflow or by Kris P
Published on 2010-03-24T21:37:31Z Indexed on 2010/03/24 21:43 UTC
Read the original article Hit count: 643

Okay.. this is hard to explain, so here it goes.

I have an update panel which contains a number of controls. The update panel is triggered by the OnSelectedIndexChanged event of a dropdownlist called: ddlUSCitizenshipStatus. It works as expected when I selected a new item.

However, if I leave ddlUSCitizenshipStatus with the default value, and then click "submit" button on the page, the requiredfieldvalidators say there is an error on ddlUSCitizenshipStatus (which it should, as I never selected a value). So I then choose a value, the error message goes away on ddlUSCitizenshipStatus, however the updatepanel does not refresh. I've debugged this locally and the OnSelectedIndexChanged event for ddlUSCitizenshipStatus does not fire.

If I choose an item in the ddlUSCitizenshipStatus list a second time, the OnSelectedIndexChanged server event fires and the update panel refreshes and works as expected.

The issue is, I have to select an item in ddlUSCitizenshipStatus twice, after failed validation, before the updatepanel it's sitting in updates.

The submit button on the page looks like this:

<asp:LinkButton ID="btnSubmitPage1" runat="server" CssClass="continueButton" OnClick="btnSubmitPage1_Click" CausesValidation="true" OnClientClick="javascript: return ValidatePage();" />

If I remove my custom OnClientClick script, making the submit button look like this:

<asp:LinkButton ID="btnSubmitPage1" runat="server" CssClass="continueButton" OnClick="btnSubmitPage1_Click" CausesValidation="true" ValidationGroup="valGrpAdditionalInformation" />

The dropdownlist, update panel, and reguiredfieldvalidator all work as expected. However, I need to run that custom "ValidatePage()" script when the button is clicked.

Below is what my ValidatePage script looks like. I've been troubleshooting this for more hours than I can count.... I hope someone is able to help me. Please let me know if you can figure out why ddlUSCitizenshipStatus doesn't update the updatepanel until the second click after a failed validation.

function ValidatePage()
{
 var blnDoPostBack = true;

 if (typeof(Page_ClientValidate) == 'function' )
 {
  //Client side validation can occur, so lets do it.

  //Validate each validation group. 
  for( var i = 0; i < Page_ValidationSummaries.length; i++ )
   Page_ClientValidate( Page_ValidationSummaries[i].validationGroup.toString() );

  //Validate every validation control on the page.
  for (var i = 0; i < Page_Validators.length; i++)
   ValidatorValidate(Page_Validators[i]);

  //Figure out which validation groups have errors, store a list of these validation groups in an array.
  var aryValGrpsWithErrors = [];
  for( var i = 0; i < Page_Validators.length; i++ )
  {
   if( !Page_Validators[i].isvalid )
   {
    //This particular validator has thrown an error.
    //Remeber to not do a postback, as we were able to catch this validation error client side.
    blnDoPostBack = false;

    //If we haven't already registered the validation group this erroring validation control is a part of, do so now.
    if( aryValGrpsWithErrors.indexOf( Page_Validators[i].validationGroup.toString() ) == -1 )
     aryValGrpsWithErrors[aryValGrpsWithErrors.length++] = Page_Validators[i].validationGroup.toString();
   }
  }

  //Now display every validation summary that has !isvalid validation controls in it.
  for( var i = 0; i < Page_ValidationSummaries.length; i++ )
  {
   if( aryValGrpsWithErrors.indexOf( Page_ValidationSummaries[i].validationGroup.toString() ) != -1 )
   {
    Page_ValidationSummaries[i].style.display = "";
    document.getElementById( Page_ValidationSummaries[i].id.toString() + "Wrapper" ).style.display = "";
   }
   else
   {
    //The current validation summary does not have any error messages in it, so make sure it's hidden.
    Page_ValidationSummaries[i].style.display = "none";
    document.getElementById( Page_ValidationSummaries[i].id.toString() + "Wrapper" ).style.display = "none";
   }
  }
 }

 return blnDoPostBack;
}

© Stack Overflow or respective owner

Related posts about .NET

Related posts about updatepanel