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
– CodeToad, Commented Jun 21, 2016 at 13:44
Dont declare variables using $. That is PHP syntaxt. Use var divSelect = instead. — Emil S. Jørgensen
– Emil S. Jørgensen, Commented Jun 21, 2016 at 13:45
Try creating the option like this: $("<option>", ...) - see stackoverflow.com/questions/740195/… — zooglash
– zooglash, Commented Jun 21, 2016 at 13:50
FYI, select & option elements are not 'divs'. A div is a html element, like select & option but has entirely different uses. — Anth12
– Anth12, Commented Jun 21, 2016 at 13:51

rick · Accepted Answer · 2016-06-21 13:54:42Z

1

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

answered Jun 21, 2016 at 13:54

rick

1,90514 silver badges23 bronze badges

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

Comments

wmash · Accepted Answer · 2016-06-21 13:55:42Z

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, 2016 at 13:55

wmash

4,1924 gold badges38 silver badges74 bronze badges

Comments

Hozeis · Accepted Answer · 2016-06-21 13:52:20Z

0

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

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

answered Jun 21, 2016 at 13:52

Hozeis

1,76218 silver badges39 bronze badges

Comments

Mairaj Ahmad · Accepted Answer · 2016-06-21 13:57:57Z

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, 2016 at 13:57

answered Jun 21, 2016 at 13:52

Mairaj Ahmad

14.6k2 gold badges29 silver badges43 bronze badges

5 Comments

Adrian Hansson Over a year ago

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.

Mairaj Ahmad Over a year ago

Simply run this from console $("#product-list"); to see if it finds the select

Adrian Hansson Over a year ago

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.

Mairaj Ahmad Over a year ago

Can u see the console if there is any error because this worked for me perfectly.

Adrian Hansson Over a year ago

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.

Collectives™ on Stack Overflow

Javascript JQuery append does not work

4 Answers 4

Comments

Comments

Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related