Create checkbox list on the fly with JQuery

Question

I create a Checkbox list with the following code:

function LoadDetours() {
    if ($("#DepartureCityId").val() != "0" && $("#ArrivalCityId").val() != "0") {
        var url = "/Cities/detours?start=" + $("#DepartureCityId").val() + "&end=" + $("#ArrivalCityId").val();

        $.getJSON(url, null, function (data) {

            var topicContainer = $('ul#detourDiv');
            topicContainer.empty();
            $.each(data, function (iteration, item) {
                topicContainer.append(
                    $(document.createElement("li"))
                    .append(
                            $(document.createElement("input")).attr({
                                type: 'checkbox',
                                id: 'detour-' + iteration,
                                name: iteration,
                                value: "aaaaaaa"
                            })
                    )
                    .append(
                            $(document.createElement('label')).attr({
                                'for': 'detour-' + iteration
                            })
                            .text(item)
                    ))

                alert(item);
            });
        });

                }

    }

It seems there is no error and code runs, the alert popup shown that I have data in my items but nothing appear on my form, am I missed anything?

;'s are usually automatically inserted in javascript. OP, can you post a fiddle? — Martin
– Martin, Commented Jul 14, 2012 at 20:19
Based on your profile history, I assume, that with "mvc", you actually meant ASP.NET MVC framework and not the language-independent design pattern. — tereško
– tereško, Commented Jul 14, 2012 at 20:22
<div id="detourDiv"> <ul style="list-style-type: none;"></ul> </div> — Mazdak
– Mazdak, Commented Jul 14, 2012 at 20:26
@MartinAmps - Awesome link! I stand corrected. Technically they are inserted. (Comments are exactly that, not answers. If you have something that is not an answer you put it here. Otherwise it is really useful to put answers in the answer area, something some users don't do). — Hogan
– Hogan, Commented Jul 14, 2012 at 21:10

Hogan · Accepted Answer · 2012-07-14 20:38:13Z

1

Fixed up the syntax and it works for me

(Sorry, it seems I did not save the fiddle) :(

And based on the comment just posted we see what the problem is.

<div id="detourDiv"> <ul style="list-style-type: none;"></ul> </div>

and

<div > <ul id="detourDiv" style="list-style-type: none;"></ul> </div>

in my working code.

edited Jul 14, 2012 at 20:38

answered Jul 14, 2012 at 20:12

Hogan

70.7k10 gold badges83 silver badges119 bronze badges

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

Collectives™ on Stack Overflow

Create checkbox list on the fly with JQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related