Jquery-ui Tabs Open dialog box on tab click (stop code)

Question

This is my code. I am trying to stop the clicked tab from loading until i get a response from the dialog box. Also if i click cancel, i wan to return to the previously selected tab. currently the way i have it setup it creates a loop (which i broke with my lame code).

As seen in my jsfiddle example the code does stop. However, you will notice in the backround that the tab does change to the clicked one, so if you click cancel the backround will flash. i am trying to avoid that.

Thanks.

My Fiddle

//
var runOnceDammit;
$(document).ready(function() {
$(".hideT").button();
$("#tabs").tabs();
$("#tabs").tabs("disable", "#tabs-4");
$('.ms-formtable').appendTo($('#tabs-1'));
$("#tabs").on("tabsbeforeactivate", function(event, ui) {
if (runOnceDammit == true) {
    runOnceDammit = false;
    return;
}
var active = $("#tabs").tabs("option", "active");
var dialResults = $.when(showDialog());
dialResults.done(function(data) {
  if (data) {
    $('.ms-formtable').appendTo(ui.newPanel);
    if (ui.newPanel.is("#tabs-2")) {
      //do stuff
    } else if (ui.newPanel.is("#tabs-3")) {
      //do stuff
    } else if (ui.newPanel.is("#tabs-1")) {
      //do stuff
    }
    return;
  } else {
    ui.newTab.blur(); //trying to remove higlight from tab
    runOnceDammit = true
    $("#tabs").tabs({
      active: active
    }); //activate previous tab
    return;
  }
});
//return;
});
}); //End DocReady!
//
//
function showDialog() {
var dfd = $.Deferred();
var results;
$('#dialog').dialog({
dialogClass: "no-close",
title: "Fanciful Dialog Box",
modal: true,
draggable: false,
buttons: [{
  text: 'Confirm',
  icons: {
    primary: "ui-icon-check"
  },
  click: function() {
    results = true;
    $(this).dialog('close');
  }
}, {
  text: 'Cancel',
  icons: {
    primary: "ui-icon-cancel"
  },
  click: function() {
    results = false;
    $(this).dialog('close');
  }
}],
close: function(event, ui) {
  dfd.resolve(results);
}
});
return dfd.promise()
}

Answer 1

Consider the following:

<div class="section" id="section-1">
  <a href="#myTab-1">Tab 1</a>
</div>
<div class="section" id="section-2">
  <a name="myTab-1"></a>
</div>
<script>
$("#myTab-1").click(function(event){
  event.preventDefault();
  // Do a thing
  return true;
});
</script>

This jQuery code will bind an anonymous function to the click event. The function takes a JavaScript Event Object as an attribute. Events have some methods to them, such as, .preventDefault() . This allows you to interrupt the default event and execute your own code. Using return true will return the default behavior after your code has been run.

I answered a similar question: confirm form submit with jquery UI

I found it better to resolve with the result. It seems that .resove() will work out better this way when it comes to the .done() code.

Working example: https://jsfiddle.net/Twisty/e2djqx08/

The key, I think, was to assign the active tab properly in your cancellation code.

JavaScript

function showDialog() {
  var dfd = $.Deferred();
  var results;
  $('#dialog').dialog({
    dialogClass: "no-close",
    title: "Fanciful Dialog Box",
    modal: true,
    draggable: false,
    buttons: [{
      text: 'Confirm',
      icons: {
        primary: "ui-icon-check"
      },
      click: function() {
        $(this).dialog('close');
        dfd.resolve(true);
      }
    }, {
      text: 'Cancel',
      icons: {
        primary: "ui-icon-cancel"
      },
      click: function() {
        $(this).dialog('close');
        dfd.resolve(false);
      }
    }]
  });
  return dfd.promise();
}

$(function() {
  $("#tabs").tabs().tabs("disable", 3);
  $('.ms-formtable').appendTo($('#tabs-1'));
  $("#tabs").on("tabsbeforeactivate", function(e, ui) {
    e.preventDefault();
    console.log("EVENT: Prevent Default");
    var self = $(this);
    var revertToTab = ui.oldTab;
    var revertToPanel = ui.oldPanel;
    var sendTo = ui.newTab;
    var sendToPanel = ui.newPanel;
    console.log("EVENT: When Dialog is closed.");
    $.when(showDialog()).done(function(data) {
      if (data) {
        console.log("INFO: Dialog Confirmed.");
        $('.ms-formtable').appendTo(ui.newPanel);
        if (self.is("#tabs-2")) {
          //do stuff
        } else if (self.is("#tabs-3")) {
          //do stuff
        } else if (self.is("#tabs-1")) {
          //do stuff
        }
        return;
      } else {
        console.log("INFO: Dialog Cancelled");
        self.blur();
        $("#tabs").tabs("option", "active", revertToTab);
        return false;
      }
    });
  });
});

In my tests, I continued to find the active tab panel loading while the dialog was active. This did not happen when I used $("#tabs").tabs("option", "active", revertToTab); .

Hope that helps.