Develop Reference

insert a function inside an event jquery

i'm trying to insert a function inside this jquery event. This is the event
$(":checkbox").on('change', function() {
$.fn.myFunction();
})
and this is myFunction
$.fn.myFunction = function() {
alert('ciao');
if ($(this).is(':checked')) {
InputInserireInput = $(this).parent().parent().parent().find('.inserirePrezzoDiv');
$(this).closest('div').parent().parent().find('select').prop('value','0');
$(this).find('button').css('background-color','#c31432')
var checkbox = $(this);
InputInserireInput.removeClass('hidden');
var checkboxSelected = $(this).attr('id');
var nomeServizio = ($(this).next('label').text());
$(this).closest('div').parent().parent().find('.titoloPiega').css('color', 'black')
$(this).closest('div').parent().parent().find('button').css('margin-top', -50)
var titleLabel = $(this).closest('div');
var titleSelect = $(titleLabel).parent().parent().find('.titoloPiega');
var option1 = $(titleLabel).parent().parent().find('.option1');
var option2 = $(titleLabel).parent().parent().find('.option2');
var selectOption = ($(titleLabel).parent().parent().find('select'));
var selectOptionID = ($(titleLabel).parent().parent().find('select').attr('id'));
$(selectOption).on('change', function () {
var selectedOption = $(selectOption).prop('value');
if (selectedOption == 1 && checkbox.is(':checked')) {
InputInserireInput.addClass('hidden');
option2.addClass('hidden');
option1.removeClass('hidden');
}
if (selectedOption == 2 && checkbox.is(':checked')) {
InputInserireInput.addClass('hidden');
option1.removeClass('hidden');
option2.removeClass('hidden');
}
if (selectedOption == 0 && checkbox.is(':checked')) {
InputInserireInput.removeClass('hidden');
option1.addClass('hidden');
option2.addClass('hidden');
}
});
} else {
$('.inserirePrezzoDiv').addClass('hidden');
$(this).closest('div').parent().parent().find('.titoloPiega').css('color', '#a5a6a7');
$(this).closest('div').parent().parent().find('select').prop('value','0');
$(this).closest('div').parent().parent().find('.option1').addClass('hidden');
$(this).closest('div').parent().parent().find('.option2').addClass('hidden');
$('.bottoneCss6').css('margin-bottom', 0)
}
};
The first allert work but then all the if statement i thik doesn' match with the event declared before the function. Can anyone help me?

try by replacing :
$(":checkbox").on('change', function() {
$(this).myFunction()
})
you will pass the this (current checkbox) scope to myFunction

jQuery JsTree version 3+ plugin DND

Where can I get information after drag:
Target element
Where was the moving element included (inside, after, before)
ad1) I found target element like this:
$(document).on('dnd_stop.vakata', function (e, data) {
var t = $(data.event.target);
);
ad2) I do not know
In version 1+ I found it like this:
$("#tree").bind("move_node.jstree", function (e, data) {
var idMoveElement = data.rslt.o.attr('id');
var idTargetElement = data.rslt.r.attr('id');
var where = data.rslt.p;
}
pretty easy... but in version 3+ I do not know.
Can you help me?
Thank you.

My solution:
$('#tree_structure').bind('move_node.jstree', function (e, data) {
if(data.parent !== '#') {
var infoAfterDnd = getTargetElementAndWhere(data);
if(infoAfterDnd .target.length > 0 && infoAfterDnd.where !== '') {
console.log(infoAfterDnd);
}
}
});
getTargetElementAndWhere = function(data) {
var where = '';
var $parent = $('#' + data.parent);
var $target = $('li:nth-child(' + data.position + ')', $parent);
if($target.length > 0)
where = 'after';
else {
where = 'inside';
$target = $parent;
}
return { where: where, target: $target };
},

Why function(document) doesn't work in separate file?

I have an HTML file and this contain JavaScript code and works fine, but when I decided put the JS code in different file and call from the HTML file, doesn't work. Why?
The JS code is like this:
(function (document) {
var toggleDocumentationMenu = function () {
var navBtn = document.querySelector('.main-nav1');
var navList = document.querySelector('.main-nav2');
var navIsOpenedClass = 'nav-is-opened';
var navListIsOpened = false;
navBtn.addEventListener('click', function (event) {
event.preventDefault();
if (!navListIsOpened) {
addClass(navList, navIsOpenedClass);
navListIsOpened = true;
} else {
removeClass(navList, navIsOpenedClass);
navListIsOpened = false;
}
});
};
var toggleMainNav = function () {
var documentationItem = document.querySelector('.main-nav3');
var documentationLink = document.querySelector('.main-nav3 > .main-sub-nav');
var documentationIsOpenedClass = 'subnav-is-opened';
var documentationIsOpened = false;
if (documentationLink) {
documentationLink.addEventListener('click', function (event) {
event.preventDefault();
if (!documentationIsOpened) {
documentationIsOpened = true;
addClass(documentationItem, documentationIsOpenedClass);
} else {
documentationIsOpened = false;
removeClass(documentationItem, documentationIsOpenedClass);
}
});
}
};
var isTouch = function () {
return ('ontouchstart' in window) ||
window.DocumentTouch && document instanceof DocumentTouch;
};
var addClass = function (element, className) {
if (!element) {
return;
}
element.className = element.className.replace(/\s+$/gi, '') + ' ' + className;
};
var removeClass = function (element, className) {
if (!element) {
return;
}
element.className = element.className.replace(className, '');
};
toggleDocumentationMenu();
toggleMainNav();
})(document);
I read it's possible that works if I put like this:
$(document).ready(function() {
// the javascript code here
});
But it still doesn't working.
Now I wonder, It's possible this code works fine in separate file?

About javascript showbox,I need some help! online~~

<div id="wrapper">
<button id="ppp">button</button>
<div id="content" style="display:none;"></div>
</div>​
if i click the button,the content will be show(open),
if the content is on show(open),when i click document(except the content),the content will be close.
var $ = function (id){
return !id ? null : document.getElementById(id);
}
var addEventSimple = function(obj, evt, fn) {
if (obj.addEventListener){ // W3C
obj.addEventListener(evt, fn, false);
}else if (obj.attachEvent) // Microsoft
obj.attachEvent('on' + evt, fn);
}
var button = $('ppp'),
content = $('content');
var init = function() {};
init.handleObj = button;
init.showbox = content;
init.flag = false;
init.allowcls = false;
init.open = function () {//open the content
if (this.flag == false) {
this.showbox.style.display = "block";
this.flag = true;
this.allowcls = true;
}
};
init.close = function () { // close the content
if (this.flag && this.allowcls) {
this.showbox.style.display = "none";
this.flag = false;
this.allowcls = false;
}
};
init.load = function() { // button click
//e = e ||window.event;
//e.preventDefault();
if (this.flag) {
this.close();
} else {
this.open();
}
};
init.clickClose = function(e) { // document click
if (!this.allowcls) {
return;
}
e = e ||window.event;
var target = e.target;
if (target === this.showbox) { // button
return;
}
this.close();
};
addEventSimple(button, 'click', function (){
init.load();//the code run here OK
})// error on here,but i don't know why?
addEventSimple(document, 'click', function (e){
init.clickClose(e);
})
code in here :http://jsfiddle.net/DCty3/

To toggle element display, you can use function like this:
function toggleDisplay(id) {
var elem = document.getElementById(id);
elem.style.display = (elem.style.display != 'none' ? 'none' : '');
}
There is unlimited id toggle script too:
function toggle() {
for ( var i=0; i < arguments.length; i++ ) {
var elem = document.getElementById(id);
elem.style.display = (elem.style.display != 'none' ? 'none' : '' );
}
}
With jQuery it will be just:
function toggleDisplay(id) {
$('#' + id).toggle();
}
I like getting fancy with objects, here is another multifunctional method:
var display = {
show : function() {
for ( i=0; i < arguments.length; i++ ) {
document.getElementById(arguments[i]).style.display = '';
}
},
hide : function() {
for ( i=0; i < arguments.length; i++ ) {
document.getElementById(arguments[i]).style.display = 'none';
}
},
toggle : function() {
for ( i=0; i < arguments.length; i++ ) {
var elem = document.getElementById(arguments[i]);
elem.style.display = (elem.style.display != 'none' ? 'none' : '' );
}
}
};
To use it, do something like this:
display.show('content','content2','content3');
display.hide('content','content2','content3');
display.toggle('content','content2','content3');
For convenience, you can add another function to enable button:
function toggleDisplayButton(bId, cId) {
document.getElementById(bId).onclick = (function() {
toggleDisplay(cId);
});
}
window.onload = (function() {
toggleDisplayButton('ppp','content');
});
To enable function, when user clicks "outside" the box, and it closes, there is used an easy trick, by creating another element in background, that covers all area around:
<div id="wrapper">
<button id="ppp">button</button>
<div id="outerBox" style="display:none;"></div>
<div id="content" style="display:none;">1</div>
</div>
CSS should make your container relative positioned and "trick box", absolutely positioned, with maximum size of screen, and z-indexed under container like this:
#content{width:100px;height:100px;background-color:#efefef;border:1px solid #555555;z-index:56;position:relative;}
#outerBox{width:100%;height:100%;position:absolute;top:0;left:0;z-index:55;}
And make it work like this:
var display = {
toggle : function() {
for ( i=0; i < arguments.length; i++ ) {
var elem = document.getElementById(arguments[i]);
elem.style.display = (elem.style.display != 'none' ? 'none' : '' );
}
}
};
function toggleBox() {
document.getElementById('ppp').onclick = (function() {
display.toggle('content','outerBox');
});
document.getElementById('outerBox').onclick = (function() {
display.toggle('content','outerBox');
});
}
onload = function() {
toggleBox();
}
The result looks like this.

Your question is exactly same as this one:-
Check out this post :-
jQuery on click $(document) - get clicked element
Hope this will help.

Slickgrid, column with a drop down select list?

Hi I was wondering if anyone knows if it's possible to define a column in slickgrid as being a drop down select list. If not does anyone with some experience with slickgrid know how I should go about adding this option?
Thanks

You probably dont want to make a new select editor for each range of options. Also you may not know that range of all option value beforehand.
In that case you want a flexible range of options in a select type editor. In order to do this you can add an extra option to your column definitions (e.g. called options) like this:
var columns = [
{id:"color", name:"Color", field:"color", options: "Red,Green,Blue,Black,White", editor: SelectCellEditor},
{id:"lock", name:"Lock", field:"lock", options: "Locked,Unlocked", editor: SelectCellEditor}
]
and access that using args.column.options in the init method of your own SelectEditor object like this:
SelectCellEditor : function(args) {
var $select;
var defaultValue;
var scope = this;
this.init = function() {
if(args.column.options){
opt_values = args.column.options.split(',');
}else{
opt_values ="yes,no".split(',');
}
option_str = ""
for( i in opt_values ){
v = opt_values[i];
option_str += "<OPTION value='"+v+"'>"+v+"</OPTION>";
}
$select = $("<SELECT tabIndex='0' class='editor-select'>"+ option_str +"</SELECT>");
$select.appendTo(args.container);
$select.focus();
};
this.destroy = function() {
$select.remove();
};
this.focus = function() {
$select.focus();
};
this.loadValue = function(item) {
defaultValue = item[args.column.field];
$select.val(defaultValue);
};
this.serializeValue = function() {
if(args.column.options){
return $select.val();
}else{
return ($select.val() == "yes");
}
};
this.applyValue = function(item,state) {
item[args.column.field] = state;
};
this.isValueChanged = function() {
return ($select.val() != defaultValue);
};
this.validate = function() {
return {
valid: true,
msg: null
};
};
this.init();
}

I assume you mean a custom cell editor.
Here's a sample select-based boolean cell editor from slick.editors.js. You could easily modify it to work with an arbitrary set of possible values.
function YesNoSelectCellEditor($container, columnDef, value, dataContext) {
var $select;
var defaultValue = value;
var scope = this;
this.init = function() {
$select = $("<SELECT tabIndex='0' class='editor-yesno'><OPTION value='yes'>Yes</OPTION><OPTION value='no'>No</OPTION></SELECT>");
if (defaultValue)
$select.val('yes');
else
$select.val('no');
$select.appendTo($container);
$select.focus();
};
this.destroy = function() {
$select.remove();
};
this.focus = function() {
$select.focus();
};
this.setValue = function(value) {
$select.val(value);
defaultValue = value;
};
this.getValue = function() {
return ($select.val() == 'yes');
};
this.isValueChanged = function() {
return ($select.val() != defaultValue);
};
this.validate = function() {
return {
valid: true,
msg: null
};
};
this.init();
};

If your cell already contains a "select"-tag with multiple options, you can extract this html from the args. The approach differs from the previous answers, but I was personally troubled with these solutions, course my cell already contained a select-tag. I'd like to reuse this cell instead of reconstructing it completely in the this.init. Likewise, I'd like to keep using the same options, as my existing select already have, instead of parsing them to the var column = { ...
The $( args.item[ args.column.field ] ) return the active cells content, which basically just get re-appended to the the container (the cell-object). From if ( document.createEvent ) and down, is just a functionality which automatically opens the dropdown on activation; etc. when you use tabulator to navigate to the cell.
function SelectCellEditor( args ) {
var $select;
var defaultValue;
var scope = this;
this.init = function () {
$select = $( args.item[ args.column.field ] );
$select.appendTo( args.container );
$select.focus();
// Force the select to open upon user-activation
var element = $select[ 0 ];
if ( document.createEvent ) { // all browsers
var e = new MouseEvent( "mousedown", {
bubbles: true,
cancelable: true,
view: window
});
element.dispatchEvent( e );
} else if ( element.fireEvent ) { // ie
element.fireEvent( "onmousedown" );
}
};
}
Complet editor for Dropdown html-input -> Dropdown html-output
function SelectCellEditor( args ) {
var $select = $( args.item[ args.column.field ] );
var defaultValue;
var scope = this;
this.init = function () {
//$select
$select.appendTo( args.container );
// Force the select to open upon user-activation
var element = $select[ 0 ];
if ( document.createEvent ) { // all browsers
var e = new MouseEvent( "mousedown", {
bubbles: true,
cancelable: true,
view: window
});
element.dispatchEvent( e );
} else if ( element.fireEvent ) { // ie
element.fireEvent( "onmousedown" );
}
$select.on("click", function( e ) {
var selected = $( e.target ).val();
$select.find( "option" ).removeAttr( "selected" );
$select.find( "option[value='" + selected + "']" ).attr( "selected", "selected" );
});
};
this.destroy = function () {
$select.remove();
};
this.focus = function () { };
this.loadValue = function ( item ) { };
this.serializeValue = function () { };
// Only runs if isValueChanged returns true
this.applyValue = function ( item, state ) {
item[ args.column.field ] = $select[ 0 ].outerHTML;
};
this.isValueChanged = function () {
return true;
};
this.validate = function () {
return {
valid: true,
msg: null
};
};
this.init();
}

Without jq, and inline injected elements, packed in module:
'use strict';
class SelectCellWidget {
constructor(args) {
this._args = args;
this._$select = undefined;
this._defaultValue = undefined;
this._init();
}
_init () {
let selects, container, divend, opt_values;
const args = this._args;
if(args.column.options){
opt_values = args.column.options.split(',');
}else{
opt_values = ["yes","no"];
}
container = document.createElement("div");
container.classList.add('select-editable');
divend = document.createElement('input');
divend.setAttribute("type", "text");
divend.setAttribute("name", "format");
divend.setAttribute("value", "");
selects = document.createElement("select");//"<select id='Mobility' tabIndex='0' class='editor-select'>"+ option_str +"</select>";
selects.setAttribute("id", "Mobility");
selects.setAttribute("tabIndex", 0);
selects.setAttribute("class", "editor-select");
for(let i = 0; i < opt_values.length; i++) {
let v = opt_values[i];
let option = document.createElement("option");
option.setAttribute("value", v);
option.innerText = v;
selects.appendChild(option);
}
container.appendChild(divend);
container.appendChild(selects);
this._$select = container;
args.container[0].appendChild(this._$select);
this._$select.focus();
document.getElementById("Mobility").selectedIndex = args.item[args.column.field] ? opt_values.indexOf(args.item[args.column.field]) : 0;
}
destroy () {
this._$select.remove();
}
focus () {
this._$select.focus();
}
loadValue (item) {
this._defaultValue = item[this._args.column.field];
this._$select.value = this._defaultValue;
}
serializeValue () {
if(this._args.column.options){
return this._$select.lastElementChild.value;
}else{
return (this._$select.lastElementChild.value === "yes");
}
}
applyValue (item,state) {
item[this._args.column.field] = state;
}
isValueChanged () {
return (this._$select.lastElementChild.value !== this._defaultValue);
}
validate () {
return {
valid: true,
msg: null
};
}
}
module.exports=SelectCellWidget;
https://github.com/YaAlfred/SlickgridSelectDropdownWidget