// Dynamically Display Form Parts

<script type=text/javascript>
var isIE=document.all?true:false;
var isDOM=document.getElementById?true:false;
var isNS4=document.layers?true:false;

/* _w : which ID (1) or (2) */
/* _h : (h)ide or (s)how */
function toggleT(_w,_h) {
  if (isDOM)
  {
    if (_h=='s') document.getElementById(_w).style.visibility='visible';
    if (_h=='h') document.getElementById(_w).style.visibility='hidden';
  }
  else if (isIE) {
    if (_h=='s') eval("document.all."+_w+".style.visibility='visible';");
    if (_h=='h') eval("document.all."+_w+".style.visibility='hidden';");
  }
  else if(isNS4)
  {
    if (_h=='s') eval("document.layers['"+_w+"'].visibility='show';");
    if (_h=='h') eval("document.layers['"+_w+"'].visibility='hide';");
  }
}
</script>

<form>
<span id="divt1" style="visibility:visible;position:relative;top:0;left:0">
  Type 1 Input:   <input name="t1" type="text"  value="">
</span>
<BR>
<span id="divt2" style="visibility:visible;position:relative;top:0;left:0;">
  Type 2 Input:   <input name="t2" type="text"  value="">
</span>
<BR>
Type 1 Visible  <input name="r1" type="radio" checked value="" onClick="toggleT('divt1','s')"> 
       Hidden   <input name="r1" type="radio" value="" onClick="toggleT('divt1','h')"><BR>
Type 2 Visible  <input name="r2" type="radio" checked value="" onClick="toggleT('divt2','s')"> 
       Hidden   <input name="r2" type="radio" value="" onClick="toggleT('divt2','h')">
</form>

// SCRIPT

$j(document).ready(function() {
	$j('a#ajaxLink').click(function(){
		$j("#ajaxBox").load("public/js/testAjax.html");
	});
});

// HTML

<a id="ajaxLink" href="javascript:;">Load Ajax</a>
<div id="ajaxBox"></div>

// from a comment by Steven Bristol on errtheblog.com

I just wanted to share a really killer event handling tidbit:

Generally you do something like:

jQuery(’.class’).click(function(){//whatever});

Everyone knows this can be rewritten as:

jQuery(’.class’).bind(‘click’, function(){//whatever});

But sometimes you need to unbind something:

jQuery(’.class’).unbind(‘click’, function(){//});

The problem with this is that it will unbind all the click events, not just yours. So if multiple bits of javascript have a click event handler for ’.class’, unbinding removes them all. (This is because there is no way to identify an anonymous function.)

But jQuery is so good that there is a way to handle this: Namespacing your events:

jQuery(’.class’).bind(‘click.namespace’, function(){//}); 
jQuery(’.class’).unbind(‘click.namespace’);

or for reinitializing an element added via ajax:

jQuery(’.class’)unbind(‘click.namespace’).bind(‘click.namespace’, function(){//});

// Just throw this at the bottom of your application.js and you’re good to go: all jQuery ajax requests will trigger the wants.js block of your respond_to declaration, exactly like you’d expect. Enjoy.
// via: http://ozmm.org/posts/jquery_and_respond_to.html

jQuery.ajaxSetup({ ‘beforeSend’: function(xhr) {xhr.setRequestHeader(“Accept”, “text/javascript”)} })

Essential for degradable javascript, when one never knows if a view or partial is being called via XmlHttpRequest or not. Throw the below code in your ApplicationController (application.rb)

More info in this blog post

def render(*args)
  	args.first[:layout] = false if request.xhr? and args.first[:layout].nil?
	super
end

// jQuery disable the enter key

You can intercept the enter key (code 34 I think...).

Something like this:

$("#myForm").bind("keypress", function(e) {
  if (e.keyCode == 34) return false;
});

Keypress may be the wrong event, can't remember if forms submit on keyup, keydown or keypress