6

I have the following line of code in a link on my webpage:

<a href="javascript:$('#comment_form').toggle('normal')" title="Comment on this post">

This produces a link that should pop open a hidden form. It works on Safari, but in Firefox, I just get an almost-empty page with nothing but the following text:

[object Object]

I'm sure this has something to do with the value returned by the jQuery function, but I'm not sure how to fix the call to the JavaScript function so it works in Firefox, too.

Peter Mortensen
  • 28,342
  • 21
  • 95
  • 123
mipadi
  • 359,228
  • 81
  • 502
  • 469

4 Answers4

22

For the love of... 

<script type='text/javascript'>
jQuery(function($){   # Document ready, access $ as jQuery in this scope
    $("a#comment").click(function(){  # bind a click event on the A like with ID='comment'
         $('#comment_form').toggleClass('normal');  # Toggle the class on the ID comment form
         return false;  # stop the href from being followed. 
    }); 
});
</script>
....
<a id="comment" href="/you_need_javascript_sorry.html" title="Comment on this post">
   [Comment]
</a>

Please, don't embed JavaScript like you just did in the HTML.

If you embed JavaScript in HTML like that, you :

  1. Make messy code.
  2. Have weird problems like you just did with hacks to get around it
  3. Users trying to middle click links will get sent nowhere.
  4. Maintaining the executable part of your code interspersed in page links will end in failure.
  5. Don't gracefully degrade when users don't have javascript
  6. Become problematic when you start needing to do stuff like store quotes more than 2 layers deep.
Kent Fredric
  • 54,014
  • 14
  • 101
  • 148
8

Try:

<a href="javascript:void($('#comment_form').toggle('normal'))" title="Comment on this post">

Containing the script inside a void() will suppress the browser from displaying the result of the execution.

Update

I directly answered the original question, with the solution that would take the least amount of effort. As it's mentioned in some of the other answers here, I personally would keep my markup and JavaScript separate and dynamically add an onclick handler instead of embedding the script inside the href attribute.

Ates Goral
  • 126,894
  • 24
  • 129
  • 188
2

Tried moving what's in href to onclick. In general, you should avoid JavaScript code in the href attribute.

Peter Mortensen
  • 28,342
  • 21
  • 95
  • 123
John Sheehan
  • 74,152
  • 28
  • 154
  • 191
  • Agreed; if you absolutely must have javascript in the a tags themselves (usually a bad idea in itself), at least put it in the onclick attribute. A better way would probably be to bind the click event to the links with jQuery in a separate script tag/file. – Steve Losh Jan 12 '09 at 17:22
  • That is correct. I just assumed the OP had a good reason for inlining it. – John Sheehan Jan 12 '09 at 17:38
0

Use:

<a href="http://full-url-to-directory/page#comment_form"
   onclick="$('#comment_form').toggle('normal');return false;"
   title="Comment on this post">

Although you will need to do something on the server so that when you get a reference to the comment_form element via a request, the default is for it to be visible. This will allow (this part of) your page to work without JavaScript enabled.

Peter Mortensen
  • 28,342
  • 21
  • 95
  • 123
tvanfosson
  • 490,224
  • 93
  • 683
  • 780