Tutorial :Using a separate .js file to handle Jquery


I'm new to Jquery and am running into an issue when trying to put my JQuery scripts into a separate file in my project folder. I'm working with a plug-in called Corner. Here is the relevant part of the HTML file

<script type="text/javascript" src="scripts/jquery-1.3.2.min.js"></script>  <script type="text/javascript" src="scripts/jquery.corner.js"></script>  <script type="text/javascript" src="scripts/myJQuery.js"></script>  

Commenting out the above line, and uncommenting the script below makes the plug in work. The contents of myJQuery.js are the exact script below (excluding script tags).

    <!--<script>          $(document).ready(function()           {                  $("div.container").corner();              $("div.linkList").corner();        })      </script>-->  


<body>      <div class ="container">          <div class ="header"></div>      <div class ="linkList"></div>      </div>  </body>  

Any ideas on why the same code is working one way (in HTML file), but not the other way (separate .js file)? Thanks in advance.


Are you saying that the code:

$(document).ready(function()               {                              $("div.container").corner();                  $("div.linkList").corner();        })  

Works when it is inline, but not in an external file?

Is the above code the only code in myJQuery.js? If it isn't, make sure there are syntax errors in the file keeping the code from firing. I created an example of what you have above with the code in a separate file and it works correctly. Check out http://thetimbanks.com/demos/help/separate/ and view the source if you want to see the code.


If working from a PC, check that you saved your file in ANSI encoding format. If it is in UTF-8 format make sure you have specified that in your script tag, i.e.:

<script type="text/javascript" src="scripts/myJQuery.js" charset="UTF-8"></script>  


Make sure "jquery-1.3.2.min.js" is called before the other javascript files.


The usual cause is a slip up in file naming or permissions.

Check your web server logs for errors.


The problem i see is the HTML comments you use <!-- -->..

if the are put inside a js file they would cause the file to not load since they are not Javascript comments but HTML ..

so if the code in the js file is

<!--                  $(document).ready(function()                   {                                  $("div.container").corner();                      $("div.linkList").corner();            })  -->  

then do it like this

//<!--                  $(document).ready(function()                   {                                  $("div.container").corner();                      $("div.linkList").corner();            })  //-->  


As long as you use JQuery API function, e.g. $(document).ready(); You need call jquery-1.3.2.min.js before your custom js file including JQuery API function

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Next Post »