Pjax refreshing full page

I’m struggling with Pjax again. I’m hoping someone here can spot what I’m doing wrong.

I have a main index view that opens a modal within which I have several tabs, one of which, displays a Pjax GridView. I have another modal to allow the user to make new entries and once completed wish to reload the Pjax Gridview only, but it always reloads the base page.

So my modal view includes

Pjax::begin(['id'=>'pjaxClientsDocuments', 'timeout' => false]);

and then in my modal form I do

$.pjax.reload({container:'#pjaxClientsDocuments', timeout:15000, async:false});

Is there any reason why the above would not work?
Any ideas to try?

I tried adding

$('#pjaxClientsDocuments').on('pjax:error', function (event) {
    alert('Failed to reload pjaxClientsDocuments');

to see if I could trap any issue, but it never gets triggered.

For full disclosure, the _form is being processed as follows:

$('form#{$model->formName()}').on('beforeSubmit', function(e){

    var form = $('form#{$model->formName()}');
    var formData = new FormData(form[0]);
        type: "POST",
        data: formData,
        dataType: "json",
        url: form.attr('action'),
        processData: false,
        contentType: false,
        error: function(xhr, status, error) {
            alert('There was an error with your request.' + xhr.responseText);
            result = JSON.parse(result);
            var divClass = (result.status == 'Error')? 'danger' : result.status.toLowerCase();
            var sysMsg = '<div id="w0-' + result.class + '-0" class="alert-' + divClass + ' alert fade in">'
                  + '<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>'
                  + result.message + (result.errors === undefined?'':'<br><br>' + result.errors) + '</div>';
            if(result.status == 'Success'){
                $("#modal-system-messages").html(sysMsg).stop().fadeIn().animate({opacity: 1.0}, 4000).fadeOut(4000);
                // ????Works fine up to here, but next line reload the main page, not just the Pjax instance????
                $.pjax.reload({container:'#pjaxClientsDocuments', timeout:15000, async:false});
            } else {
		function(xhr, status, error){
			var divClass = 'danger';
			var msg = "<span class=\"glyphicon glyphicon-remove\"></span> " + error + "<br><br>" + status + "<br><br>" + xhr.responseText;
			var sysMsg = '<div class=\"alert-' + divClass + ' alert fade in\">'
					+ '<button type=\"button\" class=\"close\" data-dismiss=\"alert\" aria-hidden=\"true\">×</button>'
					+ msg + '</div>';
			$('#modal-system-messages3').html(sysMsg).stop().fadeIn().animate({opacity: 1.0}, 4000);

    return false;

Why continue using pjax instead VueJs or React?

I’ve created a simple library to embed VueJs inside a legacy project: https://github.com/FabrizioCaldarelli/yii2-vueapp

I am not familiar with these technologies, but will do some reading. Thank you for the suggestion and link.

There are very simple to use. I strongly suggest you to study them because they are very simple to learn (expecially Vue.js) and the improvement is much