Develop Reference

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

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()
}

Consider the following:
<div class="section" id="section-1">
Tab 1
</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.

EXT JS: How to hide the fourth tab of the item based on some if condition?

I am new to ext js and I am trying to hide the fourth tab on my screen based on certain entity condition. As, I have coded I am able to disable
(blur) the 4th Setting tab, but the hidden or hide() function is failing.
Basically, I want to hide the fourth tab in items Payment.PaymentSettingsCfg on certain condition.
Any help would really appreciate, thanks in advance.
var bsdataloded = false;
Payment.PaymentSettingsCfg = {
id: 'PaymentSettingsPanel',
title: getMsg('PaymentAdmin', 'PaymentSettingsHeader'),
xtype: 'PaymentSettingsPanels',
listeners: {
activate: function() {
if (!bsdataloded) {
this.loadSettings();
bsdataloded = true;
}
}
}
}
var hidePaymentSettingcfg = false;
debugger;
if (Payment.EntitySettings &&
Payment.EntSettings["EntSITE|Payment_SWitch"] === "Y") {
Payment.PaymentSettingsCfg.disabled = true; //working
// Payment.PaymentSettingsCfg.hidden = true;// not working, even hide() not working
hidePaymentSettingcfg = true;
}
init: function() {
Ext.QuickTips.init();
Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
expires: null
}));
app = new Payment.admin.AppContainer({
id: 'main-panel',
title: Payment.getMsg('PaymentAdmin', 'PaymentConfHeader'),
el: 'bodydiv',
border: true,
layout: 'fit',
defaults: {
border: false
},
items: [{
xtype: 'tabpanel',
activeTab: 0,
width: 500,
deferredRender: false,
hidden: false,
defaults: {
border: false
},
items: [
Payment.PaymentItemCfg,
Payment.PaymentPeriodCfg,
Payment.PaymentTypeCfg,
Payment.PaymentSettingsCfg
]
}]
});
app.render();
}
};
}();

Here is the example to hide and show the tab based on if condition
i am hiding and showing the tab on checkbox checking but you can get your idea
i hope it will help you
here is the Fiddle...

Added the logic to the listeners and it worked.
listeners : {
afterrender : function(){
var testTab = this.getTabEl(3);
if (Payment.EntSettings["EntSITE|Payment_SWitch"] === "Y") {
testTab.hide();
}
}
}

Opening fancybox with boxslider for second time doesn't work properly

So I've setup a fancybox with boxslider.
I have some problems with the boxslider when opening the fancybox again after closing it the first time.
website (please note that the onclick is only applied to the first block (top row, most left))
The fancybox is called by the code below:
<div class="img-spacer" onclick="$.fancybox({href : '#portfolio-1', width: 1040, margin: 0, padding: 0, closeBtn: false}); $('.bxslider').bxSlider({auto: true,controls: false,pager: false});">
This code works just fine when opening the fancybox for the first time but when I close the fancybox and open it again the boxslider is not working anymore like it is supposed to. It will skip some photo's and won't slide smoothly.
Any suggestions on how to fix this?

Like I mentioned in my comment, you need to move the fancybox init out of the inline click handler, in into your JS file.
$(document).ready(function() {
// Attach fancybox to every .image-spacer div
$("img-spacer").fancybox({
href : '#portfolio-1',
width: 1040,
margin: 0,
padding: 0,
closeBtn: false,
onUpdate: function() {
alert('update!');
},
onCancel: function() {
alert('cancel!');
},
onPlayStart: function() {
alert('play start!');
},
onPlayEnd: function() {
alert('play end!');
},
beforeClose: function() {
alert('before close!');
},
afterClose: function() {
alert('after close!');
},
beforeShow: function() {
alert('before show!');
},
afterShow: function() {
alert('after show!');
},
beforeLoad: function() {
alert('before load!');
},
afterLoad: function() {
alert('after load!');
}
});
// On clicking a .img-spacer div, attach a bxSlider
$(".portfolio").click(function(){
$('.bxslider').bxSlider({
auto: true,
controls: false,
pager: false
});
});
});
And for the HTML
<div class="img-spacer"></div>
Give this a shot and let me know how it went. If you place it on the live site I can take a look at it there.

Jquery UI box - Takes more than 1 click to run

I am dynamically appending a <div> to the body of my webpage. This <div> does not exist on my .html page.
Within this <div> I am creating a Jquery UI YES NO box. Quite simply, it will 'do something' and close the box when YES, and just close the box when NO.
I have a working piece of code to create this box. However, frequently it takes two clicks of the YES button to work, which is very confusing. You'll see I have used a variety of methods to close the box.
$(function () {
$('body').append('<div id="dialog-confirm"></div>').click(function (e) {
e.preventDefault();
$("#dialog-confirm").dialog("open");
});
$("#dialog-confirm").dialog({
autoOpen: true,
height: 200,
width: 200,
modal: true,
title: 'Choose item?',
buttons:
{
'YES': function () {
$(this).dialog("close");
//$("#dialog-confirm").dialog("close");
//$('body').remove('#dialog-confirm');
$('#dialog-confirm').remove();
},
'NO': function () {
$(this).dialog("close");
//$("#dialog-confirm").dialog("close");
//$('body').remove('#dialog-confirm');
$('#dialog-confirm').remove();
}
}
});
});

The problem is that there is a race condition between your adding the div and attaching the click handler. Sometimes it happens before, sometimes after. That's why you get inconsistent click behavior. Try the following:
$(function() {
$('body').append('<div id="dialog-confirm"></div>');
$("#dialog-confirm").dialog({
autoOpen : true,
height : 200,
width : 200,
modal : true,
title : 'Choose item?',
buttons : {
'YES' : function() {
$(this).dialog("close");
// $("#dialog-confirm").dialog("close");
// $('body').remove('#dialog-confirm');
$('#dialog-confirm').remove();
},
'NO' : function() {
$(this).dialog("close");
// $("#dialog-confirm").dialog("close");
// $('body').remove('#dialog-confirm');
$('#dialog-confirm').remove();
}
}
});
$('#dialog-confirm').click(function(e) {
e.preventDefault();
$("#dialog-confirm").dialog("open");
});
});

How to save the state of accordion using localStorage

I wanted to save the state of the accordion and keeping it after the page refresh.
So far here is script.
<script>
$(document).ready(function () {
$('table').accordion({
header: '.category',
collapsible: true,
active: localStorage.getItem('accordion-active')||false
});
});
window.onload = function(){
localStorage.setItem('accordion-active',$('table').accordion('option','active'));
};
</script>
JFIDDLE
but it seems I couldn't make it work. Any suggestions?

You would do that by storing the index of the current active accordion in the acivate event, and then use it in the active option on pageload
$(document).ready(function () {
$('table').accordion({
header: '.category',
collapsible: true,
activate: function(e, ui) {
localStorage.setItem('accordion-active', $(this).accordion( "option", "active" ));
},
active: +localStorage.getItem('accordion-active')
});
});
FIDDLE

$(document).ready(function () {
$('table').accordion({
header: '.category',
collapsible: true,
activate: function(e, ui) {
localStorage.setItem('accordion-active', $(this).accordion( "option", "active" ));
},
active: parseInt(localStorage.getItem('accordion-active'))
});
});
Use parseInt(localStorage.getItem('accordion-active')) for active option if you want all of the tables in the accordion to load as collapsed initially.