Focal Point
[SOLVED] Create Drop Down List Box With IBI's xmlhttp Support Script Library.

This topic can be found at:
https://forums.informationbuilders.com/eve/forums/a/tpc/f/7971057331/m/1557042116

October 17, 2011, 05:38 PM
David Briars
[SOLVED] Create Drop Down List Box With IBI's xmlhttp Support Script Library.
My goal is to create a Product Code drop down list box, using sample GGSALES data.

For example:
<select id="ProdCodes" name="ProdCodes">
  <option value="C141">C141</option>
  <option value="C142">C142</option>
</select>


I am creating my GGSALES XML data with the TABLE command (getprods.fex):
APP PREPENDPATH IBISAMP
TABLE FILE GGSALES
SUM PCD
BY  PCD
ON TABLE PCHOLD FORMAT XML
END


And rendering my page, with -HTMLFORM BEGIN (showprods.fex):
-DEFAULTH &IBIMR_domain='MR Domain Name Not Available'
-TYPE Current MR Domain Name is: &IBIMR_domain
-SET &DOMAIN_NAME = &IBIMR_domain;
-SET &FOLDER_NAME = '#foldername';
-* Create a random number.
-SET &RANDOM = RDUNIF(D5) * RDUNIF(D5) * 10000;
-*
-HTMLFORM BEGIN
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
  <title> My Report </title>
  <meta http-equiv="CACHE-CONTROL" content="NO-CACHE">
  <SCRIPT id=IBI_OptionsScript type=text/javascript>
      var ibiOptions = new Array("ibihttpxml");
  </script>
  <script type="text/javascript" language="Javascript" src="/ibi_html/javaassist/ibi/html/js/ibigbl.js"></SCRIPT>
  <script type="text/javascript">
   <!--
      function funGetData() {
          var ibihttp = new ibihttpxml("/ibi_apps/WFServlet", null);
          ibihttp.openFromForm(document.forms.My_Form);
          // alert(ibihttp.xmlhttp.responseText);
          var PrdCds = ibihttp.selectSingleNode("//fxf/report/table/tr/td");
          document.getElementById("ProdCodes").options.length = 0; 
          document.getElementById("ProdCodes").options[0] = new Option(ibihttp.getNodeText(PrdCds), ibihttp.getNodeText(PrdCds));
      }

	  function subform() {
	   var myindex  = document.My_Form.ProdCodes.selectedIndex;
       var myvalue  = document.My_Form.ProdCodes.options[myindex].value;
       alert('Selected Product Code: ' + myvalue);
	  } 
   //-->
  </script>
 </head>

 <body onload="">
  <form method="post" name="My_Form">
   <table>
    <tr>
     <td>Product Codes</td>
	 <td>
	   <select id="ProdCodes" name="ProdCodes">
        
      </select>
	 </td>
    </tr>
    <tr>
     <td><input type=button value="Get Product Codes" onclick="funGetData()"></td>
     <td></td>
    </tr>
	<tr>
     <td><input type=button value="Submit Form" onclick="subform()"></td>
     <td></td>
    </tr>
   </table>
-* Variables passed from web page to WebFOCUS servlet.
-*   -WebFOCUS related variables.
-*
   <input type="hidden" name="IBIMR_domain" value="!IBI.AMP.DOMAIN_NAME;">
   <input type="hidden" name="IBIMR_action" value="MR_RUN_FEX">
   <input type="hidden" name="IBIMR_sub_action" value="MR_STD_REPORT">
   <input type="hidden" name="IBIMR_fex" value="app/getprods.fex">
   <input type="hidden" name="IBIF_fex" value="app/getprods.fex">
   <input type="hidden" name="IBIMR_folder" value="!IBI.AMP.FOLDER_NAME;">
   <input type="hidden" name="IBIMR_random" value="!IBI.AMP.RANDOM;">
   <input type="hidden" name="IBIMR_flags" value="">
   <input type="hidden" name="IBIMR_drill" value="RUNNID">
-*
 </form>
 </body>
</html>
-HTMLFORM END


With this, I see only one option rendering in my dropdown list - 'C141'.

At the moment, I only know how to pull a single (first) row from the XML: 
var PrdCds = ibihttp.selectSingleNode("//fxf/report/table/tr/td");


How can I pull the entire 'array' of Product Code elements?

This message has been edited. Last edited by: Kerry,




Pilot: WebFOCUS 8.2.06 Test: WebFOCUS 8.1.05M Prod: WebFOCUS 8.1.05M Server: Windows Server 2016/Tomcat Standalone Workstation: Windows 10/IE11+Edge Database: Oracle 12c, Netezza, & MS SQL Server 2019 Output: AHTML/XLSX/HTML/PDF/JSCHART Tools: WFDS, Repository Content, BI Portal Designer & ReportCaster
October 17, 2011, 06:22 PM
Waz
Use selectNodes, and not selectSingleNode.

Then use:
for (var _c1=0;_c1<PrdCds.length;_c1++) {
 _Kids = PrdCds[_c1].childNodes ;
 for (var _c2=0;_c2<_Kids.length;_c2++) {// There should only be one, if one column returned.
  alert(_Kids[_c2].nodeTypedValue) ;
 }
}


This is quickly typed, and not tested.


Waz...

Prod:WebFOCUS 7.6.10/8.1.04Upgrade:WebFOCUS 8.2.07OS:LinuxOutputs:HTML, PDF, Excel, PPT
In Focus since 1984
Pity the lost knowledge of an old programmer!

October 18, 2011, 12:02 PM
David Briars
Thank you Waz!

Using the selectNodes method to create the NodeList of all Product Codes is exactly what I needed to do, to create my Product Code drop down list box.

showprods.fex:
-DEFAULTH &IBIMR_domain='MR Domain Name Not Available'
-TYPE Current MR Domain Name is: &IBIMR_domain
-SET &DOMAIN_NAME = &IBIMR_domain;
-SET &FOLDER_NAME = '#foldername';
-* Create a random number.
-SET &RANDOM = RDUNIF(D5) * RDUNIF(D5) * 10000;
-*
-HTMLFORM BEGIN
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
  <title> My Report </title>
  <meta http-equiv="CACHE-CONTROL" content="NO-CACHE">
  <SCRIPT id=IBI_OptionsScript type=text/javascript>
      var ibiOptions = new Array("ibihttpxml");
  </script>
  <script type="text/javascript" language="Javascript" src="/ibi_html/javaassist/ibi/html/js/ibigbl.js"></SCRIPT>
  <script type="text/javascript">
  
// Create Product Code Drop Down List Box Contents.  
  function funGetData() {
   var ibihttp = new ibihttpxml("/ibi_apps/WFServlet", null);
   ibihttp.openFromForm(document.forms.My_Form);
   //alert(ibihttp.xmlhttp.responseText);
   // Create Node List Collection of all Product Codes.  
   var PrdCds = ibihttp.selectNodes("//fxf/report/table/tr");
   // Initialize Product Code Drop Down List Box.  
   document.getElementById("ProdCodes").options.length = 0;
   // Scroll Through the Product Code Node List.  
   for (var i=0; i<PrdCds.length; i++) {
    Kids = PrdCds[i].childNodes ;
    document.getElementById("ProdCodes").options[i] = new Option(Kids[1].nodeTypedValue, Kids[0].nodeTypedValue);
   }
  }

// Submit the Form.  
	  function subform() {
	   var myindex  = document.My_Form.ProdCodes.selectedIndex;
       var myvalue  = document.My_Form.ProdCodes.options[myindex].value;
       alert('Selected Product Code: ' + myvalue);
	  }
  </script>
 </head>

 <body onload="">
  <form method="post" name="My_Form">
   <table>
    <tr>
     <td>Product Codes</td>
	 <td>
	   <select id="ProdCodes" name="ProdCodes">

      </select>
	 </td>
    </tr>
    <tr>
     <td><input type=button value="Get Product Codes" onclick="funGetData()"></td>
     <td></td>
    </tr>
	<tr>
     <td><input type=button value="Submit Form" onclick="subform()"></td>
     <td></td>
    </tr>
   </table>
-* Variables passed from web page to WebFOCUS servlet.
-*   -WebFOCUS related variables.
-*
   <input type="hidden" name="IBIMR_domain" value="!IBI.AMP.DOMAIN_NAME;">
   <input type="hidden" name="IBIMR_action" value="MR_RUN_FEX">
   <input type="hidden" name="IBIMR_sub_action" value="MR_STD_REPORT">
   <input type="hidden" name="IBIMR_fex" value="app/getprods.fex">
   <input type="hidden" name="IBIF_fex" value="app/getprods.fex">
   <input type="hidden" name="IBIMR_folder" value="!IBI.AMP.FOLDER_NAME;">
   <input type="hidden" name="IBIMR_random" value="!IBI.AMP.RANDOM;">
   <input type="hidden" name="IBIMR_flags" value="">
   <input type="hidden" name="IBIMR_drill" value="RUNNID">
-*
 </form>
 </body>
</html>
-HTMLFORM END


getprods.fex
APP PREPENDPATH IBISAMP
TABLE FILE GGSALES
SUM PRODUCT
BY  PCD
ON TABLE PCHOLD FORMAT XML
END