Forums (Obsolete)


Member	Darren - 3/25/2012 10:08:09 PM BizForm error handling We have a fairly long bizform on our website. As a result when we have an error high up on the form it shows the error message however this can be out of the viewport which can lead to user frustration. IS there a way to automatically scroll back to the top error?

Kentico Developer

kentico_helenag - 3/26/2012 1:58:33 AM

RE:BizForm error handling

Hello,

you would need to ensure this functionality by your custom code. Please clone the BizForm and then make some custom changes.

You can for example register jQuery in the SetupControl method like:

...
    protected void SetupControl()
    {
        if (this.StopProcessing)
        {
            // Do nothing
            viewBiz.StopProcessing = true;
        }
        else
        {
            ScriptHelper.RegisterJQuery(Page);
            
            // Set BizForm properties
.....

and then:

    void viewBiz_OnValidationFailed()
    {

        Label errorLabel = ((Label)(viewBiz.FindControl("lblErrorLabel")));

        if (viewBiz.FormName == "BizFormTest")
        {

            errorLabel.Visible = false; 

            StringBuilder sb = new StringBuilder();
            sb.Append("var arr = jQuery('.EditingFormErrorLabel');\n");
            sb.Append("if ((arr != null)&&(arr.length > 0)) {\n");
            sb.Append("var error = arr[0];\n");
            sb.Append("if (error != null) {\n");
            sb.Append("try{\n");
            sb.Append("var offset = jQuery(error).offset();\n");
            sb.Append("if (theForm.elements['__SCROLLPOSITIONY']) {\n");
            sb.Append("theForm.elements['__SCROLLPOSITIONX'].value = offset.left;\n");
            sb.Append("theForm.elements['__SCROLLPOSITIONY'].value = offset.top-50;\n");
            sb.Append("}\n");
            sb.Append("if (theForm.__SCROLLPOSITIONY) {\n");
            sb.Append("theForm.__SCROLLPOSITIONX.value = offset.left;\n");
            sb.Append("theForm.__SCROLLPOSITIONY.value = offset.top-50;\n");
            sb.Append("}\n");
            sb.Append("} catch (e) {}\n");
            sb.Append("}\n");
            sb.Append("}\n");

            ScriptHelper.RegisterStartupScript(Page, typeof(string), "errorFocus", ScriptHelper.GetScript(sb.ToString()));
        }
    }

To explain, the code here sets the coordinates so that the webresource script (added by .NET) focuses on the first validation error message, even if there are more of them... The fixed subtracted value in code is 50 pixels. You may alter that according to your needs, e.g. get the previous element from DOM and subtract it's height.

If you use an update panel, you can use a code like:

    void viewBiz_OnValidationFailed()
    {
        Label errorLabel = ((Label)(viewBiz.FindControl("lblErrorLabel")));

        if (viewBiz.FormName == "ContactUs")
        {
           // errorLabel.Visible = false;

            StringBuilder sb = new StringBuilder();
            sb.Append("var arr = jQuery('.EditingFormErrorLabel');\n");
            sb.Append("if ((arr != null)&&(arr.length > 0)) {\n");
            sb.Append("var error = arr[0];\n");
            sb.Append("if (error != null) {\n");
            sb.Append("try{\n");
            sb.Append("var offset = jQuery(error).offset();\n");
            sb.Append("if (theForm.elements['__SCROLLPOSITIONY']) {\n");
            sb.Append("theForm.elements['__SCROLLPOSITIONX'].value = offset.left;\n");
            sb.Append("theForm.elements['__SCROLLPOSITIONY'].value = offset.top - 50;\n");
            sb.Append("}\n");
            sb.Append("if (theForm.__SCROLLPOSITIONY) {\n");
            sb.Append("theForm.__SCROLLPOSITIONX.value = offset.left;\n");
            sb.Append("theForm.__SCROLLPOSITIONY.value = offset.top - 50;\n");
            sb.Append("}\n");

            if (RequestHelper.IsAsyncPostback())
            {
                    sb.Append("setTimeout(\"jQuery(document).scrollTop(offset.top - 50);\", 250);");
            }

            sb.Append("} catch (e) {}\n");
            sb.Append("}\n");
            sb.Append("}\n");
            ScriptHelper.RegisterStartupScript(Page, typeof(string), "errorFocus", ScriptHelper.GetScript(sb.ToString()));
        }

    }

Best regards,
Helena Grulichova


Member	Darren - 3/26/2012 5:23:06 PM RE:BizForm error handling Thanks for the great response Helena - I implemented your suggestion and I cloned the web part all ok and added the extra code. The form appears ok and the error messages still appear but I'm not seeing the jquery getting actioned - am I missing a step here? (aspx code is out of my area of expertise).

Kentico Developer

kentico_helenag - 3/27/2012 2:11:01 AM

RE:BizForm error handling

Hello,

it was just an example which worked on one of our installation. This functionality is not supported by default and you need to develop it by your custom code. If you are not friendly with coding, please consider our Consulting services or one of our Solution partners. If you have have any specific questions regarding use of the API or Kentico controls, you can contact support as usual.

Best regards,
Helena Grulichova