A very simple way to handle ajax requests in MODx Revolution

hi All, much has already been written about handling ajax requests on the frontend part of the site in MODx Revolution, there are even a few ready add-ons.
In turn, I want to suggest another, very simple way to handle ajax requests in MODx Revolution.

Let's create a plugin called ajaxReqeust, with the following content:
the

<?php
if ($modx->event->name == 'OnLoadWebDocument') {
if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
$modx->resource->set('cacheable', 0);
$modx->resource->set('template', 0);
}
}

The plugin should operate on a system event "OnLoadWebDocument".
This plugin will allow us to perform ajax requests to resources and to receive in response only the content without the template.
All we need is to save a snippet or chunk in the content of the resource.

As an example, consider the process of processing forms submitted via ajax request.

Create a new resource with any data in the content field enter the standard the snippet call FormIt:
the

<div id="feedback_form">
<h2>feedback</h2>
[[!request? &k=`success` &toPlaceholder=`success`]]
[[+success:is=`:then=`
[[!FormIt? 
&hooks=`email,redirect`
&redirectTo=`[[*id]]`
&redirectParams=`{"success":"1"}`
&emailTpl=`feedbackEmailTpl`
&emailSubject=`New question from [[++site_name]]`
&emailTo=`info@unicontent-studio.ru`
&emailFrom=`noreply@unicontent-studio.ru`
&emailFromName=`[[++site_name]]`
&validate=`
name:required:stripTags,
email:email:required,
message:required:stripTags
`
&clearFieldsOnSuccess=`1`
&validationErrorMessage=`errors Occurred when sending a message.`
]]

<form data-target="#feedback_form" class="ajax-form" action="[[~[[*id]]]]" method="POST">
<div>
<label>Name:</label>
<input type="text" value="[[!+fi.name]]" name="name" />
[[!+fi.error.name]]
</div>
<div>
<label>email:</label>
<input type="text" value="[[!+fi.email]]" name="email" />
[[!+fi.error.email]]
</div>
<div>
<label>Message:</label>
<textarea name="message">[[!+fi.message]]</textarea>
[[!+fi.error.message]]
</div>
<input type="submit" name="submit" value="Send" />
</form>
`:else=`
<p>Your message was successfully sent.</p>
`]]
</div>

Create a small snippet called request, which will allow us to bring the message in case of successful submission of the form:
the

<?php
$result = isset($_REQUEST[$k])? strip_tags($_REQUEST[$k]) : ";
if (!empty($toPlaceholder)) {
$modx- > toPlaceholder($toPlaceholder, $result);
}
else {
return $result;
}

All we have left to do is to connect a small jQuery code into the page which will display the form.
This script submited the form through ajax request and handles the response received:
the

$(document).ready(function() {
$('body').on('submit', '.ajax-form', function(e) {
e.preventDefault();
var target = this;
if ($(this).data('target') != undefined) {
target = $(this).data('target');
}
values = $(this).serializeArray();
$(this).find('input[type="submit"]').attr('disabled', 'disabled');
$.ajax({
type: 'POST',
dataType: 'html',
url: $(this).attr('action'),
data: values,
success: function(data) {
$(target).replaceWith(data);
}
});
});
});

That's probably all just isn't it?
Nothing more do not need any additional scripts, connectors and processors, only one small plug, and everything else for us will take care of MODx.
Chunks and snippets will be processed as it is done in normal queries, that is no hacks for the processing of MODx tags is not necessary, the answer comes already processed by the parser.
That's all, I hope my little article will make the life of someone a little easier.
Good luck to all and see you soon.

Article based on information from habrahabr.ru