Dynamically creating Radio options

[Slava Balabanov]

I have a array that hold sets of names and ids of data... and i want to populate it to a radio options component. Therefore, i tried to create one using java script but without success. It does create a radio options but

1. they are not horizontal as i wanted.
2. they each seem to be in a different group
   This is my code:
   code
   function generateRadioFoodType(containerName)
   {
   var radioForm = '<fieldset id="foodTypeRadio" data-role="controlgroup" data-type="horizontal">';
   for(var i=0; i < foodTypes&#46;length; i++)
   {
   if(i === 0) {
   
   

   Code: Select all

    radioForm += '<label for="radio-choice-' + i + '">' + foodTypes[i]&#46;name + '</label> <input name="radio-choice" id="radio-choice-' + i + '" type="radio" value="' + foodTypes[i]&#46;id + '" checked="checked"/>'; 
    } 
    else { 

radioForm += '<label for="radio-choice-' + i + '">' + foodTypes&#46;name + '</label> <input name="radio-choice" id="radio-choice-' + i + '" type="radio" value="' + foodTypes&#46;id + '"/>';
}

}

Code: Select all

     radioForm += '</fieldset>'; 

var radioElement = $(radioForm);

Appery(containerName)&#46;append(radioElement);
$("#foodTypeRadio")&#46;trigger('create');
}
/code
When i try to put the result of radioForm into a HTML component as it is (not creating it from JS) then it builds correctly but like this.. doesnt work
If needed i'll post images of how it looks
Am i doing something wrong?

[Maryna Brodina]

Hello!

You can look at the HTML source code of your page and you will see that radiogroup have only one fieldset. So why do you have many different groups?

[Slava Balabanov]

Hi. Sorry for the delay.
First of all, i run this code in the load event of the page, dont know if it matters.
This is the html that is generated on the page (When i copy it from chrome as HTML):
code
<fieldset id="foodTypeRadio" data-role="controlgroup" data-type="horizontal">
<div class="ui-radio">
<label for="radio-choice-0" class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-radio-on">health</label>
<input name="radio-choice" id="radio-choice-0" type="radio" value="1" checked="checked">
<>
<div class="ui-radio">
<label for="radio-choice-1" class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-radio-off">vegan</label>
<input name="radio-choice" id="radio-choice-1" type="radio" value="2">
<>
<div class="ui-radio">
<label for="radio-choice-2" class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-radio-off">vegetarian</label>
<input name="radio-choice" id="radio-choice-2" type="radio" value="3">
<>
</fieldset>
/code
This is a print screen showing what chrome is actually showing in the code:
The radios in the bottom of the page is what i'm talking about.
They are in 1 fieldset but still they look seperate.

Same code when i put if here:
http://jsfiddle.net/YKvR3/308/
Looks fine

Any suggestions?

[Kateryna Grynko]

Hi Slava,

Try using Checkbox component http://docs.appery.io/documentation/u...

In Checkbox component properties panel set Orientation=horizontal.

[Slava Balabanov]

I've tried that actually.. did the same thing with a checkbox.
Result is the same (as it still uses the same jquery component)

Maybe its possible to create a component using the UI-builder and then add options dynamically? I didnt find how to do it here in the forums..
As i need to clear the initial item that it adds and put my own items..

[Kateryna Grynko]

Hi Slava,

Just add an array mapping to a Checkbox component - this will allow you to add options dynamically. Do the following mapping:

[Slava Balabanov]

Thanks. This does work
I used that in the beginning but wanted to try doing the same using JS.
I tried to do that because i didnt want to go to the DB and get my wanted values every time i open the page.
I wanted to save the values in a local storage or in global JS array and just build the radio options when i load the page
Those values wont change to much but i prefer not to put them hardcoded on the page...

Can i somehow use the mapping stuff in a different way? without the DB (is this what you meant?)
Like, create a custom service that when called, just passes the given arguments to the response and then use that in the mapping
If its even possible, then it still seems kinda awkward to do that instead of just building the radio options using JS \=

Anyway, if you manage somehow to find the cause of the radio options acting strange then it will be most helpful. I've tried searching the forums here and google for some hours and didnt find a cause for that \=
If not, then i'll remain using the mapping solution

[Maryna Brodina]

Hello!

You can create Generic service for this purposes, here is more information http://docs.appery.io/documentation/u...

[Slava Balabanov]

Hi,
Thanks for the suggestion i followed the generic service and i think i'm almost there!
Now i have a small issue to make it work.
I've created a service that the response looks like this (JSON format):
code
{"types":[{"typeId":"1","name":"health"},{"typeId":"2","name":"vegan"},{"typeId":"3","name":"vegetarian"}]} /code
This is the service:

And this is the mapping:

But the result radio options are empty.
I've looked at the HTML of the page and... it seems there.. but it doesnt show for some reason.

So, what could it be? Maybe i dont pass the response as i should?

[Illya Stepanov]

Hi Slava - Everything seems to be Ok, can you give us public link, so we can take a closer look?