Anonymous, bureaucrat, administrator
7,528
edits
Changes
From All n One's bxp software Wixi
no edit summary
== Hiding Major Elements ==
Simply replace the blXXX word with true / false to show / hide the appropriate option. For more info you can also read this [[JavaScript_Show_/_Hide_elements]] == Showing / Hiding Questions == All questions are contained in <syntaxhighlight lang="html4strict"><table class="cssMaster_Table100PC" width="100%" id="tableid_X"></syntaxhighlight> Where X is a number corresponding to the question number. So showing and hiding is a case of showing / hiding this table. For this reason the libraries included on the page have functions to do this for you: <syntaxhighlight lang="javascript">function fn_Gen_Hide ( 'tableid_X' );function fn_Gen_Show ( 'tableid_X' );function fn_Gen_Toggle ( 'tableid_X' );</syntaxhighlight> It is possible to manually show and hide a table e.g. <syntaxhighlight lang="javascript">if (document.getElementById('tableid_X')) { document.getElementById('tableid_X').style.display = 'none'; }</syntaxhighlight> The first challenge you have is that after hiding and then reshowing the background colours in some browsers are lost, so they need to be recoloured individually to put the colour back in. There is a master, recolour all questions which is created automatically to save coding. <syntaxhighlight lang="javascript">fn_Gen_ReColour ( 'tableid_X', '' );function fn_RecolourAll ();</syntaxhighlight> The next challenge is that when you reshow large area types, such as Section Headers, Section Groups and Generic Areas, it appears in some browsers crushed to the left hand side. With these types you need to reset the width as well each time. <syntaxhighlight lang="javascript">if ( document.getElementById('tableid_X') ) { document.getElementById('tableid_X').width = "100%"; }</syntaxhighlight> fn_Gen_Hide is handy as it performs the resize and recolour saving a ton of extra coding lines. For more info you can also read this [[JavaScript_Show_/_Hide_elements]] == Section Group Showing / Hiding == When you create a section group and allocate some questions to it, JavaScript functionality is automatically created and added to the page. To find the function names:# Open the script# View Source# Ctrl and F to find the section group# Type in the title that appears on screen of the section group.# Scroll up 20 / 30 lines and you will find the Section Group created Show / Hide function. There should be three function* function fn_SectionGroup_strCDA_X_field_0_Y_Show(strObject)* function fn_SectionGroup_strCDA_X_field_0_Y_Hide(strObject)* function fn_SectionGroup_Toggle_strCDA_X_field_0_Y() X is the campaign / form id. Y is the question id of the Section Group. If you want to automatically close a Section Group when the script opens, find the line:fn_SectionGroup_strCDA_X_field_0_Y_Hide('imgToggle_strCDA_X_field_0_Y');in the Toggle function. Add this to the Main Menu > Form Management > Form - Primary Settings > Form - Advanced Settings > Choose your campaign > JavaScript onLoad > then go down the bottom to save it. == Extending Outcome Validation == It is possible to add mountains of validation to any outcome along with data manipulation. The first part is to open your outcome and then add into the Javascript section. If you want the page to NOT save, i.e. do not continue if this condition happens, then there is a global variable that needs to be changed. <syntaxhighlight lang="javascript">if ( document.getElementById('strCDA_X_field_Y_Z').value == '' ){ blError = 'True'; strError_Message = strError_Message + 'You must fill field blah!.';}</syntaxhighlight> Setting blError to the string 'True' means that a flag is set to prevent the save button from logging the record. The strError_Message is the collective message displayed to the user using a JavaScript alert. If you wanted to colour the question as part of the validation then you could use the fn_Gen_Recolour function. <syntaxhighlight lang="javascript">if ( document.getElementById('strCDA_X_field_Y_Z').value == '' ){ blError = 'True'; strError_Message = strError_Message + 'You must fill field blah!.'; fn_Gen_ReColour ( 'tableid_XX', '#ff0000' );}</syntaxhighlight> == Making fields Read Only== Setting an input field type to read only is a very simple line. <syntaxhighlight lang="javascript">document.getElementById('strCDA_X_field_Y_Z').readOnly = true;</syntaxhighlight> e.g. ''http://www.w3schools.com/jsref/prop_text_readonly.asp'' Making a Select type readOnly is a bit more complicated but we have an article for that too. For more info you can also read this [[JavaScript_Read_Only]]
== JavaScript Custom Scripts ==
Self Referencing campaigns
http://www.allnone.ie/wiki/index.php?title=JavaScript_Self-Referencing_Campaigns
[[Category:Module Specific:Form Management]]
[[Category:Topic:JavaScript]]
