How To Restore State When Dynamically Creating Script Objects (195189)

SUMMARY

In some scenarios you may want to dynamically create script form objects without using Design-Time Controls (DTC). This article provides an example of how to dynamically create checkbox script form objects (from the Visual InterDev 6.0 Script Library) without using the DTCs. It also shows how to properly use the "_restoreState" hidden function in the script library in order to restore the state of the script form objects and synchronize with the Request.Form variables when the page is submitted.

MORE INFORMATION

The following example demonstrates how to dynamically create checkbox script form objects and restore the state of the checkboxes after the page has been submitted:

Create a new Active Server Pages (ASP) page with the scripting language set to "javascript".
Add a PageObject DTC making sure to enable the Scripting Object Model.
Add a Button DTC.
Right-click the PageObject, then click Properties, then go to the Properties tab. Add a property called NumFields.

Paste the following code immediately after the <BODY> tag:

      <SCRIPT LANGUAGE=javascript RUNAT=Server>
      var arrChk = null;
      var fDebug = 1;
      </SCRIPT>
      <%
      for (var nIndex = 0; nIndex < thisPage.getNumFields(); nIndex++)
      {
          //cycle through the arrChk array of check box script object
          //and call the display method to output to page
          arrChk[nIndex].display();
          Response.Write('<br>');
      }
      if (fDebug)
      {
          for (var nIndex = 0; nIndex < thisPage.getNumFields(); nIndex++)
          {
              Response.Write('Value[' + nIndex + '] = ' +
                                  arrChk[nIndex].getChecked() + '<br>');
           }
      }
      %>

Paste the following code immediately before the </BODY> tag:

      <!--#INCLUDE FILE="_ScriptLibrary/CheckBox.ASP"-->
      <SCRIPT ID=serverEventHandlersJS LANGUAGE=javascript RUNAT=Server>

      function thisPage_onenter()
      {
          var intNumCheck = 5;

          //1=debug mode
          //2=no debug
          fDebug = 1;

          if (thisPage.firstEntered == true)
          {
         //specifying the number of check boxes to create
         //then creating them
              thisPage.setNumFields(intNumCheck);
              CreateCheckboxes(false);
          }
      }

      function _ChkInit(nIndex)
      {
          arrChk[nIndex].setCaption('DynChk' + nIndex);
      }

      function CreateCheckboxes(fRestore)
      {
          var nChk = thisPage.getNumFields();
          arrChk = new Array();

          //create the check box script objects and throw them
          //into arrChk array to be used later
          for (var nIndex = 0; nIndex < nChk; nIndex++)
          {
              arrChk[nIndex] = CreateCheckbox('DynChk' +
                nIndex, '_ChkInit(' + nIndex + ')', null);

              //if the form was submitted we need to restore the
              //state of the check boxes
              if (fRestore)
                  arrChk[nIndex]._restoreState();
          }
      }

      function Button1_onclick()
      {
          CreateCheckboxes(true);
      }

      </SCRIPT>