Attach a click event to a class on a button or link which fires an AJAX post then delays and continues with the original action?

Question

I am building an A/B test plugin for WordPress to be used on some landing pages.

A landing page allows the admin to create any number on A/B test variations.

On the landing page edit screen there will be some meta fields used to store what will trigger a conversion on an A/B test variation.

One of the options will be something like:

A button or link on the page that has a CSS Class name ____ OR CSS ID ____ is clicked on.

Where the name of the CSS class or ID is saved to the landing page meta field.

On the frontend of the site in the page template. I then want to inject some JavaScript with a click event on the provided class or ID which will then fire of an AJAX post which creates a conversion record on this A/B test variation of the landing page.

So my question is in my JavaScript click event which will fire the AJAX post. After that happens, I want to continue on with the action the link or button with that ID or class was supposed to do.

So I would think there would need to also be some sort of delay to make sure my AJAX post has time to post and then continue loading the page/link or whatever the action is.

How can I delay and continue with the button clicks I am attaching click events to?

$("#id_from_meta_field").on("click", function(e){

    // Prevent the button or link from triggering a form submission or loading a URL link so that the AJAX below can run  
    e.preventDefault();

    $.ajax({
        url: '/create_conversion_record_on_this_ab_test_variation',
        success: function(date) {
          // continue on loading button action or link URL
        }
    });
});

have you considered encapsulating the actions inside the ajax `success` function? — Jeff Puckett, Apr 22 '16 at 20:15
@JeffPuckettII yes that is likely what I want to do however as simple as it is, I am not sure how to `continue` with the original action of the button or link — JasonDavis, Apr 22 '16 at 20:17
can you explain how this situation might be different than http://stackoverflow.com/questions/7610871/how-to-trigger-an-event-after-using-event-preventdefault — Jeff Puckett, Apr 22 '16 at 20:22
There's no magic way to wait for an ajax call, and then do whatever a button or anchor was supposed to do, be it redirect, do some javascript stuff, or whatever. — adeneo, Apr 22 '16 at 20:27

score 0 · Answer 1 · answered Apr 22 '16 at 21:27

The most common way is to use the success event of the Ajax. Like:

$("#id_from_meta_field").on("click", function(e){
    // Prevent the button or link from triggering a.    form submission or loading a URL link so that the.    AJAX below can run  
e.preventDefault();
   DisableButton();

$.ajax({
    url: '/create_conversion_record_on_this_ab_test_variation',
    success: function(date) {
      // continue on loading button action or link
        EnableButton();
        ContinueToProcess();
    }
});
});

Function ContinueToProcess(){
    //some code here
}

score 0 · Answer 2 · answered Apr 25 '16 at 07:12

I am not sure if one can handle any type of click events, but if you are able to make sure that all event handlers are registered through jquery, you can use $._data( element, "events" ).click to get a list of click handlers. These click handlers can be called manually upon completion of ajax. Following is the plunker:

http://plnkr.co/edit/1AVM2sA1iXUrwgHPbyqs

I hope this helps.

Attach a click event to a class on a button or link which fires an AJAX post then delays and continues with the original action?

2 Answers2