Suggestion: Move javascript functions calls out of inline event handlers and into jQuery selectors

[GoogleCodeExporter]

Since Pinax uses the jQuery framework, it seems like it might as well take
advantage of the "selector" philosophy of jQuery, which allows you to bind
javascript code via CSS-style selectors and thus cleanly separate
javascript code from html.

So, for example, instead of this:

templates/blogs/edit.html:
<a href="#" onclick="$('#teaser').toggle(); return false;">{% trans
"Teaser" %}</a>

You could do:

templates/blogs/edit.html:
<a href="#" class="teaser-control">{% trans "Teaser" %}</a>

site-media/base.js:
$('.teaser-control').click(
  $('#teaser').toggle();
  return false;
);

That's pretty basic and is just an example; there are even better ways to
generalize this kind of function (where you click on one element to
show/hide a related element).

The advantage of this approach is that all of your application javascript
code finds a home in a single file, as opposed to being spread throughout
your templates, much the way all of the site's styles are in base.css.

Not sure if there is a reason to using inline event handlers, but I thought
I would make this suggestion regardless.

Original issue reported on code.google.com by jim.ere....@gmail.com on 9 Sep 2008 at 6:05

[GoogleCodeExporter]

Quick correction to the jQuery code I provided above:

$('.teaser-control').click(function() {
  $('#teaser').toggle();
  return false;
});

(Forgot to wrap the code in an anonymous function.)

Original comment by jim.ere....@gmail.com on 9 Sep 2008 at 6:10

[GoogleCodeExporter]

The inline handling is just sloppiness -- I agree with your suggestion

Original comment by jtau...@gmail.com on 27 Oct 2008 at 10:58

• Changed state: Accepted

[GoogleCodeExporter]

Since i'll be working on template refactoring, this will be taken care of at 
the same time.

Original comment by gregoryj...@gmail.com on 27 Oct 2008 at 11:41

[GoogleCodeExporter]

I did a bunch of these when I redid the toggle forms

Original comment by jtau...@gmail.com on 31 Oct 2008 at 12:21

[GoogleCodeExporter]

Original comment by pyDanny on 13 Mar 2009 at 3:40

• Added labels: Milestone-0.7

[GoogleCodeExporter]

Original comment by pyDanny on 31 Mar 2009 at 4:08

• Changed state: MovedToCpc