We Keep Coding

Selected input text by default (focus) in ContextMenu

I have a text field generated by contextmenu, and I want it to be selected by default (autofocus by default). I do not succeed with the function jquery focus [$ ('. classInput'). focus ()]
$(function(){
$.contextMenu({
selector: '.input-context-menu',
items: {
// <input type="text">
name_input: {
name: "Name input :",
type: 'text',
value: "value_input",
events: {
keyup: function(e) {
...

Set focus in the events.show section.
You'll need timeout to let the input element appear in the DOM before setting focus.
The input name will be prefixed with context-menu-input-.
See the snippet below:
$(function() {
$.contextMenu({
selector: '.context-menu-one',
items: {
// <input type="text">
input1: {
name: "Text",
type: 'text',
value: "Hello World",
events: {
keyup: function(e) {
window.console && console.log('key: ' + e.keyCode);
}
}
}
},
events: {
show: function(opt) {
var $this = this;
$.contextMenu.setInputValues(opt, $this.data());
// Set focus to the input element
setTimeout(() => {
$('[name="context-menu-input-input1"]').focus();
}, 10);
},
hide: function(opt) {
var $this = this;
$.contextMenu.getInputValues(opt, $this.data());
}
}
});
});
<link href="https://swisnl.github.io/jQuery-contextMenu/dist/jquery.contextMenu.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://swisnl.github.io/jQuery-contextMenu/dist/jquery.contextMenu.js" type="text/javascript"></script>
<span class="context-menu-one btn btn-neutral">right click me</span>
Hope this helps.

How to Send Data to KendoWindow Close Event

I'm trying to open a Kendo UI kendoWindow from within an MVC View. I also use a Partial View as the content of the kendoWindow. Moreover, I use the Kendo UI MVVM pattern to bind my elements.
First let me to show you my main View and my pop-up Partial View (kendoWindow).
The important part of my main View (Parent) is as follows:
#{
ViewBag.Title = "My Main View";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<script src="~/Scripts/ViewModel/main.js"></script>
<script src="~/Scripts/InitView/main.js"></script>
<script type="text/javascript">
var viewModel;
$(function () {
viewModel = initVm({
GetPartialContent_Url: '#Url.Action("GetPartialContent")'
});
initView(viewModel);
kendo.bind($("#container"), viewModel);
viewModel.Onread();
});
</script>
<div id="container">
<div id="Window-box"></div>
// Some other elements like the button which opens the kendoWindow are defined here.
</div>
My initVm is as follows:
function initVm(arg) {
var vm = kendo.observable({
onOpenKendoWindow: function () {
$("#Window-box").kendoWindow({
iframe: true,
content: arg.GetPartialContent_Url,
title: 'Some Title',
width: 500,
height: 'auto',
close: function (e) {
//Is it possible to get some data from kendoWindow (Partial View) here?
}
});
var dialog = $("#Window-box").data("kendoWindow");
dialog.maximize();
}
});
return vm;
}
Until now, I showed you the important parts of my main View. Now I want to show you the important parts of my kendoWindow (Partial View).
My Partial View which is used as the content of the kendoWindow is as follows:
#{
Layout = "~/Views/Shared/_PartialLayout.cshtml";
}
<script src="~/Scripts/ViewModel/partial.js"></script>
<script src="~/Scripts/InitView/partial.js"></script>
<script type="text/javascript">
var partialVM;
$(function () {
partialVM = initPartialVm({
GetTransactions_Url: '#Url.Action("GetTransactions", "Account")'
});
initPartialView(partialVM);
kendo.bind($("#container"), partialVM);
});
</script>
<div id="container">
<div id="gridTransactions"></div>
</div>
And my initPartialVm is as follows:
function initPartialVm(arg) {
var vm = kendo.observable({
onSelectTransaction: function () {
// KendoWindow should be closed here and passing some data from here to main View (close event of kendowWindow);
}
});
return vm;
}
Note: The 'gridTransactions' is a Kendo UI GridView (inside of kendoWindow - Partial View). Each rows of this grid has a select button and the 'onSelectTransaction' function is fired when each of these select buttons is clicked.
And finally, the main question is that, how can I close the kendowWindow by clicking each select button of the GridView and pass some data to the close event of the kendowWindow?

Yes it is possible. I found it much easier and a bit cleaner to wrap all the dialog functionality up into a dialog controller and extend it a bit in javascript.
Once the .js part is done it makes for a cleaner use. If you don't prefer to do this then look for the findDialog function below (it shows how get a handle to a dialog and call the close method on it).
As far as sending data on close, It would be easy to add a callback in the dialog to be called when the dialog is closed, supplied on invocation, then add a property in the widget to set the custom data to pass through in the dialogs close() back to the consumers event handler.
Also, please note I am no javascript expert, it took me longer than I would like to admit to work the bugs out of this but it has held up solidly for about 6 years. Feel free to offer suggestions.
In Bundle Config:
bundles.Add(new ScriptBundle("~/bundles/myCustom").Include(
...
"~/Scripts/MyCustom/MyCustomDialogs.js",
...
));
Where you register scripts:
#Scripts.Render("~/bundles/MyCustom")
In your index view or parent view :
<div id="_applicationDialogs"></div>
<div id="_mainAppContentLoadsHere"></div>
var _mainDialogController;
$(document).ready(function () {
...
_mainDialogController = $("#_applicationDialogs").kendoMyCustomDialogController().data("kendoMyCustomDialogController");
...
}
Where you want to invoke the dialog: SomePartial
function lnkDetailsOnClick(someID) {
_mainDialogController.createDialog({
dialogId: "frmUserDetail_" + someID,
modal: false,
title:"Daily Details",
pin: true,
height: 575,
width: 1025,
actions: ["Refresh", "Maximize", "Minimize", "Pin", "Close"],
url: '#Url.Action("SomePartialView", "SomeController")',
data:{
someID: someID,
dialogName:'frmUserDetail_'+ someID //NOTE : This will come back in the invoked partial as Model.DialogName so it can be dismissed with ease.
}
});
}
Dismissing the Dialog Inside of SomePartial :
#model MyModelThatHasTheDialogHandle
function btnClose_Click() {
var dialog = _mainDialogController.findDialog('#Model.DialogName');
dialog.close();
}
Now for the long .js file :
(function ($) {
var kendo = window.kendo,
ui = kendo.ui,
Widget = ui.Widget;
var MyCustomDialogController = Widget.extend({
init: function (element, options) {
var that = this;
Widget.fn.init.call(this, element, options);
that._create();
},
onResize: function () { },
options: {
modal: true,
dialogId: "dlgController1",
url: "",
data: null,
pin: false,
width: 300,
height: 300,
actions:["Close"],
title: "Information",
disableMaximize:false,
name: "MyCustomDialogController",
autosize: false,
onDialogClosed: null,
hideOnClose: false
},
_create: function () {
var that = this;
},
createDialog: function (options) {
var that = this;
var wrapperName = options.dialogId + "_wrapper";
that.element.append("<div id='" + wrapperName + "'></div>");
var wrapperElement = that.element.find("#" + wrapperName);
wrapperElement.kendo_MyCustomDialog(options);
},
findDialog: function (dialogId) {
that = this;
var wrapperName = dialogId+"_wrapper";
var dialog = $("#" + wrapperName);
//var dialog = wrapper.find("#" + dialogId);
return dialog.data("kendo_MyCustomDialog");
},
forceCloseAllDialogs: function ()
{
that = this;
$('.MyCustom-window').each(function () {
$(this).data("kendoWindow").close();
});
},
isModalWindowActive: function ()
{
that = this;
return $('.MyCustom-window-modal').length > 0;
},
currentModalWindow: function () {
that = this;
return that.findDialog($('.MyCustom-window-modal')[0].id);
}
});
ui.plugin(MyCustomDialogController);
})(jQuery);
(function ($) {
var kendo = window.kendo,
ui = kendo.ui,
Widget = ui.Widget;
var _MyCustomDialog = Widget.extend({
init: function (element, options) {
var that = this;
Widget.fn.init.call(this, element, options);
that._create();
},
onResize: function () { },
options: {
modal: true,
dialogId: "frmMain",
url: "",
data: null,
pin: false,
width: 300,
height: 300,
actions: ["Close"],
title: "Information",
name: "_MyCustomDialog",
disableMaximize:false,
autosize: false,
onDialogClosed: null,
hideOnClose:false
},
_create: function () {
var that = this;
that.isModalWindowActive = true;
that.modifiedData = false;
that.frmElement = $("#" + that.options.dialogId).data("kendoWindow");
if (that.frmElement == null) {
var template ;
if(that.options.modal)
template = kendo.template(that._templates.divModalFormWrapper);
else
template = kendo.template(that._templates.divFormWrapper);
that.wrapper = $(template(that.options));
that.element.append(that.wrapper);
if (that.options.autosize)
{
that.options.height =null;
that.options.width = null;
}
that.frmElement = that.wrapper.kendoWindow({
title: "Loading...",
modal: that.options.modal,
visible: that.options.autosize,
draggable: true,
resizeable:!that.options.disableMaximize,
width: that.options.width,
height: that.options.height,
resizeable: true,
pinned:that.options.pin,
resize: function () {
that.onResize();
},
content: {
url: that.options.url,
data: that.options.data,
type: "POST",
datatype: "json",
traditional: true
},
refresh: function () {
that.frmElement.title(that.options.title);
if (that.options.autosize) {
that.frmElement.center();
}
},
actions: that.options.actions,
close: function (e) {
that.IsModalWindowActive = false;
if (that.options.hideOnClose == false) {
if (that.frmElement != null)
that.frmElement.destroy();
this.destroy();
that.wrapper.remove("#" + that.options.dialogId);
that.wrapper.empty();
}
if (that.options.onDialogClosed) {
that.options.onDialogClosed(that.modifiedData);
}
}
}).data("kendoWindow");
}
if (that.options.autosize)
that.frmElement.center().open();
else if (that.options.hideOnClose == true)
that.frmElement.open();
else
that.frmElement.center().open();
if (that.options.pin)
that.frmElement.pin();
},
setModifiedFlag:function(modified)
{
var that = this;
that.modifiedData = modified;
},
close: function () {
var that = this;
that.frmElement.close();
},
show: function () {
var that = this;
that.wrapper.show();
that.frmElement.open();
},
setTitle: function (title) {
var that = this;
that.frmElement.title(title);
},
height: function () {
var that = this;
var wtfHeight = that.frmElement.options.height;
if (isNaN(wtfHeight)) {
if (wtfHeight.indexOf("px") >= 0)
wtfHeight = wtfHeight.replace("px", "");
}
return wtfHeight;
},
_templates: {
divModalFormWrapper: "<div id='#=dialogId#' class='MyCustom-window MyCustom-window-modal'></div>",
divFormWrapper: "<div id='#=dialogId#' class='MyCustom-window'></div>"
}
});
// add the widget to the ui namespace so it's available
ui.plugin(_MyCustomDialog);
})(jQuery);

localstorage value is changed on page refresh

I am creating an welcomescreen for my html app. and im using a welcomescreen plugin from github. you can check it here https://github.com/valnub/welcomescreen.js
now i want to show welcome screen when localstorage value is 0. and when close button of welcomescreen is clicked i am changing the localstorage value to 1. but on page refresh the localstorage value is again set to 0.
how to do that this is my js file.
/*jslint browser: true*/
/*global console, Welcomescreen, $*/
// Init method
$(document).ready(function () {
localStorage.setItem("welscreen", "0");
var welcomeTour = localStorage.getItem("welscreen");
if (welcomeTour == 0) {
$(document).ready(function () {
var options = {
'bgcolor': '#0da6ec',
'fontcolor': '#fff',
'onOpened': function () {
console.log("welcome screen opened");
console.log(welcomeTour);
},
'onClosed': function () {
localStorage.setItem("welscreen","1");
var welcomeTour = localStorage.getItem("welscreen");
console.log("welcome screen closed");
console.log(welcomeTour);
}
},
welcomescreen_slides,
welcomescreen;
welcomescreen_slides = [
{
id: 'slide0',
picture: '<div class="tutorialicon">♥</div>',
text: 'Welcome to this tutorial. In the <a class="tutorial-next-
link" href="#">next steps</a> we will guide you through a manual that will teach you how to use this app.'
},
{
id: 'slide1',
picture: '<div class="tutorialicon">✲</div>',
text: 'This is slide 2'
},
{
id: 'slide2',
picture: '<div class="tutorialicon">♫</div>',
text: 'This is slide 3'
},
{
id: 'slide3',
picture: '<div class="tutorialicon">☆</div>',
text: 'Thanks for reading! Enjoy this app or go to <a class="tutorial-previous-slide" href="#">previous slide</a>.<br><br><a class="tutorial-close-btn" href="#">End Tutorial</a>'
}
];
welcomescreen = new Welcomescreen(welcomescreen_slides, options);
$(document).on('click', '.tutorial-close-btn', function () {
welcomescreen.close();
});
$('.tutorial-open-btn').click(function () {
welcomescreen.open();
});
$(document).on('click', '.tutorial-next-link', function (e) {
welcomescreen.next();
});
$(document).on('click', '.tutorial-previous-slide', function (e) {
welcomescreen.previous();
});
});
};
});

Change this:
localStorage.setItem("welscreen", "0");
var welcomeTour = localStorage.getItem("welscreen");
to this:
var welcomeTour = localStorage.getItem("welscreen");
if(welcomeTour === undefined || welcomeTour === null) {
localStorage.setItem("welscreen", "0");
welcomeTour = "0";
}

Jquery - Passing parameters to a function

I want to pass an ID to a function that turns it to a "flyout".
My base code is:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="target_anchor1" href="#" title="XXXXXXXXXX">test 1</a>
<script type="text/javascript">
$(function() {
$('#target_anchor1').flyout({
title: '',
content: function() {
return document.getElementById('target_anchor1').title;
},
html: true,
dismissible: true
});
});
</script>
I want to do this dynamically, so I tried a function.
Function gets the parameter but does not create the flyout.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="target_anchor1" href="#" title="XXXXXXXXXX" onclick="anchorFlyout(this.id)">test 1</a>
<a id="target_anchor2" href="#" title="YYYYYYYYYY" onclick="anchorFlyout(this.id)">test 2</a>
<a id="target_anchor3" href="#" title="ZZZZZZZZZZ" onclick="anchorFlyout(this.id)">test 3</a>
<script type="text/javascript">
function anchorFlyout(paramId) {
alert(paramId);
$('#' + paramId).flyout({
title: '',
content: function() {
return document.getElementById(paramId).title;
},
html: true,
dismissible: true
});
}
</script>
Code is taken from http://www.jqueryscript.net/demo/Simple-Customizable-Tooltip-Popover-Plugin-Flyout
Any idea?

Do you just want to be able to pass an ID to a function that turns it to a "flyout"?
function createFlyout(elementID) {
$("#"+elementID).flyout({
title: '',
content: function() {
return document.getElementById(elementID).title;
},
html: true,
dismissible: true
});
}
Or you could use a custom JQuery function...
$.fn.createFlyout = function() {
this.flyout({
title: '',
content: function() {
return this.attr("title");
},
html: true,
dismissible: true
});
return this;
}
$("#myDiv").createFlyout();

Just make a regular function and have jquery statements in it:
function anchorFlyout(paramId) {
$("#" + paramId).flyout({
title: '',
content: function() {
return document.getElementById(paramId).title;
},
html: true,
dismissible: true
});
};
anchorFlyout("target_anchor1")

Access jQueryUI Dialog buttons upon creation

How do I access jQueryUI Dialog buttons upon creation and get their size? As a workaround, I could do so when it is opened.
http://jsfiddle.net/1ueho4tq/
var $button1;
var dialog = $('#dialog').dialog({
autoOpen: false,
create: function (event, ui) {
var $button1 = $('#button1');
console.log("$button1 create", $button1, $button1.outerHeight(), $button1.position().top);
},
open: function (event, ui) {
if (!$button1) {
$button1 = $('#button1');
console.log("$button1 open", $button1, $button1.outerHeight(), $button1.position().top);
}
},
buttons: [{
id: 'button1',
text: 'Upload',
click: function () {
console.log('button1');
}
}, {
id: 'button2',
text: 'Save',
click: function () {
console.log('button2');
}
}, {
text: 'Cancel',
click: function () {
$(this).dialog("close");
}
}]
});
$('#open').click(function () {
dialog.dialog('open');
});
<div id="dialog"></div>
<button id="open">Open</button>

You can get the jQuery UI dialog buttons using buttons option getter.
Code:
var buttons = $('#dialog').dialog('option', 'buttons');
But if you need to check their dimensions you need to use the array after the dialog is opened.
Code:
open: function (event, ui) {
$.each(buttons, function (i, e) {
console.log($('#'+e.id).outerHeight())
});
},
Demo: http://jsfiddle.net/f4m6z9hc/