admin管理员组

文章数量:1394157

Given my html file, the console gives an error code:

Reference Error: loadData not defined.

Based from other answers I've rechecked mine where,

  1. My function is declared just before the </body>,
  2. I included the javascript library at the <head></head> ;
  3. and even changed my <input type= submit to <input type= button
  4. 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,

  1. My function is declared just before the </body>,
  2. I included the javascript library at the <head></head> ;
  3. and even changed my <input type= submit to <input type= button
  4. 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.

  • javascript
  • jquery
  • html
  • ajax
  • onclick
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'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 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
Add a ment  | 

2 Answers 2

Reset to default 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.

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

本文标签： jqueryhtml javascriptonclick() reference error function not definedStack Overflow

版权声明：本文标题：jquery - html javascript - onclick() reference error: function not defined - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744708043a2620959.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。