Aha! I figured it out. It wasn't the cloning vs. moving thing I was talking
about at all. Sorry - I was just mixed up about that.
Here's the real problem. Take a look at the content of your "respond" DIV.
At the end of it you have a <script> element that does a document.write()
call.
One of the things that .insertAfter() and the other similar jQuery
operations do is *run all the scripts* in the elements they are inserting.
So, when you try to insert a new copy of this DIV, jQuery runs that script.
But you can't - or shouldn't - call document.write() after the document has
already been closed. You can only call document.write() during the initial
page load, not when you are running JavaScript code later on when the user
interacts with the page.
What happens when you do this is that the browser re-opens the document,
which clears out all of its existing content! That's why the document is
blanking, and why $ is disappearing.
I'm not sure what that <script> element is for, but as a quick test, if you
remove it (and just for good measure, remove the <noscript> right above it
too), I'm sure the immediate problem will go away.
-Mike
> From: Betty
>
> I checked the jQuery official documents and it says that starting with
> 1.2.2
> $("#foo").remove().appendTo("#bar");
> should be written as
> $("#foo").appendTo("#bar");
> (http://docs.jquery.com/Manipulation/remove#expr)
>
> I assume appendTo() and insertAfter() follow the same rules.
> It seems like they do move the object instead of copy it? I'm
> confused now...
>
> On Jan 3, 3:31 pm, Betty <xlu.2...@gmail.com> wrote:
> > Thank you, Mike. You're so patient and helpful!
> > Apparently I didn't understand insertAfter() well enough. I
> thought it
> > would move the object, not duplicate the object.
> > Is there a function in jQuery that simply moves an object? Or, if I
> > remove() the object, do I need to add() it again if I want
> to use it
> > some time later?
> > Again, thank you very much!
> >
> > On Jan 3, 1:28 pm, "Michael Geary" <m...@mg.to> wrote:
> >
> >
> >
> > > 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!
>
