We Keep Coding

Dynamically Adding HTML files as tabs to Kendo TabStrip

I'm trying to make a web-part which is basically a Kendo tabstrip . it has a simple ul on it's own and linking external html files to each relative li using a javascript code. it works fine so far.
but now I want to be able to call functions to add or remove whatever file I selected to my tabstrip and so far it's not working .
I've searched and found some functions to the job but this one is closer to what I had in mind .
when I use the add button the tabstrip is made but the contecturl link doesn't work and it's just an empty tab.
<------------------------ web-part ------------------------>
<div class="row">
<input type='text' id='tabname' name='tabname'>
<input type='text' id='tabLink' name='tabLink'>
<input type="button" value="Add Tab" onclick="AddTab()" />
<input type="button" value="Remove Tab" onclick="closeTab()" />
</div>
<div id="tabstrip">
<ul id="tabStripUL">
<li class="k-state-active">tab1</li>
<li>tab2</li>
<li>tab3</li>
</ul>
<------------------------ Javascript ------------------------>
$(document).ready(function () {
InitLoadTabstrip();
});
function InitLoadTabstrip() {
var ts = $("#tabstrip").kendoTabStrip({
animation: { open: { effects: "fadeIn" } },
select: function(element){selecttab(element)},
contentUrls: [
'Page1.html',
'Page2.html',
'Page3.html',
]
}).data('kendoTabStrip');
}
function selecttab(element) {
var tabStrip1 = $('#tabstrip').kendoTabStrip().data("kendoTabStrip");
var item = tabStrip1.element.find("li:contains("+$(element.item).text()+")"),
itemIdx = item.index();
$("#tabstrip").data("kendoTabStrip").select(itemIdx);
}
function AddTab() {
var title = jQuery("#tabname").val();
var Address = jQuery("#tabLink").val();
var tabStrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");
tabStrip.append({
text: title,
contentUrl: Address
});
tabStrip.select((tabStrip.tabGroup.children("li").length - 1));
}
function closeTab() {
var tabStrip = $('#tabstrip').kendoTabStrip().data("kendoTabStrip");
tabStrip.remove(tabStrip.select());
tabStrip.select((tabStrip.tabGroup.children("li").length - 1));
}
It should get a name and an Address and add that tab to the tabstrip or remove it based on the button.
I'd really appreciate it if someone could help.
<---------------------------- A quick update ----------------------------->
I tried to remove the buttons and simply add a single parameter to the addTab function to add each page that the is called . something like this :
function addTab(tabName) {
var tabStrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");
if (tabName == "name1") {
tabStrip.append({
text: "title1",
contentUrl: 'page1.html',
});
}
else if (tabName == "name2") {
tabStrip.append({
text: "title2",
contentUrl: 'page2.html',
});
}
tabStrip.select((tabStrip.tabGroup.children("li").length - 1));
}
and call them like this :
$(document).ready(function () {
InitLoadTabstrip();
});
function InitLoadTabstrip() {
var ts = $("#tabstrip").kendoTabStrip({
animation: { open: { effects: "fadeIn" } },
select: function(element){selecttab(element)},
contentUrls: [
]
}).data('kendoTabStrip');
addTab("name1");
addTab("name2");
}
right now the problem is when I try to add more than one tab , one after the other(like the code), tabstrip sets both list items as active and it breaks the tabstrip. I think it's probably because of the 'tabstrip.select' , but I don't really understand what went wrong .

So I managed to fix it on my own , thought it may help someone else later .
the problem was that after appending I had multiple list items with "k-state-active" class that broke my tabstrip . I used jquery to manually remove the active classes whereever they were and add it up to the first li .
also I used to create a new variable each time I called addTab() instead of working on the same variable which made the whole thing alot slower and didn't have animation and select. so I made 'ts' public to be used in all the functions.
so that final code is like this :
<---------------HTML------------------>
<div id="tabstrip" style="width: 100%">
<ul id="tabStripUL">
</ul>
</div>
<----------------Script--------------->
var ts;
$(document).ready(function () {
InitLoadTabstrip();
});
function InitLoadTabstrip() {
ts = $("#tabstrip").kendoTabStrip({
animation: { open: { duration: 150, effects:"fadeIn" }
},
select: function(element){selecttab(element)},
contentUrls: [
]
}).data('kendoTabStrip');
addTab("tab1");
addTab("tab2");
}
//ts couldn't work on selecttab because of call limited size (don't really know what it is)
function selecttab(element) {
var tabStrip1 = $('#tabstrip').kendoTabStrip().data("kendoTabStrip");
var item = tabStrip1.element.find("li:contains("+$(element.item).text()+")"),
itemIdx = item.index();
$("#tabstrip").data("kendoTabStrip").select(itemIdx);
}
function addTab(tabSelect) {
if (tabSelect == "tab1") {
ts.append({
text: "title1",
contentUrl: 'page1.html',
});
//sets an id to each tab
ts.tabGroup.children().last().attr("id", "tab1");
}
else if (tabSelect == "tab2") {
ts.append({
text: "title2",
contentUrl: 'page2',
});
ts.tabGroup.children().last().attr("id", "tab2");
}
ts.select((ts.tabGroup.children("li").length - 1));
$("#tabstrip li").find(".k-state-active").removeClass("k-state-active k-tab-on-top");
$("#tabstrip li:first").addClass("k-state-active k-tab-on-top");
}
// ClearTS: clears all the tabs and contents
function clearTS() {
$("#tabstrip li").remove();
$("#tabstrip .k-content").remove();
Hope it helps !

Pass parameters for only one modal wiht UIkit

I'm using UIkit(2.27.2) mainly to manage modals.
And I would like to edit the default labels button of a confirm dialog
So I used the following
UIkit.modal.confirm('My text here',
function(){ //Click ok } ,
function(){ //Click cancel } ,
{
labels: {
"Cancel": 'No, let me check a last time',
"Ok": 'Ok, I want to store the final result'
}
}
);
And it's working fine.
The problem is that once I used that, all my others modals have also thoses buttons! And I don't want that.
How to pass parameters for only one modal?
I tried to add this code juste after my modal but it's not "proper".
UIkit.modal.confirm('',
function(){ } ,
function(){ } ,
{
labels: {
"Cancel": 'Cancel',
"Ok": 'Ok'
}
}
).remove();
After this, all the others modals are fine, and only the one selected have custom labels. But a "blank" modal is appearing, the .remove() does not seems working well.

I don't really like this answer but since it's the only one that I found... it may help other people.
So, after the declaration of my modal with special labels I used this code
var modal = UIkit.modal.confirm('',
function(){ } ,
function(){ } ,
{
labels: {
"Cancel": 'Cancel',
"Ok": 'Ok'
}
}
);
if ( modal.isActive() ) {
modal.hide();
}

On click of button, I want to validate the data and if true i want the delete-confirmation dialog.. Is it possible?

I have two date pickers, from date and to date, and a delete button.
On click of delete, validation should be done if from date is greater than to date and etc then the delete-confirmation popover should come displaying yes or no.
If clicked on yes, the delete callback should be called else it will return false!
How to do so??
Any help would be appreciated
This is my code
"#Delete click": function(el, ev) {
this.validate();
this.confirmation("#Delete", "Are you sure?", "Yes", "No", this.deleteConfirmCallback, this);
},
confirmation: function(element, text, yesText, noText, yesCallback, context) {
$(element).confirmation({
title: text,
singleton: true,
popout: true,
btnOkClass: "btn btn-sm default-color",
btnCancelClass: "btn btn-sm primary-color text-case ",
btnOkLabel: yesText,
btnCancelLabel: noText,
btnOkIcon: "glyphicon-tiny glyphicon-ok",
btnCancelIcon: "glyphicon-tiny glyphicon-remove",
onConfirm: function() {
yesCallback(context, this);
}
});
},
Blockquote
For the first time click I'm not able to get that delete-confirmation popup
Blockquote

Try some thing like this:
if('#btn').click(function(){
if($('#fromDate').val() > $('#toDate').val())
// You can also make a function to check this and call it here
{
// Open delete confirm
// Check if user select OK or cancel and make an ajax call to delete if use select delete option
}
});

you may try like this:
var from_date = $("#from_date").val();
var to_date = $("#to_date").val();
if(from_date > to_date) {
//true condition statement
// should be alert or confirmation
} else {
//false condition statement
// should be alert or confirmation
}

Set global instance of toastmessage using akquinet jquery toast message plugin

I was using jquery plugin to show toast message on the click of a button given a certain condition. But as and when I click on the button new toast message is shown. What I want to show is just one toast message being shown on the click of that button meaning, it should not show another toast message when my first toast message is still on the screen.
Is there some way to have global instance of it and then showing the same each time rather than show new one ?
Any help would be appreciated. Thanks in advance.

You could use a boolean to remember if the toast message is displayed. See jsfiddle (forked from the official demo). You could also use the myToast variable as "boolean" in a similar way.
$(document).ready(function() {
var isDisplaying = false;
var yourText = 'Success Dialog which is NOT sticky',
toastMessageSettings = {
text: yourText,
sticky: false,
position: 'top-right',
type: 'success',
closeText: '',
close: function() {
console.log("toast is closed ...");
isDisplaying = false;
}
};
$('#mybutton').click(function() {
if ( ! isDisplaying) {
var myToast = $().toastmessage('showToast', toastMessageSettings);
console.log('myToast:');
console.log(myToast);
isDisplaying = true;
}
});
});
<script src="http://akquinet.github.com/jquery-toastmessage-plugin/demo/jquery.toastmessage-min.js"></script>
<link href="http://akquinet.github.com/jquery-toastmessage-plugin/demo/css/jquery.toastmessage-min.css" rel="stylesheet"/>
<h1>jquery-toastmessage-plugin Demo
<br/><span class="small">by akquinet</span></h1>
<button id="mybutton">Press it</button>

Calling href in Callback function

I have a anchor tag in my page for logout.
<a href="/logout/" id="lnk-log-out" />
Here I am showing a Popup for confirmation with jQuery UI dialog.
If user click Yes from dialog it has to execute the link button's default action, I mean href="/logout".
If No clicked a Popup box should be disappeared.
jQuery Code
$('#lnk-log-out').click(function (event) {
event.preventDefault();
var logOffDialog = $('#user-info-msg-dialog');
logOffDialog.html("Are you sure, do you want to Logout?");
logOffDialog.dialog({
title: "Confirm Logout",
height: 150,
width: 500,
bgiframe: true,
modal: true,
buttons: {
'Yes': function () {
$(this).dialog('close');
return true;
},
'No': function () {
$(this).dialog('close');
return false;
}
}
});
});
});
The problem is I am not able to fire anchor's href when User click YES.
How can we do this?
Edit: Right now I managed in this way
'Yes': function () {
$(this).dialog('close');
window.location.href = $('#lnk-log-out').attr("href");
}

In the anonymous function called when 'Yes' is fired, you want to do the following instead of just returning true:
Grab the href (you can get this easily using $('selector').attr('href');)
Perform your window.location.href to the url you grabbed in point 1
If you want the a tag to just do it's stuff, remove any preventDefault() or stopPropagation(). Here I have provided two different ways :)
Don't use document.location, use window.location.href instead. You can see why here.
Your code in the 'Yes' call should look something like, with your code inserted of course:
'Yes': function () {
// Get url
var href = $('#lnk-log-out').attr('href');
// Go to url
window.location.href = href;
return true; // Not needed
}, ...
Note: Thanks to Anthony in the comments below: use window.location.href = ... instead of window.location.href(), because it's not a function!

I have used this in many of my projects so i suggest window.location.href
'Yes': function () {
$(this).dialog('close');
window.location.href="your url"
return true;
},