CODEWITHSUNDEEP
javascriptphpjqueryhtml
faisal abdulai
faisal abdulai

Reputation: 3819

Loading JQuery Library Gives Error

trying my hands on a php javasript and jQuery tutorials and I have the following error.the tutorials can be found here

below is the error from the chrome browser console.

 Failed to load resource: net::ERR_FILE_NOT_FOUND
 auto-complete.js:2 Uncaught ReferenceError: $ is not defined

the html code is below.

  <!DOCTYPE html>
  <html>
     <head>
         <title>Auto-complete tutorial</title>
         <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
    </script>
         <script src="auto-complete.js"></script>
     </head>
     <body>
         <input type="text" value="" placeholder="Search" id="keyword">
     </body>
 </html>

Javascript:

  var MIN_LENGTH = 3;
  $(document).ready(function() {

      $("#keyword").keyup(function() {
          var keyword = $("#keyword").val();
          if (keyword.length >= MIN_LENGTH) {
              $.get( "auto-complete.php", { keyword: keyword } )
                .done(function( data ) {
                  console.log(data);
                });
           }
       });

  });

this is the php code

  <?php
  $data = array("alpaca", "buffalo", "cat", "tiger");
  echo json_encode($data);
  ?>

please any suggestion. this is the new error I am getting from loading the page

  XMLHttpRequest cannot load file:///C:/Users/Faisal/Desktop/auto_1/auto- 
     complete.php?keyword=abc. Cross origin requests are only supported for 
    protocol schemes: http, data, chrome, chrome-extension, https, chrome-
    extension-resource.k.cors.a.crossDomain.send @ 
    jquery.min.js:4n.extend.ajax @ jquery.min.js:4n.(anonymous function) @
    jquery.min.js:4(anonymous function) @ auto-complete.js:6n.event.dispatch 
    @ jquery.min.js:3r.handle @ jquery.min.js:3
   jquery.min.js:4 XMLHttpRequest cannot load 
   file:///C:/Users/Faisal/Desktop/auto_1/auto-complete.php?keyword=abcd. 
   Cross origin requests are only supported for protocol schemes: http, data,
  chrome, chrome-extension, https, chrome-extension-
  resource.k.cors.a.crossDomain.send @ jquery.min.js:4n.extend.ajax @ 
  jquery.min.js:4n.(anonymous function) @ jquery.min.js:4(anonymous function)
  @ auto-complete.js:6n.event.dispatch @ jquery.min.js:3r.handle @ 

jquery.min.js:3jquery.min.js:4 XMLHttpRequest cannot load
 file:///C:/Users/Faisal/Desktop/auto_1/auto-complete.php?keyword=abcde. 
       Cross origin requests are only supported for protocol schemes: http, 
     data, 
  chrome, chrome-extension, https, chrome-extension-
  resource.k.cors.a.crossDomain.send @ jquery.min.js:4n.extend.ajax @
  jquery.min.js:4n.(anonymous function) @ jquery.min.js:4(anonymous function) 
  @ auto-complete.js:6n.event.dispatch @ jquery.min.js:3r.handle @ 
 jquery.min.js:3

 jquery.min.js:4 XMLHttpRequest cannot load 
  file:///C:/Users/Faisal/Desktop/auto_1/auto-complete.php?keyword=abcdef.
   Cross origin requests are only supported for protocol schemes: http, data,
   chrome, chrome-extension, https, chrome-extension-
   resource.k.cors.a.crossDomain.send @ jquery.min.js:4n.extend.ajax @ 
   jquery.min.js:4n.(anonymous function) @ jquery.min.js:4(anonymous 
   function) @ auto-complete.js:6n.event.dispatch @ jquery.min.js:3r.handle @
    jquery.min.js:3

Upvotes: 1

Views: 2595

Answers (2)

David
David

Reputation: 218877

This part of the error says it all:

cannot load file:///C:/Users/Faisal/Desktop/auto_1/auto-complete.php?keyword=abc

You're opening your page from the file system, not from a web server. This is going to drastically limit what you can do in terms of, well, web stuff. JavaScript isn't going to allow you to make AJAX requests from a file:// protocol, mostly because "files" don't respond to HTTP requests.

You're also not going to be able to use implicit protocols to reference external resources:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Your best bet is to set up some kind of simple web server on your workstation for testing your code. Otherwise you're going to be building in workarounds for your code which won't be needed in a hosted environment, so what you're testing wouldn't be what you end up deploying.

Upvotes: 2

JDupont
JDupont

Reputation: 1352

The error that you are getting is caused by your jQuery library not being referenced in the correct location and your custom script file 'auto-complete.js' not being referenced correctly.

The $ is shorthand for jQuery objects. It is the same as writing:

jQuery(document).ready(function(){
...
};

In most, if not all cases, you will want to reference your jQuery library after the content on your page and before any custom scripts that will use jQuery. (in this case, the '$')

Place:

<script  
  src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<script src="auto-complete.js"></script>

right before your closing body tag and ensure that your script src for auto-complete.js is pointing to the correct location. For example, if your auto-complete.js is in a subdirectory named 'Scripts' then your script reference should be:

<script src="/Scripts/auto-complete.js"></script>

Also, I am assuming that you're document.ready after the closing html tag is in auto-complete.js or another script. If not, be sure your wrap it in a script and place it after jquery.min.js has been referenced.

Upvotes: 1

Related Questions