Scroll

Display errors within the rows of a grid

Follow
Summary This article describes how to change the background color in the row of a grid, when there an error is displayed in askiadesign by using Javascript.
Applies to askiadesign
Written for Scriptwriters and survey authors
Keywords error; highlight; grid; table; script; javascript; display; design; askiadesign

Download the example qex file

This piece of JavaScript code changes the background color in the row of table, when there an error is displayed. This code only works with question tables formatted with as response-blocks.

How to use it:

Copy and paste the code into the label on the screen (make sure that the option "validation by alert" is selected in the internet settings, javascript tab).

<script language="javascript">
        ///<summary>
        ///Indicates the background color of the appropriate row of a question table when an error is displayed
        ///</summary>
        var ERROR_STYLE_BACKGROUND="#ff0000";
        ///<summary>
        ///Attach a behaviour when an error is displayed
        ///</summary>
        ///<param name="oErrorStackItem">ErrorStackItem which causes the error</param>
        ErrorStack.onError=function(oErrorStackItem){
                changeTableRowStyle(oErrorStackItem,false);
            }
        ///<summary>
        ///Attach a behaviour when the error disappear
        ///</summary>
        ///<param name="oErrorStackItem">ErrorStackItem which causes the event</param>
        ErrorStack.onClear=function(oErrorStackItem){
                changeTableRowStyle(oErrorStackItem,true);
            }
        ///<summary>
        ///Change the color of the appropriate row of a question table when an error is displayed
        ///</summary>
        ///<param name="oErrorStackItem">ErrorStackItem which provoke the event</param>
        ///<param name="isRestore">Roll back to the default style or apply the style of error</param>
        function changeTableRowStyle(oErrorStackItem,isRestore){
                var q=oErrorStackItem.question;
                if (!q.isClosed)return;
                var ctrl=q.childNodes[0].htmlControl;
                var pNode=ctrl.parentNode;
                while(pNode.tagName!="TR" && pNode.tagName!="BODY"){
                        if (pNode.tagName!="TR")pNode=pNode.parentNode;
                    }
                 if (pNode.tagName!="TR")return;
                 //Change the style of each TD
                 for (var i=0;i<pNode.childNodes.length;i++){
                        if (pNode.childNodes[i].tagName!="TD")continue;
                        //Keep the default style in memory to restore it after
                        if (!isRestore)pNode.childNodes[i].setAttribute("oldStyle",pNode.childNodes[i].style.background);
                        var strRestoreStyle=(!pNode.childNodes[i].getAttribute("oldStyle"))?"":pNode.childNodes[i].getAttribute("oldStyle");
                        pNode.childNodes[i].style.background=(!isRestore)?ERROR_STYLE_BACKGROUND:strRestoreStyle;
                    }         
            }
</script>
Have more questions? Submit a request

Comments

  • Avatar
    Steven De Backer

    This is very nice, but not usefull...

    You have to set the "validation by alert"-option in the Options > Internet Options Menu, which means that this option is valid for the whole questionnaire.
    Other questions that are not answered, then, get no error anymore (where it should say: "A response in expected for ...")

    That's why I tried to set this option only on the screen were my grid is, by right clicking on that screen > properties > javascript tab.
    Though, if I do so, then I get the error "ErrorStack is undefined"...

  • Avatar
    Jérôme Duparc

    Hi Steven,

    If you customize the javascript settings on one screen you need to set the Javascript Test Path in design to have the functionality working in design test mode .

    Best Regards

  • Avatar
    Steven De Backer

    Ah, ok.
    Because as well the default as screen-specific javascript test path was the same (it was empty), I thought it would refer to the default.

    Now I went to "Options > Settings" and I copied the "AskiaWeb Scripts Path" and pasted it in the Javascript Test Path on the specific screen.
    No it works :-)

    Many thanks for your ultra-quick reply!

  • Avatar
    Steven De Backer

    And to make sure that the highlighted row catches the eye, I added one line at the end of the for-loop which is really handy if you have long grids:

    if (!isRestore)pNode.childNodes[i].scrollIntoView(false);