Defining single-select field items

[John Robin Dove]

Hi Clifton,

I'm back. I've spent hours trying to do this. I must be missing something pretty basic. It should be simple ... I have reduced the problem to a small test app. Here's the action detail

Code: Select all

-- On click... -----------------------------------------------------------------
Define local variable "txt" (Initial value: "")
Define local variable "txtArray" (Array)
Define local variable "ctr" (Initial value: "")

Comment: text of field "txt" is "am, stram, gram"
Set txt to text of field "txt"
Comment: txtArray is an array
Execute Script pgSplitToArray (HTML)
Comment: This testing loop proves that the array contains the required content.
Step ctr from 1 to txtArray [ 0 ] by 1
  Display alert: txtArray [ ctr ]
End step loop
Set itemText of Field "test" to txtArray
Comment: pg equivalent below:
Execute Script pgTBObjSet (HTML)
Comment: but nothing happens!

In my program I'm getting a folder list via XMLHttpRequest. That part works fine. I just want to put the list into a listbox (TB single-select field). In the TB Help it says itemText is an array. So why can't I put my array into the itemText property? I have tried looping to set each item in the itemText property but I can't because there is no access to the individual items of itemText.

[Clifton]

PowerPac to the rescue here!
First of all, you must realize some limitations inherent with ToolBook when it comes to comboBoxes and select list boxes:

1. You cannot change items in a select list or comboBox.
2. You can only display text items in a list and cannot access the hidden HTML value property of an item.
3. As far as I can see, you cannot have a selection list which allows more than a single selection, although in the HTML this is possible.
4. When the PowerPac manipulates a selection list, the properties for that list in the Actions Editor will no longer be available because they are hard coded during the export process and are build into the event structure. Therefore, we recommend leaving the list box EMPTY and then and use PowerPac functions on load page to build the list.

Next, you must understand what happens to a list box is when you go from native (authoring mode) to HTML exported content.

• When a list box is exported to HTML, it becomes a <select></select> tag with <option></option> sub tags. You can see this if you use the developer tools in IE or Chrome or use Firebug in Firefox to examine the exported content of sample page with a selection list.
• A ToolBook comboBox is really just a select list box with its size property set to 1. This causes the HTML list box to show a drop down control to expose the rest of the selections.

The PowerPac API has 2 functions which handle full manipulation of select list boxes.

1. buildComboBoxOptionsList(): This function BUILDS the item list based on a return from a web server query or other source or even an XML file. When a comboBox or selection list is built, the function can assign a hidden value to each visible option in the list. This is any string which is important to the application. For example, if an item is a restaurant menu, then the hidden item may be the price that is to be charged for the selected item.
2. setComboBoxOption(): This function SETS or GETS information about an item in the list box. It can retrieve all items selected in the case of a multi-select list box. The output from the function can be a string or array depending on how you wish to use the result.
   
   NOTE: You cannot use the On select event in the Actions Editor after building a selection list. This is because this event doesn't understand how dynamic items are added or removed and we have found a better alternative to this event. Instead, use the On property change event as this will be triggered every time a selection is made in the selection list. This is reliable 100% of the time and responds well even when list items are dynamically altered by a web server query, etc.

To see these 2 functions working together, please visit this link:
http://www.pgsoftwaretools.com/powerpac/assessments/selectionLists/

Action Editor code that could be used to handle the On property change event:
Note: This should be an action on the selection list box or comboBox.

Action code for selection list box for On property change event

Image 1.png (28.75 KiB) Viewed 1757 times

In this case, we are using setComboBoxOption() to GET the current selection and if that selection is not empty ( not (not tmp) = false ), then we are just putting the hidden value associated with it into a text field. This is the action code used in the URL reference above.

[John Robin Dove]

Thank you for this detailed reply. I assumed that because the object was called a Single-Select Listbox it would function as it does in Toolbook native apps. I guess it's unwise to assume anything about Toolbook DHTML.

[John Robin Dove]

Hi Clifton,

I had no problem doing what I wanted on a small test app but when I tried to do the same thing on the first page of my program the propertyChange refuses to work.

I have even copied the objects from the test app to the main app but the same thing happens. I can build the listbox list but when a line is selected the propertyChange does not fire.

I've tried repairing the book, taking the field out of the group, changing names but so far I haven't been able to get a response. Could there be something on this page that is preventing the onpropertychange from behaving normally?

[Clifton]

Well here is a typical troubleshooting procedure for a problem like this:

1. For a single test page in a new book:
   Verify that the list box get populated as expected and that the On property change event fires whenever an item is selected in the list. Verify that the page works in all required browsers since sometimes a problem will occur in one but not another.
2. Add a page to your development book and add the objects from your test page to it. Export the book and verify that the list box works properly and the event is fired when a completely new page without any other custom js is loaded.
3. Then, move the objects to the destination page and verify whether the list box works and fires the events as expected. If only at this point the system fails, then this is where you need to focus your trouble-shooting.
   
   If you are loading any custom js, try disabling those script(s) and see if that recovers the functionality. If the list box begins to work, then you will need to explore your custom code to see what problems may be occurring. Sometimes what happens is that an error condition inside a try/catch statement is occurring. These errors are often not visible but very much error conditions which can stop other js from working correctly. Progressively remove the try/catch statements until the real error surfaces so you can see exactly what is happening.

This is really just designed to get you started. If the whole thing failed at item 1 in the list above, then we would have to check to see if the problem is more of an issue with the content created from ToolBook v9.01 with the PowerPac functions in use. But from your description, this does not sound like the case.

[John Robin Dove]

Hi Clifton,

Thanks for your reply. It has taken me some time to identify the culprit because this page loads an xml file, a js file and has 3 goToURL actions. In the end though the problem is quite simple. There would seem to be an incompatibily between createDraggableObject and setComboBoxOption.

I have put an example here http://www.mediacours.com/tb_examples/listbox

Test by clicking on 'Build list' and then click on a line in the listbox. It should work as planned. If you then click on 'Ctreate draggable object' (including typo ) 'move me' becomes draggable but setComboBoxOption no longer functions.

Maybe this is a 9.01 problem?

The 9.01 file is here http://www.mediacours.com/tb_examples/listbox.tbk

UPDATE I should have checked this before but I have just found out that this problem is related to Google Chrome. In Firefox and IE things behave normally.

[Clifton]

I'll see if there is a conflict that affects Chrome.

[John Robin Dove]

Hi Clifton,

Do do agree that there is a problem with setComboBoxOption if Chrome is used in this case or have I done something wrong?

In the meantime I have found a workaround by using pgGoToURL here: http://www.mediacours.com/tb_examples/new_listbox

I had a lot of trouble getting the function I wrote on my embedded HTML page to accept a parameter that it could use. The array created by pgSplitToArray didn't work and neither did a comma separated list. In both cases only the first two characters of the parameter were read!? I found a solution: instead of using a comma as the separator I used a semi-colon. I passed the complete list and did the splitting on my HTML I can use pgReplace to achieve this with my folder list on my project app.

Here's the HTML

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  <style type="text/css">
  select {
  font-size: 1.2em;
  font-family: sans-serif, Arial, Helvetica;
  border: 1px solid black;
  }
  </style>
  </head>
  <body bgcolor="#C0C0C0">
 
  <select multiple size="10" id="box1" style="width:450" onclick="getLine()">
  <option value="one">one</option>
  <option value="two">two</option>
  <option value="three">three</option>
  <option value="four">four</option>
  <option value="five">five</option>
  <option value="six">six</option>
  <option value="seven">seven</option>
  <option value="eight">eight</option>
  <option value="nine">nine</option>
  <option value="ten">ten</option>
  </select>
 
  <script>
 
  function getLine()
  {
  var obj = document.getElementById("box1");
  var i;
  var line;
  var intro = "Line selected = "
 
  for (i = 0; i < obj.options.length; i++)
    {
    if (obj.options[i].selected == true)
      {
       line = obj.options[i].value;
       top.tbfunction_pgTBObjSet("result","text", intro + line);
       break;
      }
    }
  }
 
  function populate(myList){
    var obj = document.getElementById("box1");
    while(obj.options.length > 0){               
    obj.remove(0);
    }
    var myLines = myList.split(";");
    for(i=0;i<myLines.length;i++){
    obj.options[i] = new Option(myLines[i]);
    }
  }
  </script>

  </body>
</html>


[Clifton]

Please note the usage intention for the two list box functions:

1. buildComboBoxOptionsList(): Actually takes a (text) list and creates the list box items. Its purpose is little more than building the items or appending a list that already exists. The latest PowerPac version allows the function to work with an array as the input for list items as long as each index of the array is a text-based string representing an item~value pair (tilde separated). The [value] portion is optional and may be omitted.
2. setComboBoxOption(): This is a get/set function for whatever is already in the list box. This function can retrieve information about an item OR it can set the selection status of a specific item in the list.

Since these functions work fine on Chrome, I'm wondering if something else is causing a conflict. Could be naming conventions, or as a slim possibility there could be issues with the legacy use of ToolBook v9.01.

Submitting an actual one page tbk that demonstrates the problem may help us resolve any possible bug-related conditions. However, these functions have been around for a while and we are effectively using them in a lot of projects.

[John Robin Dove]

Hi Clifton,

You wrote "Submitting an actual one page tbk that demonstrates the problem may help us resolve any possible bug-related conditions".

That's what I did on June 15th (see above). Here it is again: http://www.mediacours.com/tb_examples/listbox.tbk