PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

AJAX disrupting my jQuery function?

  1. 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 7 years ago on Thursday July 26, 2012 | Permalink
  2. 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 7 years ago on Friday July 27, 2012 | Permalink
  3. 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 7 years ago on Friday July 27, 2012 | Permalink
  4. You can email me at chris@rocketgenius.com and I will give it a look.

    Posted 7 years ago on Sunday July 29, 2012 | Permalink
  5. 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 7 years ago on Monday July 30, 2012 | Permalink
  6. 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 7 years ago on Monday July 30, 2012 | Permalink
  7. Working perfectly now. Thanks!

    Posted 7 years ago on Wednesday August 8, 2012 | Permalink
  8. Thanks for the update John.

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

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