Rich-text Reply

Using jQuery.ajax(:datafilter) to modify responses before success handlers

tomfuertes 06-12-15

Using jQuery.ajax(:datafilter) to modify responses before success handlers

[ Edited ]

We recently ran into an issue where the control code was redirecting people away based on a property in a $.ajax call and couldn't abort that redirect via .ajaxSuccess (which is usually great in those situations). A lot of digging later we came across the `jQuery.ajax(:datafilter)` option and thought it was worth sharing here! The control code we were working with was something like:  

 

$('#atc').submit(function(e) {
  e.preventDefault();
  var $f = $(this);

  // lots of complex validation we 
  // didn't want to reverse engineer

  $.ajax($f.attr('action'), $f.serialize(),
    function success(resp) {
      if (resp.redirect)
        window.location = data.redirect; // to checkout
    });
});

And across browsers there's no way to abort that redirect or teardown in a good way, but if we hijack and modify the response before it gets to `function success`, we can just remove the redirect param. Enter jQuery.ajax(:datafilter)

 

jQuery.ajaxSetup({
  dataFilter: function(data) {
    var data = JSON.parse(data);
    delete data.redirect;
    return JSON.stringify(data);
  }
});

Hope that helps someone! There's a link to the jQuery docs + more info on our blog: http://clearhead.me/jquery-ajax-datafilter/

 

See everyone at Opticon!

____
- Tom Fuertes | CTO @ CROmetrics / LinkedIn
"Most Impactful Use of Personalization" and "Experience of the Year" Optie award winner.


Experimentation Hero

Re: Using jQuery.ajax(:datafilter) to modify responses before success handlers

Hi @tomfuertes,

 

This is really clever and cool!  You guys never cease to amaze!

 

Just to confirm the last step in your use of dataFilter, you're still able to pass the sanitized JSON back to the web page (and presumably to the server) so the rest of the downstream steps recognize the successful add to cart action?

 

And that begs the next question - could this approach work if the redirect itself happened server-side?

 

Overall I really like the idea behind this test (correct me if my assumption is wrong) - you're testing whether leaving someone on the product page after adding to the cart incentivizes them to continue shopping and add more products to the cart.  If you take someone directly to checkout after adding one product to the cart, the AOV will be limited.

 

Thanks!

Harrison Krat
Solutions Architect | Optimizely, Inc.
harrison@optimizely.com
 
tomfuertes 06-15-15
 

Re: Using jQuery.ajax(:datafilter) to modify responses before success handlers

Thanks @Harrison_Krat!

 

Re Downstream

The sanitization step happens *after* the server responds (so the session's cart store is still intact), but *before* that data is passed back to any client side success hooks. When we need to modify the posts before they go out, we'd either remove `input` tags or use `jQuery.ajax(:beforeSend)` if the calls were closured in a way we couldn't modify the data before the request queued up.

 

Re Server Side Redirect

Probably wouldn't work if server side, but you could also submit the form via AJAX at that point instead of POSTing the form back (thus the browser would bypass the redirect).

 

Re Assumptions:

This hypothesis is based around popping a modal on successful add to cart that has keep shopping, checkout, and upsell product opportunities instead of redirecting them straight to their cart and out of buying mode.

____
- Tom Fuertes | CTO @ CROmetrics / LinkedIn
"Most Impactful Use of Personalization" and "Experience of the Year" Optie award winner.


Experimentation Hero