I am using the Fabric UI JS components on a SharePoint 2016 project (not using React or SharePoint Framework) and having issues with the dialog box buttons refreshing the page upon click.

Reviewing Microsoft's documentation and removing their "Wire up the buttons" and actionHandler functions, I tried using a simple:

$(document).on('click', '[id=btnName]', function() {


function callingFunction() {

     console.log("Entered callingFunction");

     // Do more stuff


In my console, I am seeing "Entered callingFunction," but then it immediately navigates to the original page, instead of performing the tasks I have in "Do more stuff". How do I prevent the page refresh?


Turns out I simply needed to use the documentation as provided and then use e.preventDefault(); to prevent the page from refreshing.

   // Wire up the buttons
    for (var i = 0; i < actionButtonElements.length; i++) {
      actionButtonComponents[i] = new fabric['Button'](actionButtonElements[i], actionHandler);

    // When clicking the button, open the dialog
    button.onclick = function() {

    function actionHandler(event) {

      if(this.innerText.trim() == "Save") {


      } else if (this.innerText.trim() == "Cancel" {


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.