Jquery append html weird behavior

Question

i have the following ajax:

$.ajax({
    type: 'POST',
    url: myBaseUrl + 'Products/ajax_get_subcategories',
    dataType: 'json',
    data: {
        id: id
    },
    success: function (data) {
        var length = data.length;
        var div_subcategory = $('#subcategory');
        div_subcategory.html('');
        div_subcategory.append(
            "<select id='subcategory' name='data[Product][subcategory_id]'>"
        );
        for (var i = 0; i < length; i++) {
            var id = data[i]['Subcategory']['id'];
            var name = data[i]['Subcategory']['name'];
            $('#subcategory').append(
                "<option value=''+id>" + name + "</option>"
            );
        }
        div_subcategory.append("</select>");
    }
});

Now as you can see it appends a select into a div block.

But! there is a catch here is the output of the HTML after the ajax has been called:

    div id="subcategory" class="subcategory">
<select id="subcategory" name="data[Product][subcategory_id]"></select>
<option +id="" value="">Telte</option>
<option +id="" value="">Toilet</option>
<option +id="" value="">Service</option>
<option +id="" value="">Borde</option>
<option +id="" value="">Stole</option>
<option +id="" value="">Lyd og lys</option>
</div>

As you can see it closes the select tag before adding the options.

Can anyone tell me why this is happening?

Thats because jQuery will close the tags for you and you have 2 elements with the same id (which is bad) — megawac
– megawac, Commented Nov 12, 2013 at 12:45

megawac · Accepted Answer · 2013-11-12 12:50:51Z

When you write:

div_subcategory.append("<select id='subcategory' name='data[Product][subcategory_id]'>");

jQuery will insert

<select id='subcategory' name='data[Product][subcategory_id]'></select>

And becasue div_subcategory will have the same id as the select you will be matching the div instead.

Instead I would write this by creating the html in a string and injecting it all at once.

    var html += "<select id='subcategorysel' name='data[Product][subcategory_id]'>";
    for (var i = 0; i < length; i++) {
        var id = data[i]['Subcategory']['id'];
        var name = data[i]['Subcategory']['name'];
        html += "<option value=''+id>" + name + "</option>";
    }
    html += "</select>";
    div_subcategory.append(html);

This snippet updates your code to use different ids and appends the html all in one go which should be quicker.

Tushar Gupta - curioustushar · Accepted Answer · 2013-11-12 12:47:53Z

1

Try

change your success code

success: function (data) {
    var length = data.length;
    var div_subcategory = $('#subcategory');
    div_subcategory.html('');
    var select_append = "<select id='subcategory' name='data[Product][subcategory_id]'>";
    for (var i = 0; i < length; i++) {
        var id = data[i]['Subcategory']['id'];
        var name = data[i]['Subcategory']['name'];
        select_append += "<option value=''" + id + ">" + name + "</option>";
    }
    select_append += "</select>"
    div_subcategory.append(select_append);
}

create a variable select_append and concatenate all your code in that and append that variable in the end.

answered Nov 12, 2013 at 12:47

Tushar Gupta - curioustushar

57.2k24 gold badges106 silver badges110 bronze badges

Comments

marekful · Accepted Answer · 2013-11-12 12:48:25Z

1

Try

$(div_subcategory).find('select').append(...)

answered Nov 12, 2013 at 12:48

marekful

15.4k6 gold badges39 silver badges63 bronze badges

Comments

Sohil Desai · Accepted Answer · 2013-11-12 12:52:25Z

0

when you write this syntex

div_subcategory.append(
        "<select id='subcategory' name='data[Product][subcategory_id]'>"
    );

DOM automatically detects an HTML element like this

<select id='subcategory' name='xxx'></select>

and then you are appending other option elements after this

so solution is first make a string of an HTML and then append like

var html = "<select id='subcategory' name='data[Product][subcategory_id]'>";
    for (var i = 0; i < length; i++) {
        var id = data[i]['Subcategory']['id'];
        var name = data[i]['Subcategory']['name'];
        html += "<option value='' + id>" + name + "</option>";
    }
    div_subcategory.append(html);

answered Nov 12, 2013 at 12:52

Sohil Desai

2,9845 gold badges26 silver badges36 bronze badges

Collectives™ on Stack Overflow

Jquery append html weird behavior

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related