$ not defined error in jquery

Question

<script type= "text/javascript">


   //<!CDATA[[

$(init);

function init() {
 $("#heading").load("head.html");
 $("#menu").load("menu.html");
 $("#content1").load("story.html");
 $("#content2").load("story2.html");
 $("#footer").load("footer.html");
};

  //]]>

</script>

Answer 1

For some reason jQuery is not loading.

Check your path is it really src = "jquery-1.4.2.min.js" ? or could it be: src = "jquery/1.4.2.min.js"?

Make sure your jQuery is being loaded. Go to the source page and make sure you can read it. To debug use the full URL of the source instead of just a relative path. Then if that works, change it to a relative path and see if it still works.

---

Your first <script> tag is malformed:

This is malformed:

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

It should read:

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

(note the > right before the </)

A clue to the presence of this type of problem is often the lack of syntax highlighting in your IDE or editor. In fact note the difference in the Stack Overflow syntax highlighting between the two code snippets above.

---

Also CDATA should be

//<![CDATA[

and not:

//<!CDATA[[

Answer 2

Make sure you reference your jQuery.js file correctly, Test by adding an alert('HIT!'); in you jQuery file if you are unsure.

Once you have that sorted, do the following:

<script type= "text/javascript">

$(function(){
 $("#heading").load("head.html");
 $("#menu").load("menu.html");
 $("#content1").load("story.html");
 $("#content2").load("story2.html");
 $("#footer").load("footer.html");});

</script>

OR if you want to use your function,

function init() {
 $("#heading").load("head.html");
 $("#menu").load("menu.html");
 $("#content1").load("story.html");
 $("#content2").load("story2.html");
 $("#footer").load("footer.html");
};

And call the init() just before the closing body tag.

Answer 3

Make sure you don't use jQuery.noConflict(), this removes the $ alias to avoid conflicts with other JavaScript libraries.