Monday, May 20, 2024
 Popular · Latest · Hot · Upcoming
67
rated 0 times [  73] [ 6]  / answers: 1 / hits: 8892  / 10 Years ago, mon, april 7, 2014, 12:00:00

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


More From » jquery

 Answers
2

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.)


[#46230] Sunday, April 6, 2014, 10 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
anabeldaliad

Total Points: 552
Total Questions: 107
Total Answers: 120

Location: Hungary
Member since Mon, Feb 21, 2022
2 Years ago
;