Cancelling a PJAX request in Jquery

Question

I have links that are rendered using PJAX.

In one of the form, I have a form. When the user edits the form and clicks on any of the pjax links, I would like to show a confirm message dialog box, "Are you sure you want to navigate, you have unsaved changes"

So How can I call the pjax request?

Answer 1

You could set up a variable that you set to true when the user edits the form, then check on your link handler. For example

var formEdited = false;

// form input edit handler
$('input').change(function() {
  formEdited = true;
});

// pjax click handler
$(document).on('pjax:click', function(e) {
  // if form has been edited
  if (formEdited) {
    // show error prompt
    var confirmNavigate = confirm("You have unsaved changes. Are you sure you want to navigate to a new page?");
    // if cancelled
    if (!confirmNavigate)
      return false;
  }
})