I am trying to implement the autocomplete with data from a database.
The data looks like
[
{"id":"1",name:"Jon"},
{"id":"2",name:"Carl"},
{"id":"3",name:"Jon"},
]
There is no example using such data even though this would be more common than selecting a string from a bunch of strings. Having the user select "Jon" doesn't mean anything unless you know the ID.
I was trying to add code to the following page and listen to an event when the user selects an item but first of all it's not documented in code and in the api what event that is and second none of the events seem to be triggered. Hopefully the event object would pass the object that was selected by the user (not the string) or the index of the selected item so I don't have to use access the private variable to get the object that was chosen.
ac1.dispose();
var DataItem = function(id,value){
this.id=id;
this.value=value;
};
DataItem.prototype.toString=function(){
return this.value;
};
DataItem.prototype.valueOf=function(){
return this.value;
};
var tcMovies = [
new DataItem(1,"one"),
new DataItem(2,"onetwo")
];
var ac1 = goog.ui.ac.createSimpleAutoComplete(
tcMovies, document.getElementById('txtInput1'), false);
goog.events.listen(ac1,goog.ui.ac.AutoComplete.EventType.SELECT,
function(e){
//never gets called
console.log(e);
//hoping to get an index so I can do something like
// ac1.getMatcher().rows_[selectedindex].id
// probably should not use rows_ but there is no get
// method for that either
}
);
Fiddling around a bit and looking through the source code I did find what hopefully is the way to implement it. The following comment in autocomplete.js would suggest it is the correct way:
/**
* Field value was updated. A row field is included and is non-null when a
* row has been selected. The value of the row typically includes fields:
* contactData and formattedValue as well as a toString function (though none
* of these fields are guaranteed to exist). The row field may be used to
* return custom-type row data.
*/
UPDATE: 'update',
Open the following page, press F12 and run the following code in the console.
//remove existing autocomplete
ac1.dispose();
//define data, need toString
// to display the values
var DataItem = function(id,value){
this.id=id;
this.value=value;
};
DataItem.prototype.toString=function(){
return this.value;
};
// create data
var tcMovies = [
new DataItem(1,"abbbbbbbb"),
new DataItem(2,"aabbbbbbb"),
new DataItem(3,"aaabbbbbb"),
new DataItem(4,"aaaabbbbb"),
new DataItem(5,"aaaaabbbb"),
new DataItem(6,"aaaaaabbb"),
];
// use easy method to create and attach the autocomplete
var ac1 = goog.ui.ac.createSimpleAutoComplete(
tcMovies, document.getElementById('txtInput1'), false);
//listen to UPDATE
goog.events.listen(ac1,goog.ui.ac.AutoComplete.EventType.UPDATE,
function(e){
//e.row should be the selected value
console.log("user selected",e.row);
}
);
Related
FullCalendar has documentation around using eventSources to list multiple event on a single calendar ... I need this to be more dynamic so i pass eventSources my function that returns an array of calendars
function() {
return $('#calendar').fullCalendar
({googleCalendarApiKey: '<YOUR API KEY>',
eventSources:
function(){
getEventSources();
}
}
);
};
I want to list every event from each calendar belonging to a user as opposed to a set number of calendars that I pass in.
Here's a function I created to do this.
function getEventSources(){
const calendarList = "<%= #calendar_list %>"
const keyArray = calendarList.map(cal => {
return 'googleCalendarId'
})
const calendarIds = calendarList.map(cal => {
return cal["id"]
})
eventSources = []
for(i=0; i < keyArray.length; i++) {
var obj = {}
obj[keyArray[i]] = calendarIds[i]
eventSources.push(obj);
}
return eventSources
};
calendarList is a list of calendars; it is defined in a controller, however I dont think I'm setting it correctly here... i've also tried setting using ajax and even passing it a json route.
I hand tested this and it worked, but I still cant get the calendar to load
2 main questions:
1. am I passing my function to eventSources correctly in the eventCalendar function?
2. whats the best way to declare calendarList for my use case?
I'm new to mxGraph, I want to get the vertex (cell) all related data when choosing it (clicking it), if you clicked the properties of a certain cell you will get its data, how can I get it with the code?
I tried this answer, but show this error
Update:
this code gives me an object of the clicked cell (mxGraph v3.9.8).
mxGraph.prototype.addListener(mxEvent.CLICK, function(sender, event){
var mouseEvent = event.getProperty("event");
var selectedCell = event.getProperty("cell");
console.log(selectedCell);
});
There is a function called 'showProperties' belonging to the mxEditor class. In there you can see how it works to show (and get) the properties of a cell.
Be sure the user object for these properties is a node, i.e.:
var doc = mxUtils.createXmlDocument();
var node = doc.createElement('MyNode');
node.setAttribute('label', 'My Name');
node.setAttribute('notes', 'My cell notes');
this helps me
mxGraph.prototype.addListener(mxEvent.CLICK, function(sender, event){
var mouseEvent = event.getProperty("event");
var selectedCell = event.getProperty("cell");
console.log(selectedCell);
});
I am trying to see if a value in the "apply" sublist for customer payment data has changed and do some action based on it.
My SuiteScript is as follows:
define(['N/record', 'N/https'],
function(record,https)
{
function afterSubmit(context)
{
var oldRec = context.oldRecord;
log.debug({title: 'oldRec ', details: oldRec });
// This log shows that the JSON has an
// attribute called sublists which contains "apply" which has all the applied payments
// eg: {"id":"1234", "type":"customerpayment", "fields":{all the fields},
// "sublists": {"apply" : {"line 1"...}}}
var oldRecSublists = oldRec.sublists;
log.debug({title: 'oldRecApply ', details: oldRecSublists });
// This returns empty or null though there is data
What am I doing wrong here?
Basically what I am trying to achieve is compare the context.oldRecord.sublists.apply and context.newRecord.sublists.apply to find if the amt has changed or not.
Is there a better way to do this is SuiteScript 2.0?
Thanks in advance!
Part of what is going on there is that it looks like you are trying to spelunk the NS data structure by what you see in the print statement. You are not using the NS api at all.
When you send the NS object to the log function I believe it goes through a custom JSON.stringify process so if you want to just inspect values you can do:
var oldRecObj = JSON.parse(JSON.stringify(oldRec));
now oldRecObj can be inspected as though it were a simple object. But you won't be able to manipulate it at all.
You should be using the NS schema browser
and referring to the help docs for operations on N/record
A snippet I often use for dealing with sublists is:
function iter(rec, listName, cb){
var lim = rec.getLineCount({sublistId:listName});
var i = 0;
var getV = function (fld){
return rec.getSublistValue({sublistId:listName, fieldId:fld, line:i});
};
var setV = function(fld, val){
rec.setSublistValue({sublistId:listName, fieldId:fld, line:i, value:val});
};
for(; i< lim; i++){
cb(i, getV, setV);
}
}
and then
iter(oldRec, 'apply', function(idx, getV, setV){
var oldApplied = getV('applied');
});
I'd like to have a paginated view of a collection. I tried using Backbone.Paginator but I just couldn't make it work.
I figured I'd do the pagination myself and I thought it would be a good idea to have my full collection, and then send the view a small collection of the big one, and do this every time someone clicks on 'next'.
I tried doing this but it doesn't work :
var purchaseCollection = new purchaseItemCollection({url:endpoints.purchases});
purchaseCollection.fetch();
var purchaseRangeCollection = new Backbone.Collection(purchaseCollection.models),
purchaseView = new purchaseItemCollectionView({collection:purchaseRangeCollection});
My second collection is only made of one model when it should have severals.
I'm wondering if this is even the best way to do it.
Any advice on how to split a collection into collections, or how to do it in another way would really be appreciated!
You could use a custom object to control a collection representing the list of models currently selected.
For example,
var Slicer = function(opts) {
opts || (opts = {});
// your big collection
this.collection = opts.collection || new Backbone.Collection();
// a collection filled with the currently selected models
this.sliced = new Backbone.Collection();
};
_.extend(Slicer.prototype, Backbone.Events, {
// a method to slice the original collection and fill the container
slice: function(begin, end) {
var models = this.collection.models.slice(begin, end);
this.sliced.reset(models);
// triggers a custom event for convenience
this.trigger('sliced', this.sliced);
}
});
You would then create an instance of this controller and either listen to the custom event sliced on this object or on a reset event on the sliced collection to update your view:
var controller = new Slicer({
collection: purchaseCollection
});
controller.on('sliced', function(c) {
console.log('sliced', c.pluck('id'));
});
controller.sliced.on('reset', function(c) {
console.log('reset', c.pluck('id'));
});
And a demo to play with http://jsfiddle.net/nikoshr/zjgkF/
Note that you also have to take into account the asynchronous nature of fetch, you can't immediately work on the models. In this setup, you would do something like
var purchaseCollection = new purchaseItemCollection(
[], // you have to pass an array
{url:endpoints.purchases} // and then your options
);
purchaseCollection.fetch().then(function() {
// do what you want
// for example
controller.slice(0, 10);
});
You can define the model of your full collection as another independent collection.
Then after fetch(), you will get your collections as the model of your full one.
var PurchaseCollection = Backbone.Collection.extend({
model: Backbone.Collection
})
var purchaseCollection = new PurchaseCollection({url:endpoints.purchases});
purchaseCollection.fetch()
purchaseCollection.each(function (purchaseItem, index) {
//the purchaseItem is what you want...
//do anything...
});
If you want a demo, click here.
Just remember that collection constructor has two attributes (http://backbonejs.org/#Collection-constructor). The first are the models and the second are the options like url etc.
I am working on an app to store data offline. My problem is when I try to retrieve the data from local storage for update/edit, it keeps calling only the id of the first item, and not calling the id of the data in view.
Please what am I doing wrong?
Here is my code for loading employees:
// load cases from localStorage
var employees;
if (localStorage.getItem('employees')) {
employees = JSON.parse(localStorage.getItem('employees'));
} else {
// If no cases, create and save them
employees = [];
// offling storing of our cases
localStorage.setItem('employees', JSON.stringify(employees));
}
// show case listing in list view page
var showEmployees = function () {
//erase existing content
$('#employee_list').html('');
//insert each employee
for (var i = 0; i<employees.length; i++) {
addEmployees(employees[i]);
}
};
Here is my code to add an employee to list view:
//add an eliment to list view
var addEmployees = function (empData) {
//HTML content of one list element
var listElementHTML = '<li><a class="employee_list" ui-btn ui-btn-e ui-btn-icon-right ui-icon-carat-r" data-transition="fade" data-split-icon="delete" href="#item'+empData.id+'">' + empData.employeename + '<br> ' + empData.dateofbirth + '</br></a></li>';
//appending the HTML code to list view
$('#employee_list').append(listElementHTML);
};
Here is my code for Edit function:
//User input to edit form
$('#edit_employee_page').on('click' , function () {
var editEmployee = JSON.stringify({
id: employees.length+1,
employeeno: $('#employeeno').val(),
employeename:$('#employeename').val(),
stateoforigine:$('#stateoforigine').val(),
employeephone: $('#employeephone').val(),
dateofbirth:$('#dateofbirth').val()
});
//Alter the slected data
localStorage.setItem("employees", JSON.stringify(employees));
return true;
});
for (var i in employees) {
var id = JSON.parse(localStorage.getItem(employees[i]));
}
Here is my code for the Edit button:
//register Edit button
$('.edit_button').live('click', function (e) {
alert('I was Cliked!');
e.stopPropagation();
$.each(employees, function(a, b) {
//if(b.id == employees[i]){
$('#id').val(b.id);
$('#employeeno').val(b.employeeno);
$('#employeename').val(b.employeename);
$("#stateoforigine").val(i.stateoforigine);
$('#employeephone').val(b.employeephone);
$('#dateofbirth').val(b.dateofbirth);
$("#id").attr("readonly","readonly");
$('#employeeno').focus();
$.mobile.changePage('#edit_employee_page');
return false;
//}
});
});
Here is my local Storage:
[
{"id":1,
"employeeno":"DEF/234/20014",
"employeename":"Bill Gates",
"stateoforigine":"Osun",
"employeephone":"080765432",
"dateofbirth":"12/11/1965"},
{"id":2,
"employeeno":"DEF/234/20014",
"employeename":"Bill Gates",
"stateoforigine":"Osun",
"employeephone":"080765432",
"dateofbirth":"12/11/1966"},
{"id":3,
"employeeno":"DEF/234/20014",
"employeename":"Bill Gates",
"stateoforigine":"Osun",
"employeephone":"080765432",
"dateofbirth":"12/11/1966"},
{"id":4,
"employeeno":"DAST/003/2003",
"employeename":"Gold Base",
"stateoforigine":"",
"employeephone":"",
"dateofbirth":"12/03/1986"}
]
Thanks for helping me out
The way you are storing your employees into localStorage is correct, but the way you are getting them out is incorrect. You stored your employees by stating:
localStorage.setItem("employees", JSON.stringify(employees));
So, in order to retrieve them, you must use:
var employees = JSON.parse(localStorage.getItem("employees"));
You see, you stored the data as a string with a key of "employees"; therefore, you can only retrieve it by that key. Since all data stored in localStorage is saved as a string, you must use JSON.parse() to convert the data back into an object - an array in this case. Then you can iterate over your employees.
Update:
You should be running this code as soon as the page is rendered (see below). I'm not sure how you're doing that - if you're using an IIFE or jQuery's document.ready() function. I don't think it's necessary to store an empty array into localStorage if none were loaded initially, so, I took your else clause out.
var employees = [];
if (localStorage.getItem('employees') !== null) {
employees = JSON.parse(localStorage.getItem('employees'));
}
Debug this line-by-line when it runs and make positive your employees variable contains data. If it doesn't contain data, well then, there's nothing to edit.
If, however, there is data, then execute your showEmployees() function. Oddly, I'm not seeing in your code where you actually call this. Is it bound to a button or action in your UI? Also, what is that for loop doing after your $('#edit_employee_page') click event function? It's trying to read data from localStorage improperly and it does nothing.
I think if you simply stepped through your code one line at a time using breakpoints and desk-checking your inputs/outputs you'd find out where you're going wrong.
It also appears that there's a disconnect in your code. May be you left out some lines; you define a string editEmployee but out of the blues you store JSON.stringify(employees) whereas employees is not defined in your code:
$('#edit_employee_page').on('click' , function(){
var editEmployee = JSON.stringify({
id: employees.length+1,
//........
});
//Alter the slected data
localStorage.setItem("employees", JSON.stringify(employees));
return true;
});
I had a similar task to do . I did it this way.
I passed the dynamic Id to be passed as an id attribute
id="'+empData.id+'"
and then inside the
$('.edit_button').live('click', function (e) {
alert('I was Cliked!');
var empId=$(this).attr('id');
rest of the code is same.