Jump to content

Can't change div html on succesful .ajax call (jQuery)


delayedinsanity

Recommended Posts

This is an extension of my earlier post, now that I've gotten past the validation part I'm trying to seamlessly submit the form and have a success message displayed in place of the form. I think I'm doing something wrong though because the most I ever see is a flicker and the form resets itself.

 

Here's the code:

 

$("#signup_submit").click(function() {
	$("#signup_submit .inside img").attr("src", "http://images.assets.handmade.loc/images/ajax-loader.gif");

	if ( user_field.val() == "Username..." || email_field.val() == "Email..." || user_msg == false || email_msg == false )
		$("#signup_submit .inside img").attr("src", "http://images.assets.handmade.loc/images/menus/icon-delete.png");

	if ( user_field.val() == "Username..." || email_field.val() == "Email..." ) {
		$("#user_msg").removeClass("success").addClass("error");
		$("#email_msg").removeClass("success").addClass("error");
		return false;
	}

	if ( user_msg == false ) {
		$("#user_msg").removeClass("success").addClass("error");
		return false;
	}

	if ( email_msg == false ) {
		$("#email_msg").removeClass("success").addClass("error");	
		return false;
	}

	$.ajax({
		url: "<?php echo site_url(); ?>/ajax-signup.php",
		data: "user=" + user_field.val() + "&email=" + email_field.val(),
		dataType: "json",
		type: "post",
		success: function(j) {
			if ( j.ok == true ) {
				$("#signup_form").replaceWith("<div id='smessage'></div>");
				$("#smessage").html("<p>Success!</p>");
			} else {
				$("#signup_form h3").html("Error!");
			}
		}
	});

	return false;

});

 

I know it's working on the php side because I can see the entry in the database. It just doesn't... do... anything. else. :(

 

Not sure if this makes a difference, but I've been watching FireBug while trying to figure this out.

 

The first thing I noticed was that more headers were being sent in the form submit, probably due to some of the files I call in ajax-signup.php to process the post data. I unset them and now the headers sent by both scripts are exactly the same. Didn't solve the problem though. :(

 

The other odd thing is that when the validation checks are posted, I get a 200 response from ajax-validate-signup.php, but when the form is submitted I get a 404 from ajax-signup.php... even though I know full well it's actually posting to the form considering I can see the json response and as I mentioned before there are new rows in my database to back it up.

 

I'm baffled as to the 404. I double checked... both files are sending text/plain headers, similar json encoded responses, and then they exit.

 

EDIT: That was the problem. I forced a 200 response header and suddenly everything works. Friggin nother 2 hours wasted!

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.