Script Src is breaking page

Question

I dont know how to explain this, so ill do the best that I can.

I have a page that has some simple javascript on it:

<script language="javascript" type="text/javascript">

    function clearIt(txtbox, initVal) {
        alert('f');
        if (txtbox.value == initVal) {
            txtbox.value = '';
        }
    }

    function fillIt(txtbox, initVal) {
        if (txtbox.value == '') {
            txtbox.value = initVal;
        }
    }


</script>

The above code works fine, until I add:

<script src="Scripts/jquery-1.4.2.js" type="text/javascript" />

If its ABOVE the previous script block, CSS doesnt load.

If its BELOW the previous script block, my clearIt\fillIt functions dont work. Any idea's why referring to this script can cause my other stuff to bomb?

Answer 1

Try this instead -

 <script src="Scripts/jquery-1.4.2.js" type="text/javascript"></script>

Also, with the jQuery version you are using, you should have all of your CSS referenced first (before javascript).

This is from the jQuery Enlightenment book -

As of jQuery 1.3, the library no longer guarantees that all CSS files are loaded before it fires the custom ready() event. Because of this change in jQuery 1.3, you should always include all CSS files before any jQuery code. This will ensure that the browser has parsed the CSS before it moves on to the JavaScript included later in the HTML document. Of course, images that are referenced via CSS may or may not be downloaded as the browser parses the JavaScript.

Previously on Stackoverflow - Why don’t self-closing script tags work?

Why don't self-closing script tags work?