Javascript JQuery append does not work

Question

I am attempting to dynamically add some content to some content that was just dynamically added. I want to put a bunch of OPTION items into a SELECT that I just added. The SELECT is added along with some code from an external .php file (see below). This div appears just fine. However, the contents that I attempt to add inside the SELECT does not appear. My SELECT is simply empty. I get no errors. The console output in the code below checks out and prints what I expect it to.

Here is the Javascript code:

$.get("test-new-product-modal.php", function(data){
    $(".modal-body").html(data);
});
$divSelect = $("#product-list");
for(var i = 0; i<(arrayProductTypes.length); i++){
    $divOption = $("option", {'value' : i});
    $divOption.html(arrayProductTypes[i][0]);
    $divSelect.append($divOption);
    console.log("Product ID at "+i+" is: "+arrayProductTypes[i][0]);
}

Here is the .php file that I add HTML from:

<div class="container-fluid no-padding">
    <div class="col-sm-6 col-md-6 col-lg-6">
        <h4>Välj en produkt.</h4>
        <select id="product-list" class="form-control">
            <!-- <option>DRA</option>
            <option>DRB</option> -->
        </select>

        <div class="divider-line"></div>

    </div>
    <div class="col-sm-6 col-md-6 col-lg-6">
        <p class="product-add-description">Text.</p>
    </div>
</div>

can you create a fiddle or plunkr that reproduces the issue? — CodeToad, Jun 21 '16 at 13:44
Dont declare variables using `$`. That is PHP syntaxt. Use `var divSelect = ` instead. — Emil S. Jørgensen, Jun 21 '16 at 13:45
FYI, `select` & `option` elements are not 'divs'. A `div` is a html element, like `select` & `option` but has entirely different uses. — Anth12, Jun 21 '16 at 13:51

score 1 · Accepted Answer · answered Jun 21 '16 at 13:54

Try jQuery add() method

$.get("test-new-product-modal.php", function(data){
    $(".modal-body").html(data);
});
$divSelect = $("#product-list");
for(var i = 0; i<(arrayProductTypes.length); i++){
    $divOption = $("option", {'value' : i});
    $divOption.html(arrayProductTypes[i][0]);
    $divSelect.add($divOption);
    console.log("Product ID at "+i+" is: "+arrayProductTypes[i][0]);
}

you can find the doc here

score 1 · Answer 2 · answered Jun 21 '16 at 13:55

1

Working jsFiddle of something similar to what you are expecting:

It's a lot simpler to add in a HTML element like this:

.append('<option value="' + array[i] + '">' + array[i] + '</option>');

answered Jun 21 '16 at 13:55

wmash

4,032
3
31
69

score 0 · Answer 3 · answered Jun 21 '16 at 13:52

0

I believe its how you declare your option object try this:

$divOption = $("<option>").attr('value',i);

answered Jun 21 '16 at 13:52

Hozeis

1,542
15
36

Mairaj Ahmad · Answer 4 · 2016-06-21T13:57:57.430

0

You are not adding options correctly. If you want to add options like jquery object you can do this

for (var i = 0; i < (arrayProductTypes.length) ; i++) {
     $divOption = $('<option></option>').val(i).html(arrayProductTypes[i][0])
     $divSelect.append($divOption);
     console.log("Product ID at " + i + " is: " + arrayProductTypes[i][0]);
 }

This line $divOption = $("option", {'value' : i}); doesn't return the option object instead it is returning an empty array so you need to use

$('<option></option>').val(i).html("somehtml") to return an option.

edited Jun 21 '16 at 13:57

answered Jun 21 '16 at 13:52

Mairaj Ahmad

14,434
2
26
40

This didn't work either :/ I do believe there is something wrong with finding the SELECT element. Calling a .remove on it does not remove it. But if I try the exact same on another element (not added from the external file) it works. – Adrian Hansson Jun 21 '16 at 14:09
Simply run this from console `$("#product-list");` to see if it finds the `select` – Mairaj Ahmad Jun 21 '16 at 14:11
Hm yeah, it does find the element. I guess that's not it then. Now I've tried every suggestion posted to my question and none of them work. – Adrian Hansson Jun 21 '16 at 14:13
Can u see the console if there is any error because this worked for me perfectly. – Mairaj Ahmad Jun 21 '16 at 14:14
No errors in he console, no. I've done this type of dynamic content a lots before on the same page with no error. It simply stops workning now that I am looking for an id that only exists in an external .php file that I copy and paste the data of using JS. – Adrian Hansson Jun 21 '16 at 14:21

Javascript JQuery append does not work

4 Answers4