Using a separate .js file to handle Jquery

10,525

Solution 1

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>

Solution 2

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.

Solution 3

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

Share:
10,525
Admin
Author by

Admin

Updated on June 04, 2022

Comments

  • Admin
    Admin almost 2 years

    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>-->
    

    HTML:

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