OnSelectedIndexChange only fires on second click when using custom page validation script
- by Kris P
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;
}
