html javascript - onclick() reference error: function not defined

Question

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= submit to <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.com/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.

@Zange-chan oh sorry I might have forgot to type it in. but it's there so it's not that — Reiion
– Reiion, Commented Oct 19, 2016 at 1:55
I don't see any problem except a missing " in the button's name attribute. 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 the onclick. — nnnnnn
– 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
– 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
– Reiion, Commented Oct 19, 2016 at 2:16

Reiion · Accepted Answer · 2016-10-19 02:11:55Z

2

Here'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.

answered Oct 19, 2016 at 2:11

Reiion

9433 gold badges20 silver badges37 bronze badges

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

4 Comments

nnnnnn Over a year ago

That explanation doesn't really make sense for code called by a click event (unless the page loads so slowly that the user sees the control and clicks it before the rest of the page loads). For the code shown it shouldn't make any difference: jsfiddle.net/asa2rfeh

Reiion Over a year ago

@nnnnnn actually you are right I also tried it from a blank html just to test. It also weirded me out... it just kept on saying the Reference Error: loadData is not defined. Although the fix worked, I really want an explanation why in my case it wouldn't.

Craftein Over a year ago

@Reiion assuming you have more codes than what you've posted, you probably have some javascript error before where the function is defined.

Reiion Over a year ago

@Craftein yeah most probably but I can't really explain why it won't work at the bottom. The browser console tells nothing of any error too

fmello · Accepted Answer · 2016-10-19 03:37:08Z

0

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";
    }
  });
}

edited Oct 19, 2016 at 3:37

answered Oct 19, 2016 at 2:04

fmello

5632 silver badges9 bronze badges

1 Comment

Reiion Over a year ago

sorry I had to edit that again in the post. my code has the dot in ajax but still doesn't work :(

Collectives™ on Stack Overflow

html javascript - onclick() reference error: function not defined

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related