Problems Getting jQuery to Work in External js File

Question

I have just started messing with jQuery and have had luck getting it to work within actual aspx and html files, but I'm now trying to get it working in an external js file.

In my html file in the head I have:

 <!--Declare jQuery files-->
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1-vsdoc.js"></script>

<!--Declare external java files-->
<script type="text/javascript" src="javascript/SiteFunction.js"></script>

I have tried adding this to avoid multiple document ready instances, it hasn't effected anything either way, having in or not:

<script type="text/javascript">
    $(document).ready(function() { });
</script>

In my external file I have (it is in an if statement and my function just literally skips over all the jQuery .append and .animate stuff as if it were not even there):

        $(document).ready(function() {
            $('<p>Test</p>').append("#" + newPage);
        });

        jQuery(function($) {
            alert(newPage);
            $('<p>Test</p>').appendTo(newPage);

            $(newPage).animate({ left: '0px' }, 2000, function() {
                // Animation complete.
                alert("animated newPage");
            });

            $(currentPage).animate({ right: '0px' }, 2000, function() {
                // Animation complete.
            });
        });

The first jQuery append is just a simple test to see if I could do something simple. This is all contained in an if statement. I am not receiving any errors and the code is preceding through the first jQuery ready, going into the jQuery function, my alert(newPage) is working, but my alert("animated newPage") is not so I know that I am not even entering into any of the jQuery functions.

If my terminology is incorrect, please forgive me, again I have just started working with Query over the past 3-4 days.

My variables, newPage and currentPage are the id's of divs contained in the main html page. I am accessing and manipulating them fine with javascript in the same external js file.

I tried with the first jQuery .append to see if I needed to add the "#" before my div id to reference as a string.

I've tried with the rest wrapping them in the jQuery(function($) {});. Leaving them as just stand alone, which worked directly from my html file.

Example of working code from html file. Same setup in the head of the file

                       $(myContent).animate({
                        width: '0px'
                    }, mySpeed, function() {
                        // Animation complete.
                    });

                    $('#contentH4').animate({
                        width: myLeft
                    }, mySpeed, function() {
                        // Animation complete.
                    });

So, I'm at a complete loss!

Answer 1

I use ASP.NET with nested MasterPages and this got to be a real issue for me. I was getting document.ready's lost all the time. I figured I needed a better way and what I came up with was creating an array to hold all of my functions that I wanted to call, and in one document.ready, loop through that array, calling each function in the order in which it was added. If you use many external files that are included at different points for different reasons, this will allow you to do that without any hassle:

<!-- your external javascript file -->
<script type="text/javascript">

    // create array to hold a list functions to run once
    var oneTimeFunctions = new Array;


    // create variable to store first function
    var test1 = function() { $('<p>Test</p>').append("#" + newPage); };

    // add first function to the end of the array
    oneTimeFunctions[oneTimeFunctions.length] = test1;


    // create variable to store second function
    var test2 = function() {

        alert(newPage);
        $('<p>Test</p>').appendTo(newPage);

        $(newPage).animate({ left: '0px' }, 2000, function() {
            // Animation complete.
            alert("animated newPage");
        });

        $(currentPage).animate({ right: '0px' }, 2000, function() {
            // Animation complete.
        });

    };

    // add second function to the end of the array
    oneTimeFunctions[oneTimeFunctions.length] = test2;


    // call document.ready only once
    $(function(){

        // call each function that was added to the oneTimeFunctions array
        $.each(oneTimeFunctions, function(index, func) { func(); });

    });

</script>

Now, like I said, you can split this up into multiple external files. This just shows it how it would be processed in order. You just need to create the array first, then create your functions and add them to the array in your various external files, and lastly, run the document.ready portion that loops through calling each function.

Answer 2

When linking external javascript/jquery files, the type="" does not have to be declared.

Also have them load at the bottom of all body content for better load times.

Answer 3

First, you should only include jQuery once. Those files you're linking to all have the same JS code (except one is minified and the other has additional comments).

This is all you need:

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js"></script>

Also, it would help to see where you're defining newPage and currentPage. If you could link to a demo page that would be ideal.

Also, this does nothing:

<script type="text/javascript">
    $(document).ready(function() { });
</script>

And if newPage is simply an ID, then this:

$('<p>Test</p>').appendTo(newPage);

Should be this:

$('<p>Test</p>').appendTo('#' + newPage);