3

I try to implement infinite scrolling in EE 2.7.2.

There are 2 templates: "infinite_scrolling_main" and "infinite_scrolling_embed". There are no forms in any of these two templates. AJAX call from the page outputted by template "infinite_scrolling_main" should fetch the data outputted by template "infinite_scrolling_embed".

This setting worked correctly prior to EE 2.7. But after upgrade to 2.7.2 any AJAX call outputs error message "The action you have requested is invalid" instead of proper data.

This issue seems to be related to XID handling. If I set

$config['secure_forms'] = "n";

AJAX works correctly.

What should be done to keep secure forms and to be able to fetch data via AJAX in EE2.7.2?

1 Answer 1

4

You can avoid the XID validation by making a GET request instead of a POST request. XID validation only occurs when secure_forms is y and the $_POST array is not empty.

Or you can generate a valid XID hash by using {XID_HASH} in your template. Maybe something like:

<body data-xid="{XID_HASH}">

<script>
$.post(
  'site/inifinite_scroll_ajax',
  {
    XID: $('body').data('xid')
  },
  function(data, textStatus, jqXHR) {
    // Update the XID with a fresh one from the response headers
    $('body').data('xid', jqXHR.getResponseHeader('X-EEXID'));

    // Do whatever you want with data
  }
);
</script>

In the response, EE will send along a fresh XID hash in a custom HTTP header, X-EEXID. You can use that new hash for the next request. In the callback in my example, it updates the xid stored in the body data-xid attribute with the fresh hash.

8
  • But there is some issues relevant to solution you proposed. XID handling in EE2.7.2 requires that along each AJAX request a valid XID should be sent. This means that for each new request the earlier request should be completed (earlier request is the source of XID string) and completed successfully. But what should be done if request fails and should be repeated or request should be canceled and a new request should be executed immediately after canceling?
    – Laisvunas
    Commented Dec 18, 2013 at 14:33
  • Please check my updated answer ↑ Commented Dec 18, 2013 at 15:28
  • Thanks, Rob, for your help. It is strange, but it seems that there is no variable 'X-EEXID' inside response headers. How it might be?
    – Laisvunas
    Commented Dec 18, 2013 at 18:13
  • Did you inspect the response headers in Chrome dev tools or Charles and see if that header is in the response? Commented Dec 18, 2013 at 20:35
  • Yes, I inspected responce headers in Chrome javascript console and in Firefox Firebug, and found that there is no variable 'X-EEXID'. I inspected [this example][1] and [this][2]. [1]: antiquityillustrated.com/index.php/technical/… [2]: antiquityillustrated.com/index.php/technical/…
    – Laisvunas
    Commented Dec 19, 2013 at 13:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.