Thank you, Mike. I don't whether I can change the #respond id. Because it contains the comment form, it may not work properly if the id is changed. Maybe I have made it too complicated. What I want is simply this (I'm sure you've seen it on other sites, or perhaps you've even done that yourself): a comment list, with the comment form at the end If the user clicks the reply button at a comment node, the comment form will be placed under that comment node. If the user clicks at another comment node, the comment form will be moved to that other node. If the user clicks "cancel", the comment form will be put back to the bottom.
On Jan 3, 4:07 pm, "Michael Geary" <m...@mg.to> wrote: > Glad to help, Betty. > > But I think I may have been confused too. (Actually, I *know* I'm confused > at this point.) > > Here's a post from Dave Methvin that explains some of the moving/cloning > behavior: > > http://groups.google.com/group/jquery-en/msg/85833f44e69e8c6c > > I'm not sure from Dave's description just what happens in the case we were > discussing. > > Anyway, if you want to play it safe, and if you want to be able to copy the > same element multiple times, there are a couple of ways to do it. One would > be to clone and insert it - and I would change the element ID while you're > at it since you shouldn't have two elements with the same ID. Going back to > your original code, you might do something like: > > var idnum = 0; // put this line in the global scope > > $('#respond') > .clone() > .attr({ id: 'respond' + (++idnum) }) > .insertAfter($('div.comment')); > > Or, instead of cloning an element at all, you could create a fresh copy from > HTML text in your JavaScript code each time. Your #respond DIV is fairly > lengthy, so you may not want to do that here, but it's a good way to do > simpler elements. > > -Mike > > > > > From: Betty > > > 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!
