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');
event.preventDefault();
});
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){
$('#loading').show();
var form = $('form#{$model->formName()}');
var formData = new FormData(form[0]);
$.ajax({
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);
}
})
.done(
function(result){
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'){
$(form).trigger("reset");
$('#modal-system-messages3').html("");
$("#modal-system-messages").html(sysMsg).stop().fadeIn().animate({opacity: 1.0}, 4000).fadeOut(4000);
$('#modalPopup3').modal('hide');
// ????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 {
$("#modal-system-messages3").html(sysMsg);
}
$("#loading").fadeOut("slow");
}
)
.fail(
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;
});