ansaurus

Question

Insert Comment Reply Form Into Page Using Jquery

Answer 1

+1 A:

To add to rodbv's answer you'll be adding the text "the html blah blah" inside the link that was clicked because you are using append. Change it to:

$(this).after("the html");

And it will write out the html after the link instead.

sanchothefat 2009-01-19 14:47:43

Thanks for the tip, still nothing comes up on the page. I am redirected to the top of the page as my anchor links to # (<a href="#">)

Joe 2009-01-19 14:54:05

Add a "return false;" at the end of your event.

The Wicked Flea 2009-01-19 15:15:41

Answer 2

+2 A:

$(document).ready(function(){
        $('a#reply').click(function() {
            $(this).after("the html blah");
            return false;
        });
});

You may need the 'return false;' in there to stop the page from reloading itself when you click on the link.

Corey Downie 2009-01-19 14:58:46

Thanks, this seems to make sense but im still getting redirected to the top of my page. My link is just <a href="#">.

Joe 2009-01-19 15:21:57

Linking to '#' will jump to the top of the page because it is looking for an anchor that will match it - in this case the first element (body) because it's a blank anchor. `return false` should circumvent that though. It can help to post a link to a test page or to paste the HTML above aswell.

sanchothefat 2009-01-19 17:25:50

Thanks for the help sancho but Corey found the problem in his post further down the page

Joe 2009-01-19 18:07:20

Answer 3

+1 A:

If none of the other suggestions are working, it could be your selector for the link is not working properly. In the example you provided you appear to be looking for a link like this:

<a id='reply' href='#'>add comment</a>

Is that correct? You didn't mention how you were generating the html, but I know with asp.net the server side id != the client side id and you would need to modify your selector like so:

$('a[id$=reply]')

In any case, here is a full example with html thats working fine for me:

<html>
    <head>
     <script type="text/javascript" src='scripts\jquery-1.2.6.min.js'></script>
    </head>
    <body>
        <div style='height:400px'>
            Space to demonstrate that clicking the link does not scroll the page.
        </div>
     <div id='main'>
      <a href='#' id='clicky'>here</a>
     </div>
    </body>
    <script>
     $(function(){
      $('a#clicky').click(function(){
                $(this).after('Hello There')
                return false;
            });
     });
    </script>
</html>

Corey Downie 2009-01-19 16:01:12

Hi, i tried your code and its working now, think it might have been too many of $(document).ready(function(){ but whatever it was you've been a great help. Thank you.

Joe 2009-01-19 16:23:59

Hi again Corey, i would be very grateful if you would help me again. I've found the function will only insert html for the first instance of of the a#id on the page. As every comment has a reply button this is a big problem, any ideas?

Joe 2009-01-22 13:20:12

It's not valid html to have multiple element's with the same ID. I would recommend changing that ID to a class, and then modify your selector accordingly $('a.className')

Corey Downie 2009-01-22 14:55:19

Thanks, thank fixed it!

Joe 2009-01-22 21:29:20

ansaurus

tags:

views:

answers:

Insert Comment Reply Form Into Page Using Jquery

related questions