AJAX disrupting my jQuery function? « Gravity Support Forums

Gravity Support Forums » Plugin Support » Gravity Forms

byjc
Member
I have a form that is hidden when the page loads, but displayed with an addClass function:
```
jQuery(".talk-button").click(function () {
	jQuery("#lets-talk").addClass('on');
});
```
This is working properly, as is a cancel button added as an html element in the form that hides the div again:
```
jQuery(".talk-cancel").click(function () {
	jQuery("#lets-talk").removeClass('on');
});
```
The form is submitted with AJAX and the notification that is displayed also shows a button with the .talk-cancel class, but that button isn't properly closing the window. I don't see any errors in my dev console.

Any thoughts on why the AJAX form submit might be preventing my .removeClass function from working properly?
Posted 11 years ago on Thursday July 26, 2012 | Permalink
Chris Hajer
Key Master

Can you share a link to the page with your form on it, so we can take a look? Thanks.

If you turn off AJAX in the shortcode or function call, does everything work as expected?

Posted 11 years ago on Friday July 27, 2012 | Permalink
byjc
Member

Chris,

Thanks for the reply. It's in a password protected area on a dev site, so I can't post it here. Where can I email that too?

If I turn off AJAX in the shortcode (using do_shortcode), the page just reloads and the thanks message with a further call to action isn't visible, because it's in the hidden div.

Posted 11 years ago on Friday July 27, 2012 | Permalink
Chris Hajer
Key Master

You can email me at chris@rocketgenius.com and I will give it a look.

Posted 11 years ago on Sunday July 29, 2012 | Permalink
Chris Hajer
Key Master

Thank you for that information. I've asked one of the developers for assistance and either he or I will post here with some assistance.

Posted 11 years ago on Monday July 30, 2012 | Permalink
David Smith
Member
Hi John,

You're going to want to look into using the jQuery "on" function. On the initial page load you bind your functions to the elements that currently exist. After the form is submitted via ajax, the original elements are removed and replaced by new elements from the submitted form. These elements will have the same IDs, but the events are no longer bound to them. By using the "on" function, you can bind to events for elements that exist now and in the future.
```
[js]
$(document).on("click", "a.offsite", function(){ alert("Goodbye!"); });
```
You can find more info on this with the below links:

http://api.jquery.com/on/
http://api.jquery.com/live/
Posted 11 years ago on Monday July 30, 2012 | Permalink
byjc
Member

Working perfectly now. Thanks!

Posted 11 years ago on Wednesday August 8, 2012 | Permalink
Chris Hajer
Key Master

Thanks for the update John.

Posted 11 years ago on Wednesday August 8, 2012 | Permalink

This topic has been resolved and has been closed to new replies.