A very simple way to handle ajax requests in MODx Revolution

Hi there, a lot has already been written about handling ajax requests for the front-end part of the site in MODx Revolution, there are even a few ready-made additions .
In turn, I want to offer another, very simple way of handling ajax requests in MODx Revolution.

First, create a plugin called ajaxReqeust, with the following contents:

<?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 fire on the OnLoadWebDocument system event.
This plugin will allow us to perform ajax requests to resources and receive only content without a template in response.
All that is required of us is to save the necessary snippet or chunk to the content of the resource.

As an example, consider the processing of a form submitted via an ajax request.
')
Let's create a new resource with any data, in the content field we will enter a standard call for the FormIt snippet:

 <div id="feedback_form"> <h2>  </h2> [[!request? &k=`success` &toPlaceholder=`success`]] [[+success:is=``:then=` [[!FormIt? &hooks=`email,redirect` &redirectTo=`[[*id]]` &redirectParams=`{"success":"1"}` &emailTpl=`feedbackEmailTpl` &emailSubject=`    [[++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=`    .` ]] <form data-target="#feedback_form" class="ajax-form" action="[[~[[*id]]]]" method="POST"> <div> <label>:</label> <input type="text" value="[[!+fi.name]]" name="name" /> [[!+fi.error.name]] </div> <div> <label>E-mail:</label> <input type="text" value="[[!+fi.email]]" name="email" /> [[!+fi.error.email]] </div> <div> <label>:</label> <textarea name="message">[[!+fi.message]]</textarea> [[!+fi.error.message]] </div> <input type="submit" name="submit" value="" /> </form> `:else=` <p>   .</p> `]] </div> 

Let's create a small snippet called request, which will allow us to display a message if the form is successfully submitted:

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

All we have to do is to plug a small jQuery code into the page where the form will be displayed.
This script submits the form via ajax request and processes the response received:

 $(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, isn’t it?
There is no need to do anything else, no additional scripts, connectors and processors, just one small plugin, and MODx will take care of everything else.
Chunks and snippets will be processed in the same way as with ordinary requests, that is, no hacks for processing MODx tags are needed, the answer comes already processed by the parser.
That's all, I hope my little article will make life a little easier for someone.
Good luck to all and see you soon.