getElementByID failed with Bootstrap Modals

Question

I have following issue with JS getElementByID: I have a .php file (kalender.php) with a Bootstrap Modal. So after a Button (#showModalDownload) has been clicked the modal shows up and should show some content. But first a JS Script is triggered wich should fill the modal with some content. Here is my code: Kalender.php

    <div class="modal fade" id="icsImport">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title">Absencen Herunterladen</h4>
                    </div>
                    <div class="modal-body">
                        <p>Bitte wählen Sie die zu exportierenden Absenzen aus</p>
                        <div id="downloadContent">

                        <div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Abbrechen</button>
                        <button type="button" class="btn btn-info">Herunterladen</button>
                        </form>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
<script src="javascripts/main.js"></script>
</body>

main.js

$('#showModalDownload').click(function(){
$("#icsImport").modal('show');
$.ajax({
    type: "POST",
    url: "login.php",
    data: {"export": "true"},
    dataType: "json",
    success: function(data){
        var response=(data);
        var container = document.createElement('div');
        var checkboxContainer = document.createElement('div');
        checkboxContainer.setAttribute('class', 'checkbox');
        var label;
        var checkBox;

        for(i=0;i<response.length;i++){
            label = document.createElement('label');
            checkBox = document.createElement('input');
            checkBox.type = "checkbox";
            label.appendChild(checkBox);
            label.innerHTML = "test";
            // label.innerHTML = response['date'][i] + " " + response['typ'][i];

            checkboxContainer.appendChild(label);
            container.appendChild(checkboxContainer);
        }

        $(document).ready(function(){
            downloadContent = document.getElementById('#downloadContent');
            downloadContent.appendChild(container);
        });
    }
});

});

After click my Button the Modal shows up, but as I can see in my Chrome console, following error occurs: Uncaught TypeError: Cannot call method 'appendChild' of null

First I thought it's because somehow the js runs before my modal have been created. But the javaScript include is after my modal right before the tag and I've put my getElementById in the

$(document).ready(function()

area.

Can someone please help me?

Thanks allot

Yanick

Answer 1

The value you pass into getElementById is just the id , not a selector. You don't put the # in front of it.

// No # here ------------------------------v
downloadContent = document.getElementById('downloadContent');
downloadContent.appendChild(container);

But as you're using jQuery, why not...use jQuery?

$("#downloadContent").append(container);

(Other aspects of that success handler can also take advantage of jQuery better, but that's the bit that probably wants to the most, not least because jQuery works around bugs in getElementById on older versions of IE.)