facebook
  1. MobiOne Archive
    2.  > 
  2. Getting Help – General

Load combobox from xml file

  1. MobiOne Archive
    2.  > 
  2. Getting Help – General
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • July 26, 2011 at 8:21 am #318466 Reply

    kaza007
    Member

    Hi,
    sorry if this has already been answered but I cant seem to find the answer…

    I am trying to load a combobox from a list in an xml file.

    The list is fruits.xml

    
<select>
  <option>Apples</option>
  <option>Lemons</option>
  <option>Strawberrys</option>
  <option>Peaches</option>
  <option>Grapefruit</option>
</select>

    and the html code to display the combobox is load_fruit.html

    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
<select>
<script type="text/javascript">
<!--
    var xmlDoc=new ActiveXObject("Microsoft.XMLDOM")
    xmlDoc.async="false"
    xmlDoc.load("fruits.xml")

    nodes=xmlDoc.documentElement.childNodes
    for (i=0;i<nodes.length;i++) {
        document.write('<option value="'+(i+1)+'">'+nodes.item(i).text+'</option>');
        }    
// -->
</script>
</select>
</body>
</html>

    Now,
    if I extract the javascript and call it a function like load_fruit, where do I place the call so the mobi page will display correctly and be able to select the options?

    Thanks.

    July 26, 2011 at 10:13 am #318467 Reply

    support-michael
    Keymaster

    Please see the following article that I posted last week on how to populate a list with dynamic content:
    http://www.genuitec.com/support-mobione/viewtopic.php?f=14&t=1858

    July 28, 2011 at 6:27 am #318511 Reply

    kaza007
    Member

    Thanks Wayne,
    that was very helpfull.

    I modified the code to read the list contents from an xml file. It works well!
    http://dl.dropbox.com/u/16764856/custom-list-from-xml.zip

    My next task is to try and write something simillar now with a combobox.

    Let you know how I ago. Will post the results.

    July 29, 2011 at 4:48 am #318539 Reply

    kaza007
    Member

    OK,
    I am having problems working out how to add items to a combobox in iterations.
    (ie. cycling through each line of an xml file and adding each line to the combobox)

    The following code works nicely.

    
function buildList() {
  var list = $('#m1-list-panel1') 

  //remove current list items
  list.children('#m1-list-hidden-select-combobox1').remove();

   list.append(
     '   <div class="m1-aux-hidden-div">'+
     '     <select id="m1-list-hidden-select-combobox1" name="combobox1">'+
     '       <option value="value1" label="Apple" selected>Apple</option>'+
     '       <option value="value2" label="Pear">Pear</option>'+
     '       <option value="value3" label="Banana">Banana</option>'+
     '       <option value="value4" label="Grape">Grape</option>'+
     '     </select>'+
     '   </div)');
}

    I have tried many combinations but I can seem to find how to loop the list.append command and make it work!

    July 29, 2011 at 9:22 am #318545 Reply

    support-michael
    Keymaster

    @kaza007

    Take a look at this screenshot of a simple UI where the Add Item button will append a new item to the combo box each time it is pressed. The Add Item button calls the addItem() javascript function that I wrote. The src code for this example is attached below.
    See attachment addItem-screenshot.png

    Source Code
    See attachment dynamic-combobox-example.zip

    Attachments:
    You must be logged in to view attached files.
    July 29, 2011 at 8:53 pm #318554 Reply

    kaza007
    Member

    Thanks for the example. Your code was in 1.2.2 but I got what I needed out of the source.

    Do you have any documentation yet on all the Attributes of the Components that can be used?

    I am particulaly after an option to ‘remove’ all the items in the combobox before I ‘append’ the new ones. ‘remove’ does not seem to work. Maybe I am missing an option or parameter.

    July 30, 2011 at 5:42 pm #318559 Reply

    support-michael
    Keymaster

    I completely forgot that I was testing the upcoming 1.2.2 release when I generated that example code.

    Here are a couple of javascript snippets:

    Remove all items from combo:

    $('#m1-dyna-combobox-hidden-select-combobox1').empty();

    Select an item:

    $('#m1-dyna-combobox-hidden-select-combobox1').val('valueIProvidedInComboItemsList');
    July 31, 2011 at 5:48 pm #318562 Reply

    kaza007
    Member

    Thanks Wayne,
    they were very usefull.

    Set width of combobox

    
$('#m1-dyna-combobox-hidden-select-combobox1').width(150);

    I would like to add some javascript to the combo change selection event.
    Any ideas how I would do that?

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
Reply To: Load combobox from xml file

You must be logged in to post in the forum log in