I have written some javascript code for a multilanguage site. The code works great but I feel like I have a lot of duplicate code. I was wondering if someone can explain how I can make this simpler or minimized. I have tried to use a forEach(function (item, index) but it does not seem to be working.
This is the original code that works....
(function () {
var lang1 = "/en/"; //default language
var lang2 = "/fr/"; //second language
var lang3 = "/es/"; //third language
var languageSwitcher = document.querySelectorAll("a[href='/languages']").forEach((el) => el.parentNode.classList.add("language-switcher"));
document.querySelector("[data-folder='/languages']").classList.add("language-switcher");
document.querySelectorAll(".language-switcher .header-nav-folder-item").forEach((el) => el.classList.add("languages"));
document.querySelectorAll(".language-switcher .header-menu-nav-item:not(:first-child)").forEach((el) => el.classList.add("languages"));
var languages = document.querySelectorAll(".languages");
var language1 = document.querySelectorAll(".language-switcher .languages a[href*='"+lang1+"']");
var language2 = document.querySelectorAll(".language-switcher .languages a[href*='"+lang2+"']")
var language3 = document.querySelectorAll(".language-switcher .languages a[href*='"+lang3+"']")
var windowURL = window.location.href;
var pageURL = windowURL.split("/")[4];
if (pageURL == undefined) {
for (var i = 0; i < language1.length; i++) {
language1[i].onclick = function () {
var path = lang1 + "home";
this.href = path;
};
}
for (var i = 0; i < language2.length; i++) {
language2[i].onclick = function () {
var path = lang2 + "home";
this.href = path;
};
}
for (var i = 0; i < language3.length; i++) {
language3[i].onclick = function () {
var path = lang3 + "home";
this.href = path;
};
}
} else {
for (var i = 0; i < language1.length; i++) {
language1[i].onclick = function () {
var path = lang1 + pageURL;
this.href = path;
};
}
for (var i = 0; i < language2.length; i++) {
language2[i].onclick = function () {
var path = lang2 + pageURL;
this.href = path;
};
}
for (var i = 0; i < language3.length; i++) {
language3[i].onclick = function () {
var path = lang3 + pageURL;
this.href = path;
};
}
}
document.querySelectorAll(".header-nav-item:not(.language-switcher) a").forEach((el) => el.classList.add("language"));
document.querySelectorAll(".header-menu-nav-item:not(.language-switcher) a").forEach((el) => el.classList.add("language"));
document.querySelectorAll('[data-folder="/languages"] .header-menu-nav-item a').forEach((el) => el.classList.remove("language"));
var languageLinks = document.querySelectorAll(".language");
for (var i = 0; i < languageLinks.length; i++) {
var navURL = languageLinks[i].href;
if (windowURL.indexOf(lang1) != -1) {
languages.forEach((el) => el.classList.remove("active"));
languages[0].classList.add("active");
if (navURL.indexOf(lang1) != -1) {
languageLinks[i].closest("div").style.display = "block";
} else {
languageLinks[i].closest("div").style.display = "none";
}
} else if (windowURL.indexOf(lang2) != -1) {
languages.forEach((el) => el.classList.remove("active"));
languages[1].classList.add("active");
if (navURL.indexOf(lang2) != -1) {
languageLinks[i].closest("div").style.display = "block";
} else {
languageLinks[i].closest("div").style.display = "none";
}
} else if (windowURL.indexOf(lang3) != -1) {
if (navURL.indexOf(lang3) != -1) {
languages.forEach((el) => el.classList.remove("active"));
languages[2].classList.add("active");
languageLinks[i].closest("div").style.display = "block";
} else {
languageLinks[i].closest("div").style.display = "none";
}
} else {
if (navURL.indexOf(lang1) != -1) {
languages.forEach((el) => el.classList.remove("active"));
languages[0].classList.add("active");
languageLinks[i].closest("div").style.display = "block";
} else {
languageLinks[i].closest("div").style.display = "none";
}
}
}
var active = document.querySelector(".language-switcher .active");
active.closest(".language-switcher").prepend(active);
document.querySelectorAll(".header a").forEach((el) => (el.style.visibility = "visible"));
languageSwitcher.style.display = "flex";
})();
I have attempted to use a forEach function and an array but it is not working.
(function () {
var lang = ["/en/", "/fr/", "/es/"];
document.querySelectorAll("a[href='/languages']").forEach((el) => el.parentNode.classList.add("language-switcher"));
document.querySelector("[data-folder='/languages']").classList.add("language-switcher");
document.querySelectorAll(".language-switcher .header-nav-folder-item").forEach((el) => el.classList.add("languages"));
document.querySelectorAll(".language-switcher .header-menu-nav-item:not(:first-child)").forEach((el) => el.classList.add("languages"));
var languages = document.querySelectorAll(".languages");
var windowURL = window.location.href;
var pageURL = windowURL.split("/")[4];
lang.forEach(function (index, value) {
var language = document.querySelectorAll(".language-switcher .languages a[href*='" + value + "']");
if (pageURL == undefined) {
for (var i = 0; i < language.length; i++) {
language[i].onclick = function () {
var path = value + "home";
this.href = path;
};
}
} else {
for (var i = 0; i < language.length; i++) {
language[i].onclick = function () {
var path = value + pageURL;
this.href = path;
};
}
}
document.querySelectorAll(".header-nav-item:not(.language-switcher) a").forEach((el) => el.classList.add("language"));
document.querySelectorAll(".header-menu-nav-item:not(.language-switcher) a").forEach((el) => el.classList.add("language"));
document.querySelectorAll('[data-folder="/languages"] .header-menu-nav-item a').forEach((el) => el.classList.remove("language"));
var languageLinks = document.querySelectorAll(".language");
for (var j = 0; j < languageLinks.length; j++) {
var navURL = languageLinks[j].href;
if (windowURL.indexOf(value) != -1) {
languages.forEach((el) => el.classList.remove("active"));
languages[index].classList.add("active");
if (navURL.indexOf(value) != -1) {
languageLinks[j].closest("div").style.display = "block";
} else {
languageLinks[j].closest("div").style.display = "none";
}
} else {
if (navURL.indexOf('/en/') != -1) {
languages.forEach((el) => el.classList.remove("active"));
languages[0].classList.add("active");
languageLinks[j].closest("div").style.display = "block";
} else {
languageLinks[j].closest("div").style.display = "none";
}
}
}
document.querySelector(".header").style.visibility = "visible";
var active = document.querySelector(".language-switcher .active");
active.closest(".language-switcher").prepend(active);
});
})();
I am not getting the concepts of how pagination works in load more requested data from json api. Even i am getting the data of first page but for remaining pages not getting. If I am using the two api for paging and fetching data but still not getting. Any one help me clear this concepts please..
main-view-model.js
const httpModule = require("tns-core-modules/http");
var observableModule = require("tns-core-modules/data/observable");
function RegisterViewModel() {
var viewModel = observableModule.fromObject({
_sourceDataItems: [],
initDataItems: function () {
//This url for the pagination
var url1 = "https://example.org/api.php?action=query&gcmtitle=Category:xyz&pilimit=max&prop=pageimages&pithumbsize=200&generator=categorymembers&format=json&gcmcontinue=";
httpModule.getJSON(url1).then((r) => {
id = r.continue.gcmcontinue
gcm.push(id)
console.log(gcm)
var pageid = [];
for (var id in r.query.pages) {
pageid.push(id);
}
for (var i = 0; i < pageid.length; i++) {
if (r.query.pages[pageid[i]].thumbnail == null) {
let abc = {
ttt: r.query.pages[pageid[i]].title,
path1: "~/images/xyz.png"
}
this._sourceDataItems.push(abc)
}
else {
let aaa = {
ttt: r.query.pages[pageid[i]].title,
path1: r.query.pages[pageid[i]].thumbnail.source
}
this._sourceDataItems.push(aaa)
}
}
}, (e) => {
});
var gcm = [];
//This url for the fetching the data on scroll
for (var i = 0; i < gcm.length; i++) {
var url2 = "https://example.org/api.php?action=query&gcmtitle=Category:xyz&pilimit=max&prop=pageimages&pithumbsize=200&generator=categorymembers&format=json&gcmcontinue=" + gcm[i];
httpModule.getJSON(url2).then((r) => {
id= r.continue.gcmcontinue)
gcm.push(id)
console.log(r.continue.gcmcontinue)
var pageid = [];
for (var id in r.query.pages) {
pageid.push(id);
}
for (var i = 0; i < pageid.length; i++) {
//placeholder Image
if (r.query.pages[pageid[i]].thumbnail == null) {
let abc = {
ttt: r.query.pages[pageid[i]].title,
path1: "~/images/xyz.png"
}
this._sourceDataItems.push(abc)
}
else {
let aaa = {
ttt: r.query.pages[pageid[i]].title,
path1: r.query.pages[pageid[i]].thumbnail.source
}
this._sourceDataItems.push(aaa)
}
}
}, (e) => {
});
}
},
_DataItems: [],
addMoreItemsFromSource: function (chunkSize) {
let newItems = this._sourceDataItems.splice(0, chunkSize);
this._DataItems = this._DataItems.concat(newItems);
},
onLoadMoreItemsRequested: function (args) {
console.log("---load item called----");
const that = new WeakRef(this);
const listView = args.object;
if (this._sourceDataItems.length > 0) {
setTimeout(function () {
that.get().addMoreItemsFromSource(5);
listView.notifyLoadOnDemandFinished();
}, 100);
args.returnValue = true;
} else {
args.returnValue = false;
}
},
});
return viewModel;
}
exports.RegisterViewModel = RegisterViewModel;
Even loading of the data is working fine for page one. While passing the gcm continue id it wont take that please help me to clear this concept
How can I change this javascript code, that when I click on "Green" I want the content from all tabs to be displayed? https://codepen.io/wangel13/pen/OXBrRp
'use strict';
function Tabs() {
var bindAll = function() {
var menuElements = document.querySelectorAll('[data-tab]');
for(var i = 0; i < menuElements.length ; i++) {
menuElements[i].addEventListener('click', change, false);
}
}
var clear = function() {
var menuElements = document.querySelectorAll('[data-tab]');
for(var i = 0; i < menuElements.length ; i++) {
menuElements[i].classList.remove('active');
var id = menuElements[i].getAttribute('data-tab');
document.getElementById(id).classList.remove('active');
}
}
var change = function(e) {
clear();
e.target.classList.add('active');
var id = e.currentTarget.getAttribute('data-tab');
document.getElementById(id).classList.add('active');
}
bindAll();
}
var connectTabs = new Tabs();
Take a look at this:
'use strict';
function Tabs() {
var bindAll = function() {
var menuElements = document.querySelectorAll('[data-tab]');
for(var i = 0; i < menuElements.length ; i++) {
menuElements[i].addEventListener('click', change, false);
}
}
var clear = function() {
var menuElements = document.querySelectorAll('[data-tab]');
for(var i = 0; i < menuElements.length ; i++) {
menuElements[i].classList.remove('active');
var id = menuElements[i].getAttribute('data-tab');
document.getElementById(id).classList.remove('active');
}
}
function makeAllActive() {
var tabs = document.querySelectorAll('.b-tab');
Array.from(tabs).map(item => {
item.classList.add('active');
});
}
var change = function(e) {
clear();
e.target.classList.add('active');
var id = e.currentTarget.getAttribute('data-tab');
if(id === "green") {
makeAllActive();
return;
}
document.getElementById(id).classList.add('active');
}
bindAll();
}
var connectTabs = new Tabs();
I am learning Vue and I am trying to access a string in an array by it's index, but I always get an error when trying to read the string. Here's my code:
var vm = new Vue({
el: '#top',
data: {
Cars: [],
DefaultCarList: [],
AddedCars: [],
SelectedCar: ''
},
methods: {
addCar: function(car) {
var addedCarCount = this.AddedCars.length;
var defaultCarCount = this.DefaultCarList.length;
var containsCar = function () {
for (var i = 0; i < addedCarCount; i++)
{
if (this.AddedCars[i] === car) // error here
{
return true;
}
}
return false;
}
var carIsValid = function() {
for(var i = 0; i < defaultCarCount; i++)
{
if(this.DefaultCarList[i] === this.SelectedCar) // error here
{
return true;
}
}
return false;
}
if (containsCar() === false && carIsValid){
this.AddedCars.push(car);
}
}
}
})
HTML:
<label for="carsId">Cars</label>
<select id="carsId" name="cars" v-model="SelectedCar">
<option disabled value="">Select</option>
<option v-for="car in DefaultCarList" :value="flavor">{{car}}</option>
</select>
<div>
<button type="button" class="hollow button success small"
v-on:click="addCar(SelectedCar)">Add Flavor</button>
</div>
Is it valid to iterate over an array like this in Vue and access the property by it's index? What is the correct way to do this?
Problem is with 'this' keyword it uses inner this where it doesn't have DefaultCarList variable, should use () => {} syntax .Error in this code
var carIsValid = function() {
for(var i = 0; i < defaultCarCount; i++)
{
if(this.DefaultCarList[i] === this.SelectedCar) // error here
{
return true;
}
}
return false;
}
should be
var carIsValid = () => {
for(var i = 0; i < defaultCarCount; i++)
{
if(this.DefaultCarList[i] === this.SelectedCar) // error here
{
return true;
}
}
return false;
}
and
var containsCar = () => {
for (var i = 0; i < addedCarCount; i++)
{
if (this.AddedCars[i] === car) // error here
{
return true;
}
}
return false;
}
The problem is that this it's not a reference to your model.
In your example this is a reference to window object.
Have a look here in order to understand the scope of this keyword in javascript.
You should use arrow functions.
var containsCar = () => {
for (var i = 0; i < addedCarCount; i++)
{
if (this.AddedCars[i] === car) // error here
{
return true;
}
}
return false;
}
or you could just define a self variable.
var self=this;
var containsCar = function() {
for (var i = 0; i < addedCarCount; i++)
{
if (self.AddedCars[i] === car) // error here
{
return true;
}
}
return false;
}
Further more, I recommand you to use native javascript functions in order to have a clean code.
var containsCar = function () {
for (var i = 0; i < addedCarCount; i++)
{
if (this.AddedCars[i] === car) // error here
{
return true;
}
}
return false;
}
var carIsValid = function() {
for(var i = 0; i < defaultCarCount; i++)
{
if(this.DefaultCarList[i] === this.SelectedCar) // error here
{
return true;
}
}
return false;
}
can be achieved using some method :
The some() method tests whether at-least one element in the array
passes the test implemented by the provided function.
var containsCar = () => {
return this.AddedCars.some(a=>a==car);
}
var carIsValid = () => {
return this.DefaultCarList.some(a=>a === this.SelectedCar);
}
I'm working with a drag and drop plugin . fieldChooser
I want to call a method and an event But I don't know how .
this is the function :
(function($) {
$.fn.fieldChooser = function (sourceList, destinationList, options)
{
var fieldChooser = this;
//----------------------------------------------------------------------
// Poor man's singleton
//----------------------------------------------------------------------
if (this.getOptions)
{
return this;
}
//----------------------------------------------------------------------
// Private methods
//----------------------------------------------------------------------
function getBounds(element)
{
var offset = element.offset();
return {
left: offset.left,
right: offset.left + element.width(),
top: offset.top,
bottom: offset.top + element.height()
}
}
function translateBounds(bounds, newPosition)
{
return {
left: newPosition.left,
right: bounds.right + newPosition.left - bounds.left,
top: newPosition.top,
bottom: bounds.bottom + newPosition.top - bounds.top
}
}
function hitTest(container, element, newPosition)
{
var containerBounds = getBounds(container);
var elementBounds = getBounds(element);
elementBounds = translateBounds(elementBounds, newPosition);
var hit = true;
if (elementBounds.right < containerBounds.left)
{
hit = false;
}
else if (elementBounds.left > containerBounds.right)
{
hit = false;
}
else if (elementBounds.bottom < containerBounds.top)
{
hit = false;
}
else if (elementBounds.top > containerBounds.bottom)
{
hit = false;
}
return hit;
}
var _chooser = this;
var _lastSelectionList = null;
function onListSelectionChanged(event, list)
{
if (_lastSelectionList)
{
if (_lastSelectionList == list)
{
// continue
}
else
{
var otherList = _chooser.getSourceList();
if (list == _chooser.getSourceList())
{
otherList = _chooser.getDestinationList();
}
otherList.clearSelection(true);
}
}
_lastSelectionList = list;
}
//----------------------------------------------------------------------
// fieldList class
//----------------------------------------------------------------------
var fieldList = function (parent, tabIndex)
{
var _list = $(parent);
_list.addClass("fc-field-list");
_list.attr("tabIndex", tabIndex);
var _selectedIndex = -1;
var _extendedSelectionIndex = -1;
var prepareListFields = function (content)
{
content.addClass("fc-field");
content.attr("tabIndex", tabIndex);
content.off("click.field");
content.on("click.field", function (event)
{
event.stopPropagation();
event.preventDefault();
var $this = $(this);
var currentList = _chooser.getFieldList($this);
if (event.ctrlKey || event.metaKey)
{
currentList.toggleFieldSelection($this);
}
else if (event.shiftKey)
{
currentList.selectTo($this);
}
else
{
currentList.selectField($this);
}
_currentList = currentList;
});
};
prepareListFields(_list.children());
_list.selectAt = function (index)
{
this.clearSelection(true);
var fields = _list.getFields();
if (index >= fields.length)
{
index = fields.length - 1;
}
var selectedField = null;
if (index >= 0)
{
selectedField = fields.eq(index);
}
if (selectedField)
{
selectedField.addClass("fc-selected");
_selectedIndex = index;
_list.scrollToField(selectedField);
}
else
{
_selectedIndex = -1;
}
_list.trigger("selectionChanged", [_list]);
}
_list.extendSelection = function (up)
{
var selectedIndex = this.getSelectedIndex();
var extendedIndex = this.getExtendedSelectionIndex();
var newIndex = extendedIndex;
var extend = true;
if (up)
{
if (newIndex < 0)
{
newIndex = _list.getFields().length;
_selectedIndex = newIndex - 1;
}
if (extendedIndex > selectedIndex)
{
extend = false;
}
else
{
newIndex--;
}
}
else
{
if (newIndex < 0)
{
_selectedIndex = 0;
}
if (extendedIndex < selectedIndex)
{
extend = false;
}
else
{
newIndex++;
}
}
var fields = _list.getFields();
if (newIndex < 0 || newIndex >= fields.length)
{
// continue
}
else
{
var selectedField = fields.eq(newIndex);
if (extend)
{
selectedField.addClass("fc-selected");
}
else
{
selectedField.removeClass("fc-selected");
if (up)
{
newIndex--;
}
else
{
newIndex++;
}
if (newIndex >= 0 && newIndex < fields.length)
{
selectedField = fields.eq(newIndex);
}
}
_list.scrollToField(selectedField);
_list.trigger("selectionChanged", [_list]);
_extendedSelectionIndex = newIndex;
}
}
_list.selectField = function (field)
{
this.clearSelection(true);
field.addClass("fc-selected");
_selectedIndex = field.index();
_list.trigger("selectionChanged", [_list]);
}
_list.toggleFieldSelection = function (field)
{
field.toggleClass("fc-selected");
if (field.hasClass("fc-selected"))
{
_selectedIndex = field.index();
_extendedSelectionIndex = -1;
}
else
{
if (_selectedIndex == field.index())
{
_selectedIndex = _list.children(".fc-selected").first().index();
}
}
_list.trigger("selectionChanged", [_list]);
}
_list.selectTo = function (fieldOrIndex)
{
var fieldIndex = fieldOrIndex;
if (typeof fieldOrIndex == "object")
{
fieldIndex = fieldOrIndex.index();
}
if (_selectedIndex == -1)
{
_selectedIndex = 0;
}
var children = _list.children();
if (fieldIndex > _selectedIndex)
{
for (var counter = _selectedIndex;
counter < children.length;
counter++)
{
if (counter <= fieldIndex)
{
children.eq(counter).addClass("fc-selected");
}
else
{
children.eq(counter).removeClass("fc-selected");
}
}
}
else
{
for (var counter = _selectedIndex;
counter >= 0;
counter--)
{
if (counter >= fieldIndex)
{
children.eq(counter).addClass("fc-selected");
}
else
{
children.eq(counter).removeClass("fc_selected");
}
}
}
_extendedSelectionIndex = fieldIndex;
_list.trigger("selectionChanged", [_list]);
}
_list.getSelectedIndex = function ()
{
return _selectedIndex;
}
_list.getExtendedSelectionIndex = function ()
{
var index = _extendedSelectionIndex;
if (index < 0)
{
index = _selectedIndex;
}
return index;
}
_list.getSelection = function ()
{
return this.children(".fc-selected");
}
_list.clearSelection = function (suppressEvent)
{
_selectedIndex = -1;
_extendedSelectionIndex = -1;
this.children().removeClass("fc-selected");
if (suppressEvent)
{
// continue
}
else
{
_list.trigger("selectionChanged", [_list]);
}
};
_list.add = function (content)
{
prepareListFields(content);
content.appendTo(_list);
return _list;
};
_list.getFields = function ()
{
return _list.children();
}
_list.scrollToField = function (field)
{
var listTop = _list.position().top;
var listScrollTop = _list.scrollTop();
var listHeight = _list.height();
var listScrollBottom = listScrollTop + listHeight;
var fieldHeight = field.outerHeight();
var fieldTop = listScrollTop + field.position().top - listTop;
var fieldBottom = fieldTop + fieldHeight;
if (fieldTop < listScrollTop)
{
_list.scrollTop(fieldTop);
}
else if (fieldBottom > listScrollBottom)
{
_list.scrollTop(listScrollTop + (fieldBottom - listScrollBottom));
}
};
_list.sortable({
connectWith: ".fc-field-list",
cursor: "move",
opacity: 0.75,
cursorAt: { left: 5, top: 5 },
helper: function (event, field)
{
if (field.hasClass("fc-selected"))
{
// continue
}
else
{
_list.selectField(field);
}
var helper = fieldChooser.getOptions().helper(_list);
var selection = _list.getSelection().clone();
if (helper)
{
// continue
}
else
{
helper = $("<div/>").append(selection);
}
field.data("selection", selection);
field.siblings(".fc-selected").remove();
return helper;
}
});
return _list;
};
//----------------------------------------------------------------------
// Private variables
//----------------------------------------------------------------------
var _options = $.extend({}, $.fn.fieldChooser.defaults, options);
var tabIndex = parseInt(this.attr("tabIndex"));
if (isNaN(tabIndex))
{
tabIndex = 0;
}
this.removeAttr("tabIndex");
var _sourceList = new fieldList(sourceList, tabIndex).addClass("fc-source-fields");
var _destinationList =
new fieldList(destinationList, tabIndex).addClass("fc-destination-fields");
var _currentList = null;
//----------------------------------------------------------------------
// Public properties
//----------------------------------------------------------------------
this.getOptions = function ()
{
return _options;
};
this.getSourceList = function ()
{
return _sourceList;
};
this.getDestinationList = function ()
{
return _destinationList;
};
this.getFieldList = function (field)
{
var list = _destinationList;
if (field.parent().hasClass("fc-source-fields"))
{
list = _sourceList;
}
return list;
}
//----------------------------------------------------------------------
// Public methods
//----------------------------------------------------------------------
this.destroy = function ()
{
this.getOptions = null;
_sourceList.sortable("destroy");
_destinationList.sortable("destroy");
};
//----------------------------------------------------------------------
// Event handlers
//----------------------------------------------------------------------
_destinationList.on("sortstop", function (event, ui)
{
var selection = ui.item.data("selection");
if (hitTest(_sourceList, ui.item, ui.offset))
{
_currentList = _sourceList;
_sourceList.add(selection);
_destinationList.clearSelection();
_sourceList.trigger("selectionChanged", [_sourceList]);
_chooser.trigger("listChanged", [selection, _sourceList]);
ui.item.after(selection).remove();
}
else if (hitTest(_destinationList, ui.item, ui.offset))
{
ui.item.after(selection).remove();
}
else
{
_destinationList.getSelection().remove();
_sourceList.add(selection);
_sourceList.scrollToField(selection);
_destinationList.clearSelection();
_sourceList.trigger("selectionChanged", [_sourceList]);
_currentList = _sourceList;
_chooser.trigger("listChanged", [selection, _sourceList]);
}
});
_sourceList.on("sortstop", function (event, ui)
{
var selection = ui.item.data("selection");
if (hitTest(_destinationList, ui.item, ui.offset))
{
_currentList = _destinationList;
_destinationList.add(selection);
_sourceList.clearSelection();
_destinationList.trigger("selectionChanged", [_destinationList]);
_chooser.trigger("listChanged", [selection, _destinationList]);
}
else if (hitTest(_sourceList, ui.item, ui.offset))
{
// continue
}
else
{
_sourceList.sortable("cancel");
}
ui.item.after(selection).remove();
});
_destinationList.on("selectionChanged", onListSelectionChanged);
_sourceList.on("selectionChanged", onListSelectionChanged);
_destinationList.on("focusin", function ()
{
_currentList = _destinationList;
});
_destinationList.on("focusout", function ()
{
if (_currentList == _destinationList)
{
_currentList = null;
}
});
_sourceList.on("focusin", function ()
{
_currentList = _sourceList;
});
_sourceList.on("focusout", function ()
{
if (_currentList == _sourceList)
{
_currentList = null;
}
});
$(document).keydown(function (event)
{
if (_currentList)
{
if (event.which == 38)
{ // up arrow
event.stopPropagation();
event.preventDefault();
if (event.shiftKey)
{
_currentList.extendSelection(true);
}
else
{
var selectedIndex = _currentList.getSelectedIndex();
var newIndex = selectedIndex - 1;
if (newIndex < 0)
{
newIndex = 0;
}
_currentList.selectAt(newIndex);
}
}
else if (event.which == 40)
{ // down arrow
event.stopPropagation();
event.preventDefault();
if (event.shiftKey)
{
_currentList.extendSelection(false);
}
else
{
var selectedIndex = _currentList.getSelectedIndex();
var newIndex = selectedIndex + 1;
if (selectedIndex < 0)
{
newIndex = _currentList.getFields().length - 1;
}
_currentList.selectAt(newIndex);
}
}
else if (event.which == 27)
{ // escape
_currentList.selectAt(-1);
}
}
});
return this;
};
//--------------------------------------------------------------------------
// Class defaults
//--------------------------------------------------------------------------
$.fn.fieldChooser.defaults = {
helper: function (list) { return null; }
};
}(jQuery));
I want just 2-3 functions and I don't need other ones .
I want to call getDestinationList() to get the fields inside destinationlist and call selectionChanged() event.
Could you help me ? How can I call them ?
these are the definition codes :
$(document).ready(function () {
var $sourceFields = $("#sourceFields");
var $destinationFields = $("#destinationFields");
var $chooser = $("#fieldChooser").fieldChooser(sourceFields, destinationFields);
});
I'm looking forward to hear from you
Try this:
$chooser.on("listChanged",function(event,selection,list){
//event <- The jQuery event invoking the callback.
//selection <- The field (or set of fields) which has moved.
//list <- The field list to which the selection has moved.
alert("listChanged");
}
Documentation link: https://github.com/mateagar/fieldChooser
I hope this help.