Do you notice that the page also blanks out when you get the error? Why is
that?
Try this:
Open your page and open the Firebug panel.
Now click the button that provokes the error. Then click on the filename in
the Firebug error message (my.etc.js line 68). You should get the source
code for your jQuery.ajax function.
The error is happening in the beforeSend callback. Set a breakpoint on the
line *before* the error, line 67, by clicking on the line number.
Now click the Back button, then click the button that provokes the error
again. It should stop on line 67.
The page still looks OK.
Click in the yellow "New watch expression" bar and type $ and the Enter key.
You should get a function listed in the watch window, and if you expand it,
it will be seen to be the jQuery constructor.
Now step over the code in line 67. (On Windows, the F10 key will do it. Or
on any platform, use the Step Over icon on the right side of the Firebug
panel.)
Boom. The page blanks out, and the $ in the watch window turns into a
reference error.
Clearly, the code on page 67 has trashed your document.
Why?
Well, the code in line 67 is:
$('#respond').insertAfter($("div.comment"));
That's taking an existing DOM element and inserting it in a second place in
the DOM. This is a Very Bad Thing. A DOM node can't be in two places at
once.
Try repeating the experiment (you may need to restart Firefox first if it's
badly trashed), and when you get to line 67, instead of stepping over it,
enter either of these two statements in the Firebug console:
$('#respond').remove().insertAfter($("div.comment"));
Now you'll find that the document is not trashed; either statement executes
successfully.
This is because the statements avoid having the same node appear in two
places. The first one removes the node from its current location before
inserting it; the second one clones the node.
I'm not sure which of these is what you want (if indeed either is), but this
should help point you toward a solution.
Note that the second version of the code:
$('#respond').clone().insertAfter($("div.comment"));
leaves the document in a somewhat invalid state, because there are now two
elements with the same ID (respond). But that's not a document-trashing
error. It's not recommended, but browsers generally let you get away with
it.
-Mike
> From: Betty
>
> I get this error in the Firefox error console: "$ is not defined".
> it points me to line
> $("div#respond>h3").html("Reply to");
>
> I'm sure I've set jQuery properly because it works fine in
> other browsers and the other jQuery effects I use can work in
> Firefox. Only this part does not work. Actually, it works on
> my local test computer, but if I upload the same file to the
> server, this part gets this error. I can't understand why.
>
> If you need an example, it's <a href="http://myfairland.net/mizong/
> #comments">http://myfairland.net/mizong/#comments</a>. The
> site is in Chinese. If you put the mouse on the comment part
> and click the button that appears, with the Chinese word that
> means "reply", you can get the error in Firefox.
>
> This error really frustrates me. If you can help me, I'll
> appreciate you very much! Many thanks!
>
