Form submitted, response via ajax

Question

Currently I have this, which works nicely - it's an email signup list which returns a successful response or error, as appropriate.

$.ajax({ type: "POST", url: "mailing_list/mailing_list_add2.php", data: dataString, success: function(response) { $('#emailform').html("<div id='display_block'></div>"); $('#display_block') .hide() .fadeIn(500, function() { $('#display_block').html(response) }); } }); return false; });

The form is in a div with ID "emailform" and the "display_block" is the response. What I need is for the response to automatically disappear after a short time and for the form to fade back in. I've tried a few things but nothing that has worked yet.

Any help on what to add to the above code would be appreciated.

redDevil · Accepted Answer · 2012-03-19 11:32:50Z

1

Assuming your initial html is like,

<div id="emailform"> <form> ... </form> </div>

you can proceed like this,

.ajax({ type: "POST", url: "mailing_list/mailing_list_add2.php", data: dataString, success: function(response) { var backupHtml = $('#emailform').html(); $('#emailform').html("<div id='display_block'></div>"); $('#display_block') .hide() .html(response) .fadeIn(500, function() { $(this).fadeOut(5000,function(){ $('#emailform').html(backupHtml); }); }); } });

edited Mar 19, 2012 at 11:32

answered Mar 19, 2012 at 11:10

redDevil

1,91917 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Andy Over a year ago

The response faded out ok, but emailform didn't appear again.

redDevil Over a year ago

i updated the jquery and i suppose ur html markup looks like the above right?

Andy Over a year ago

Sorry, when I tried it the first time I didn't add the var backupHtml. Thanks again...

Andy Over a year ago

One additional thing I noticed, when the form re-appears it won't re-submit. Click the button and nothing happens.

redDevil Over a year ago

that will depend on how you are handling the form submission.. I mean which function you are calling and the like..

|

Simon Edström · Accepted Answer · 2012-03-19 11:35:05Z

There is nothing inside display_block when you fade it in. Its just empty, I changed the code:

$.ajax({ type: "POST", url: "mailing_list/mailing_list_add2.php", data: dataString, success: function(response) { var backedup = $('#emailform').html(); // Take a snapshot of whats inside the emailform $('#emailform').html("<div id='display_block'></div>"); $('#display_block') .hide() .html(response) // New line! .fadeIn(500,function (){ // After we finsish the fadeIn $('#emailform').hide().html(backedup).fadeIn(500); // Reset the old content and fade it in }); } }); return false; });

I created a JSFiddle for you http://jsfiddle.net/XHkWr/1/

It faded in and displayed ok though, what I wanted was for it to fade out and the emailform fade back in.

Starx · Accepted Answer · 2012-03-19 11:46:54Z

0

To do instead of all mumbo jumbo.

$('#emailform').html("<div id='display_block'></div>"); $('#display_block').hide().html(response).stop().fadeIn(500);

edited Mar 19, 2012 at 11:46

answered Mar 19, 2012 at 11:34

Starx

79.3k50 gold badges187 silver badges266 bronze badges

5 Comments

redDevil Over a year ago

but the OP has the display_block div inside the emailform div.. your code doesn't handle that

Starx Over a year ago

@achusonline, Why is that? Am i missing something?

redDevil Over a year ago

in his code, he updates the emailform div with display_block div and in it he places the response.. So how does the above code handle updating the emailform div content to the original form?

Starx Over a year ago

@achusonline, I think you missed my point, I will update to make it clearer

redDevil Over a year ago

pardon me, but I still don't see how you will bring back the original state of the emailform div? You are updating the html of that div.

Eugene · Accepted Answer · 2012-03-19 12:06:24Z

I would say, that this would be a correct solution:

$.ajax({ url: 'mailing_list/mailing_list_add2.php', type: 'post', data: dataString, success: function(data, textStatus, jqXHR) { var $emailForm = $('#emailform').html(); $('#emailform').html('<div id="display_block"></div>'); $('#emailform').hide().html(data).fadeIn(500).delay(3000).fadeOut(500, function() { $('#emailform').html($emailForm); }); return false; }, error: function(jqXHR, textStatus, errorThrown) { var $emailForm = $('#emailform').html(); $('#emailform').html('<div id="display_block"></div>'); $('#display_block').hide().html(textStatus).fadeIn(500).delay(3000).fadeOut(500, function() { $('#emailform').html($emailForm); }); return false; } });

Result here: http://jsfiddle.net/p9URt/2/

Collectives™ on Stack Overflow

Form submitted, response via ajax

4 Answers 4

6 Comments

1 Comment

5 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

1 Comment

5 Comments

Comments

Related