Adding radio buttons dynamically to a div using jquery

Question

I am burned out on this (may be due to Friday), I tried, googled but didn't find a way to make this thing work. the code looks straight forward, but it doesn't add the radio buttons to my div. I am sure, i am missing something silly.

var m_fastingOptions = [{ "Id": "1", "Name": "Fasting" }, { "Id": "2", "Name": "Not Fasting" }];

$.each(m_fastingOptions, function() {
    $("#dvFastingOptions").append(
        $('<label />', {
            'text': this.FastingName                            
        }).append(
            $('<input />', { 
                type: 'radio', 
                name: 'rdoFastingOptions', 
                id: 'rdoFastingOptions' + this.Id,
                value: this.Id
            } )
        )
    );    
});

Here is the jsFiddle that I was playing with. Any help is much appreciated.

After adding the correct jQuery version to jsFiddle, I see radio buttons but not the label text.

I need to see: O Fasting O Not Fasting

Try including jquery. jsfiddle.net/DsQFn ... always check your console. You would see that $ is undefined. — James Montagne
– James Montagne, Commented Jul 26, 2013 at 19:59
youre missing jQuery in your fiddle. after adding that its working :) — krishwader
– krishwader, Commented Jul 26, 2013 at 19:59
First step when something isn't working: Check your console. You would have immediately seen "Uncaught ReferenceError: $ is not defined" and known that jQuery wasn't referenced. — Jason P
– Jason P, Commented Jul 26, 2013 at 20:01

bPratik · Accepted Answer · 2013-07-26 20:08:18Z

3

The problem is that, you are referring to the wrong property name.

Instead of Name, you are trying to navigate to FastingName

$('<label />', {
    'text': this.Name //This is correct
})

Either that, or you update your object to be:

var m_fastingOptions = [{
    "Id": "1",
    "FastingName": "Fasting"
}, {
    "Id": "2",
    "FastingName": "Not Fasting"
}];

See fiddle here: http://jsfiddle.net/pratik136/XWHsA/

Edit:

To see the output as

O Fasting O Not Fasting

use .prepend() instead of .append()

edited Jul 26, 2013 at 20:08

answered Jul 26, 2013 at 20:03

bPratik

7,0114 gold badges40 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sri Reddy Over a year ago

Not my day today. It is one of the worst question I have ever asked on SO. I need to go home now. :((

ashishSober Over a year ago

that is so cool,but if I need to take an ID of a particular checkbox then ` $('input:radio[name=rdoFastingOptions]:checked').each(function(){var selectedValue=$(this).val()} ` use this

Tushar Gupta - curioustushar · Accepted Answer · 2014-04-07 18:38:13Z

1

Finally i found solution to the problem, here is the answer code,

var listOfOptions = [{ "Id": "forYourself", "Name": "For Yourself" }, { "Id": "myEmployees", "Name": "My Employees" }, { "Id": "forOthers", "Name": "For Others" }];
        $.each(listOfOptions, function() {
            $(".optionDiv").append(
                $('<input />', {
                    type: 'radio',
                    name: 'rdoOptions',
                    id: 'rdoOptions' + this.Id
                })
            );
            $(".optionDiv").append(
                        $('<label />', {
                            'text': this.Name
                        })
            )

        });
    });

Any better simpller way to do this?

edited Apr 7, 2014 at 18:38

Tushar Gupta - curioustushar

57.2k24 gold badges106 silver badges110 bronze badges

answered Apr 7, 2014 at 18:17

user3507980

111 bronze badge

Collectives™ on Stack Overflow

Adding radio buttons dynamically to a div using jquery

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related