Adding dynamic options to a Select menu is quite similar to adding dynamic rows to a ListView widget. As illustrated by the following code snippet, use jQuery's append() method to attach dynamically created <option> elements to a <select> control and then invoke the widget's refresh() method to have those changes appear on-screen.
var beers = [ {
label: "Amstel Light", value: 1
}, {
label: "Corona Extra", value: 2
} ];
var MySelect = $("select#beerid");
var tpl = '<option value="{0}">{1}</option>'; // remove all items
MySelect.empty(); // add placeholder
MySelect.append(tpl.format('','Please Select')); // add data items
for (var i=0; i<beers.length; i++) { MySelect.append(tpl.format(
ships[i].value, ships[i].label ));
}
// important: refresh the list!!! MySelect.selectmenu("refresh", true);
In this walkthrough, you will start developing a data input form to enable the user to edit their contacts and link their contacts to a specific brand of beer.
Design a form
Dynamically populate a <select> list Implement a “Back” button
Respond to button taps
Steps
Open the Project
1. Open Intel XDK New
2. Click on the word PROJECTS in the top- left corner of the GUI.
3. Click the Open a Project button. 4. Select the following file:
/ftIntelXdkNew/walk/walk5_1/walk5_1.xdk
Define the Header Buttons
5. Open the contactform.html file in Design mode.
6. From the Controls > Form palette, drag a button widget and drop it on the left edge of the page header.
7. Configure the following properties:
Icon: ui-icon-back Icon position: icon only
id: btnBack
8. Go to Code mode.
9. Locate the anchor tag that was generated for the back button and add the following attribute:
data-rel="back"
10. Return to Design mode.
11. From the Controls > Form palette, drag a button widget and drop it on the right edge of the page header.
Figure 6: The data entry form that you will create during this exercise
Icon: ui-icon-check Icon Position: Icon only
id: btnSave
Define the Form
13. From the Controls > Layout panel, drag a Row widget and drop it onto the center of the design canvas.
14. Configure the following property:
is Form: checked
Define the Contact Fields
15. From the Controls > Form palette, drag an Input widget and drop it onto the Row widget in the Design Canvas.
16. Configure the following properties:
Label: (unchecked)
Type: text
Placeholder: First Name
Name: firstName
id: firstName
17. From the Controls > Form palette, drag an Input widget and drop it directly underneath the First Name field on the Design Canvas. 18. Configure the following properties:
Label: (unchecked)
Type: text
Placeholder: Last Name
Name: lastName
id: lastName
19. From the Controls > Form palette, drag an Input widget and drop it directly underneath the Last Name field on the Design Canvas. 20. Configure the following properties:
Label: (unchecked)
Type: text
Placeholder: Street Address
Name: address
Name: zipcode
id: zipcode
23. From the Controls > Form palette, drag an Input widget and drop it directly underneath the Zip Code field on the Design Canvas. 24. Configure the following properties:
Label: (unchecked)
Type: email
Placeholder: [email protected]
Name: email
id: email
25. From the Controls > Form palette, drag an Input widget and drop it directly underneath the email field on the Design Canvas.
26. Configure the following properties:
Label: (unchecked)
Type: telephone
Placeholder: Tel
Name: phone
id: phone
Create a Dynamically Populated Select List
27. From the Controls > Form palette, drag a Select widget and drop it directly underneath the telephone field on the Design Canvas. 28. Configure the following properties:
Label: (unchecked) Options: Select a Beer
Name: beerId
id: beerId
29. Save the file
30. Open index.html in Code mode.
31. Where indicated by the comment, define a JavaScript object named ContactForm.
var ContactForm = { };
32. Define the following property on the ContactForm object:
friendId: null;
33. Add the following methods to the ContactForm object:
init
populateBeerField
var ContactForm = { friendId: null, init: function() { }, populateBeerField : function() { } };
35. Inside the initialize() method, call the populateBeerField method. var ContactForm = { init: function() { this.populateBeerField(); }, populateBeerField : function() { } };
36. Inside the populateBeerField() method, define a local variable named beerField that points to the beerid select widget in the form. Your code should appear similar to the following:
var beerField = $("select#beerId");
37. After the code that you inserted from the prior step, insert a for-loop that loops through the beer data that's cached in the variable App.beers. populateBeerField : function() {
var beerField = $("select#beerId");
for (var i=0; i< App.beers.length; i++) {
}
}
38. Inside the for-loop, insert code that dynamically outputs the data from App.beers as <option> elements inside of the select widget.
populateBeerField : function() { var beerField = $("select#beerId"); for (var i=0; i< App.beers.length; i++) {
beerField.append( '<option value="{0}">{1}</option>'.format( App.beers[i].id, App.beers[i].name ) ); } }
39. After the for-loop, insert a statement to refresh the display of the select widget.
43. Configure the following properties:
Icon: ui-icon-plus Icon Position: Icon only
id: btnAdd
44. Go to Code mode and locate the generated markup for the button. 45. Add the following attributes to the anchor tag that wraps the add
button:
href=”contactform.html” data-transition=”flip” 46. Save the file.
47. Return to index.html in Code mode.
48. In the Contacts object, at the end of the init() method, bind a tap event handler to the “Add Contact” button.
$("#btnAdd").bind("tap", function(e) {
});
49. Inside the button tap callback function, set the friendId property in the ContactForm object to null.
$("#btnAdd").bind("tap", function(e) {
ContactForm.friendId = null;
});
50. Save the file and test in the emulator.