[support-michael]

Example: Display SelectList selections in a TextArea

A user requested assistance to display selected items from a list on a summary screen. This example consists of 2 screens, a selection screen (screen-1) and summary screen (screen-2). The user selects from the options on screen-1. Then when he selects the Show Summary button, screen-2 is shown. During the transition from screen-1 to screen-2 the text-area on screen-2 is updated with labels and values of the selected items in the list on screen-1.

The code for this example is available at the end of this article.

Here is the user interface
See attachment summarize-ss.png

The OnClick event for the “Show Summary” button has a GotoScreen action configured to reference the summarize.mobi design file.

The code is based on snippets found in the Interacting with Widgets: JavaScript Snippets guide.

/**
 * Notification that the UI is about to transition to a new page.
 * Perform custom prepage-transition logic here.
 * @param {String} currentPageId 
 * @param {String} targetPageId 
 * @returns {boolean} true to continue transtion; false to halt transition
 */
phoneui.prePageTransition = function(currentPageId,targetPageId) {  
  if (currentPageId == '#m1-list') {
    summarize();
  }
  
  return true;
}
  
​function summarize() {
  var summary = "";

  //multiple select list: get selected items as array and 
  // collect label::value strings
  $('select[name="list1"] :selected').each(
     function(i, selected) {
       summary += $(selected).text() + "::" + $(selected).val() + "\n";
   });
   
  //update text-area content 
  $('#m1-summary-textArea1').text(summary);
}​

Project source code
See attachment summarize-choices.zip

Attachments:

You must be logged in to view attached files.

[Maloni]

Hi Wayne,
thank you for this example. My problem …., I would like to transfer the label (not value) from a spinner widget into a text field on a second page.
Based on the example I was not successful.
Can you please still give an impulse.
Thank you for your trouble.

Maloni

[Celeste Patin]

Thank you Wayne. I will try this. Thanks for the support also.

Celeste

[Carson89]

@support-wayne wrote:

Example: Display SelectList selections in a TextArea

A user requested assistance to display selected items from a list on a summary screen. This example consists of 2 screens, a selection screen (screen-1) and summary screen (screen-2). The user selects from the options on screen-1. Then when he selects the Show Summary button, screen-2 is shown. During the transition from screen-1 to screen-2 the text-area on screen-2 is updated with labels and values of the selected items in the list on screen-1.

The code for this example is available at the end of this article.

Here is the user interface
See attachment summarize-ss.png

The OnClick event for the “Show Summary” button has a GotoScreen action configured to reference the summarize.mobi design file.

The code is based on snippets found in the Interacting with Widgets: JavaScript Snippets guide.

/**
 * Notification that the UI is about to transition to a new page.
 * Perform custom prepage-transition logic here.
 * @param {String} currentPageId 
 * @param {String} targetPageId 
 * @returns {boolean} true to continue transtion; false to halt transition
 */
phoneui.prePageTransition = function(currentPageId,targetPageId) {  
  if (currentPageId == '#m1-list') {
    summarize();
  }
  
  return true;
}
  
​function summarize() {
  var summary = "";

  //multiple select list: get selected items as array and 
  // collect label::value strings
  $('select[name="list1"] :selected').each(
     function(i, selected) {
       summary += $(selected).text() + "::" + $(selected).val() + "\n";
   });
   
  //update text-area content 
  $('#m1-summary-textArea1').text(summary);
}​

Project source code
See attachment summarize-choices.zip

Hi wayne,

The quoted text did not provide step-by-step tutorial. I tried to compile as instructed, but I think there was something I missed in the middle that led me failing to make it work.

Would you mind to provide a simple and step-by-step tutorial on this function?

Thank you.

Carson

[support-michael]

Hi Carson,

Here’s a brief outline of the code above. Let’s start with the phoneui.prePageTransition() function.

/**
* Notification that the UI is about to transition to a new page.
* Perform custom prepage-transition logic here.
* @param {String} currentPageId 
* @param {String} targetPageId 
* @returns {boolean} true to continue transtion; false to halt transition
*/
phoneui.prePageTransition = function(currentPageId,targetPageId) {  
  if (currentPageId == '#m1-list') {
    summarize();
  }
  return true;
}

This function is called by the MobiOne phoneui.js library before a gotoScreen action is performed. The currentPageId parameter is compared to see if it is the screen ID #m1-list. I looked up the screen ID in the html file. If yes then call the summarize() function which will update the summary screen’s content. The function returns true. If the function returns false the transition terminates.

Now let’s look at the javascript that summarizes the user’s selected items in a textarea widget. Here’s the code:​

function summarize() {
1   var summary = "";
2
3   //multiple select list: get selected items as array and 
4   // collect label::value strings
5   $('select[name="list1"] :selected').each(
6      function(i, selected) {
7        summary += $(selected).text() + "::" + $(selected).val() + "\n";
8    });
9   
10  //update text-area content 
11 $('#m1-summary-textArea1').text(summary);
}​

At line #5 this statement finds all selected html <option> elements of the <select> named “list1”. “list1” is the name I gave my SelectList widget in the Visual Designer. The .each() statement will cycle/iterate through the list of selected <option> elements. For each selected <option> concatenate the option’s label and value separated by “::” to the summary string.

Lastly at line #11, the textarea widget is updated with the summary string.

[will]

Thanks again for this example which has been very helpful. However it seems to work very temperamentally when applied to my app sometimes displaying items that aren’t selected and sometimes displaying nothing at all in the output screen. also it displays data from the first select lists in other screens not named in the pre-transition parameter which isn’t really a problem but seemed odd. The only thing i can think is that that it is due to me changing the location of the .mobi files for different screens into different folders but the screen transition links work fine. Could this be a system bug or is the list im implementing it on too long?(its 32 items long)

NEVER MIND WORKED IT OUT MY PROBLEM WAS NOT FOLLOWING THE GUIDE TO GENERATING SOURCE CODES PROPERLY

[will]

There is a limitation to the code in this example where if 2 items or more on the select list have the same value eg £300 but different names then all items with the value are retrieved for the output even if only one is selected.

[Carson89]

Hi Wayne,

I have successfully completed the selected list item after your explanation.

But at this moment I would like to add another requirement, which is to convert the displayed text to item which can be selected. Would you mind to help me out?

[support-octavio]

@will,

I’ll take a look today later. Will follow up tomorrow with findings.

@Carson89,

Could you give more details about what you’re trying to do?

[Carson89]

@Octavio,

Now the selected item will be displayed as text in the summary page right?

So this function is somehow like the bookmark function, am I right? The ticked item will be displayed in the summary (bookmarked) page.

However, the displayed item is in text, you can amend it as it is a text panel.

So taking this as bookmark function, when I select the item, the particular item will be shown in the summary page. But this time I would like it to be displayed in selectList panel, so that I can click/select the item after I bookmark it: onClick the bookmarked item>gotoScreen & display detail.

I have a ready demo here, but I couldn’t upload to this forum. Would you mind if I send to your email?

Regards,
Carson

[Carson89]

Halo….

Anyone here?? I posted last Friday but no one replies me until now.

[will]

Any luck figuring out why identical value fields are grouped in the array even if not selected?

[support-octavio]

Hi will,

We are still investigating the issue. Will follow up with you as soon as we know more.

[support-michael]

@will

There is a bug in the SelectList that implicitly requires the value property of the list’s SelectListItems to be unique. Given this the selected items with the same value are ambiguous to the selection mgmt logic.

The story is that SelectList has a visual presentation model and an underlying data model, a <select>. Currently the item’s value is used as a primary key to sync the 2 models. We are revisiting this implicit requirement such that the item values are not the primary key.

The workaround until we relax this implicit requirement is to assign each selectListItem a unique value.

[will]

thanks wayne,

for anyone else needing a work around i use identical values e.g. 100 with a space at the end of one of them so the program differentiates between them. this makes the formatting of the output ugly but the functionality is fine.

[Author]

Posts