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. :(

 

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • 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.