Trying (and failing) to use jQuery $.ajax instead of $.post

Associate
Joined
2 Nov 2007
Posts
488
Hey guys,

I'd really appreciate some help.

I have the following JS code (which works):

Code:
jQuery(document).ready(function(){
	
	$('#contactform').submit(function(){
	
		var action = $(this).attr('action');
		
		$('#contactform #submit').attr('disabled','disabled').after('<img src="assets/ajax-loader.gif" class="loader" />');
		
		$("#message").slideUp(750,function() {
			$('#message').hide();			
			
			$.post(action, {
				title: $('#title').val(),
				firstName: $('#firstName').val(),
				lastName: $('#lastName').val(),
				email: $('#email').val(),
				company: $('#company').val(),
				country: $('#country').val(),
				phone: $('#phone').val(),
				website: $('#website').val(),
				enquiry: $('#enquiry').val(),
				submit: $('#submit').val(),
				},
				
				function(data){
					document.getElementById('message').innerHTML = data;
					$('#message').slideDown('slow');
					$('#contactform img.loader').fadeOut('fast',function(){$(this).remove()});
					$('#contactform #submit').attr('disabled',''); 
					if(data.match('success') != null) $('#contactform').slideUp('slow');	
				}
			);
		});
		return false; 
	});
});

and have tried to convert to using a more general $.ajax call:

Code:
jQuery(document).ready(function(){
	
	$('#contactform').submit(function(){
	
		var action = $(this).attr('action');
		
		$('#contactform #submit').attr('disabled','disabled').after('<img src="assets/ajax-loader.gif" class="loader" />');
		
		$("#message").slideUp(750,function() {
			$('#message').hide();			
			
			$.ajax({
				type: 'POST',
				url: 'contact.php',
				dataType: 'html',
				data: ({
					title: $('#title').val(),
					firstName: $('#firstName').val(),
					lastName: $('#lastName').val(),
					email: $('#email').val(),
					company: $('#company').val(),
					country: $('#country').val(),
					phone: $('#phone').val(),
					website: $('#website').val(),
					enquiry: $('#enquiry').val(),
					submit: $('#submit').val(),
				}),
				sucess: function(data){
					$('#message').html(data);
					$('#message').slideDown('slow');
					$('#contactform img.loader').fadeOut('fast',function(){$(this).remove()});
					$('#contactform #submit').attr('disabled',''); 
					if(data.match('success') != null) $('#contactform').slideUp('slow');	
				}
			});
		});
		return false; 
	});
});

This doesnt work. I can see the response come in (in FireBug) but the #message div is never populated with data.

Any ideas?

Cheers for any help
 
Back
Top Bottom