Tyler Love

I live in Brooklyn, NY with Anna and Hubble+Ollie. I perform music with French Miami, engineer software for Tumblr and co-created Views.fm.

You can ask me something.

• Prototype to jQuery

  Outside of maintaining old code I’m done with Prototype and fully switched to jQuery. It’s different. Here’s something I just rewrote in jQuery from prototype. The page just submits an ajax request to a server, the server performs validations on the information supplied (email and phone regex test and other field validations), once the request completes it returns a Json object, which either notifies the user of errors or confirms that the form was submitted successfully.

  Prototype:

  document.observe('dom:loaded', function(){
  	Event.observe($('signup'), 'click', function(){
  		var params = new Object;
  		params.name = $('name').value;
  		params.phone = $('phone').value;
  		params.email = $('email').value;
  		params.comments = $('comments').value;
  
  		$('errors').hide();
  		$('error-list').update();
  
  		new Ajax.Request('/signups',{
  			method: 'post',
  			parameters: params,
  			onComplete: function(x){
  				var res = x.responseJSON;
  
  				if (res.saved){
  					$('signup').hide();
  					$('thanks').show();
  				} else {
  					res.errors.each(function(err){
  						$('error-list').insert("<li>" + err[0] + ": " + err[1] + "</li>");
  					});
  					$('errors').show();
  				}
  			},
  			onFailure: function(x){
  				alert('There was an error connecting to the server!');
  			}
  		});
  	});	
  });
  

  jQuery:

  $(document).ready(function(){
  	$('#signup').click(function(e){
  		var params = new Object();
  		params.name = $('#name').attr('value');
  		params.phone = $('#phone').attr('value');
  		params.email = $('#email').attr('value');
  		params.comments = $('#comments').attr('value');
  		
  		$('#errors').hide();
  		$('#errors-list').empty();
  		
  		$.ajax({
  			url: '/signups',
  			type: 'POST',
  			data: (params),
  			dataType: 'json',
  			success: function(signup){
  				if (signup.saved){
  					$('#signup').hide();
  					$('#thanks').show();
  				} else {
  					$.each(signup.errors, function(k, v){
  						$('#error-list').append('<li>' + v[0] + ": " + v[1] + '</li>');
  					});
  					
  					$('#errors').show();
  				}
  			},
  			error: function(){
  				alert('There was an error connecting to the server!');
  			}
  		})
  	});
  });
  

  24 Jul 2009