Given my html file, the console gives an error code:
Reference Error: loadData not defined.
Based from other answers I've rechecked mine where,
- My function is declared just before the
</body>, - I included the javascript library at the
<head></head>; - and even changed my
<input type= submitto<input type= button - and if it helped, I tried deleting my form tags where it is enclosed (but this is for another question regarding query strings).
Here's how it would look like now:
<head>
<script src = "//ajax.googleapis/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
</head>
<body>
{%for document in documents %}
<li> {{document.filename}}
<input type="button" id="{{ document.id }}" onclick="loadData(this.id)" name = "load-data" value="Add to Layer"/>
</li>
{%endfor%}
<script type ="text/javascript">
function loadData(documentId){
$.ajax({
url:"/load",
data: {'documentId': documentId},
type: 'GET',
success: function(){
window.location.href = "http://127.0.0.1:8000/url/locations";
}
});
}
</script>
</body>
I can't seem to find an explanation why the function won't fire.
Given my html file, the console gives an error code:
Reference Error: loadData not defined.
Based from other answers I've rechecked mine where,
- My function is declared just before the
</body>, - I included the javascript library at the
<head></head>; - and even changed my
<input type= submitto<input type= button - and if it helped, I tried deleting my form tags where it is enclosed (but this is for another question regarding query strings).
Here's how it would look like now:
<head>
<script src = "//ajax.googleapis./ajax/libs/jquery/1.10.1/jquery.min.js"></script>
</head>
<body>
{%for document in documents %}
<li> {{document.filename}}
<input type="button" id="{{ document.id }}" onclick="loadData(this.id)" name = "load-data" value="Add to Layer"/>
</li>
{%endfor%}
<script type ="text/javascript">
function loadData(documentId){
$.ajax({
url:"/load",
data: {'documentId': documentId},
type: 'GET',
success: function(){
window.location.href = "http://127.0.0.1:8000/url/locations";
}
});
}
</script>
</body>
I can't seem to find an explanation why the function won't fire.
Share Improve this question edited Oct 19, 2016 at 2:16 Reiion asked Oct 19, 2016 at 1:41 ReiionReiion 9433 gold badges20 silver badges37 bronze badges 5-
1
Your
<script>tag doesn't close your javascript function. – Cookie Ninja Commented Oct 19, 2016 at 1:51 - @Zange-chan oh sorry I might have forgot to type it in. but it's there so it's not that – Reiion Commented Oct 19, 2016 at 1:55
-
I don't see any problem except a missing
"in the button'snameattribute. Your point 1 shouldn't matter because regardless of where the script is it will have been run by the time the user actually clicks on the buttons. Points 2-4 shouldn't matter at all as far as whether the function can be called from theonclick. – nnnnnn Commented Oct 19, 2016 at 2:02 - @nnnnnn that's another typo I got there sorry. I'm using vm and can't copy and paste the code just because I can't fix my proxy to use the browser directly from there. anyhow, I the placement actually mattered. I went to put it up at the head and then it worked. – Reiion Commented Oct 19, 2016 at 2:15
- @nnnnnn but if you could explain to me further why it should've worked I would be glad to hear the explanation please. – Reiion Commented Oct 19, 2016 at 2:16
2 Answers
Reset to default 2Here's the fix (as my friend explained):
I had to put my script up in the <head> tags.
Why? Because the document is already loaded before the script gets to be.
If I want to retain it at the bottom it had to look something like this:
$(document).ready(
$('input').onclick(function(){})
After putting it up the code works.
I've tested your html and everything seems to be working properly. The only error that I found was that $ajax is not a function. It is missing a dot $ajax => $.ajax
Try using:
function loadData(documentId){
$.ajax({
url:"/load",
data: {'documentId': documentId},
type: 'GET',
success: function(){
window.location.href = "http://127.0.0.1:8000/url/locations";
}
});
}