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>×</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