Develop Reference

How to save results from dynamic cascading drop down list?

I have 2 cascading drop down list , when page loads, data is loaded to the 1st DDL, when item is selected from this list its goes to the database and fetch matching items and populate 2nd DDL. I want to prevent going twice to the DB on selection.
For example, I am loading 1st DDL with cars manufactures then click on Toyota what happens next is it goes to DB and fetches all Toyota's models and populates the 2nd DDL, after that i select different car manufacture, same thing happens. Now when i select again Toyota from the 1st list it will not go to DB, it will pull the data from previous request.
I will like to keep an object (like dictionary) of the requests, so if item is already been requested it will not go back to the DB but use local saved data.

You can store list return from server through LocalStorage in Javascript. By using setItem()function as shown below.
window.localStorage.setItem('Toyota', 'Models');
Where Toyota is the key and Models is the value. Also note that LocalStorage can only store strings.
To store arrays or objects you would have to convert them to strings.
To do this we use the JSON.stringify() method before passing to setItem() .
const models = {
1: "Model-1",
2: "Model-2",
}
window.localStorage.setItem('Toyota', JSON.stringify(models));
Now when ever you select different car manufacture check its value in LocalStorage object first.
It accepts only one parameter which is the key and returns the value as a string.
To retrieve the Toyota key stored above:
window.localStorage.getItem('Toyota');
This returns a string with value as.
“{“1”:”Model-1”,”2”:”Model-2”}”
To use this value, you would have convert it back to an object.
To do this, we make use of JSON.parse() method which converts a JSON string into a Javascript Object.
JSON.parse(window.localStorage.getItem('Toyota'));
Please keep in mind to check weather your browser support Local storage or not.
if (typeof(Storage) !== "undefined") {
// Code for localStorage
} else {
// No web storage Support.
}

You can use Map() object to store the data based on key.
Find more information: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map
var brandModelsList = new Map();
function getBrandModels(brand)
{
if(brandModelsList.has(brand))
{
modelList = JSON.parse(brandModelsList.get(brand));
// Do stuff with second dropdown
}
//Your ajax stuff to get data
$.ajax({
url: 'server url',
data: {name: brand},
dataType: 'json',
}).done(response => {
brandModelsList.set(brand, JSON.stringify(response));
// Do stuff with second dropdown
});
}
It has support in most of modern browsers. A best tutorial on this is https://javascript.info/map-set-weakmap-weakset.

you can do this via JavaScript as #Rahat Hameed stated if the cascading dropdown values are not changed frequently, if they can be changed e.g (you can updated them via some logic).Then preferable ways it to fetch them from database.

LocalStorage in Contact Manager (knockoutjs)

This app is a Contact Manager. And I want when user is filling the form and click save the contacts which appears to be stored in local storage so I could remove some of them etc. Adding and removing are working but it's not storing.
Here is the app:
http://jsfiddle.net/vpbj32Lh/
The problem in this lines:
self.load = function(){
self.contacts = localStorage.getItem("stored_contacts");
}
self.save = function(){
localStorage.setItem("stored_contacts", self.contacts);
self.contacts=localStorage.getItem("stored_contacts");
console.log(self.contacts.length);
}
If you delete this lines and "data-bind="click: save" in html file. It willbe adding and removing but not saving and loading

I've found a number of things to change in your code.
This is a fixed version:
JS
(function ContactManager(){
// ...
self.contacts = ko.observableArray();
self.addItem = function(){
self.contacts.push(new Contact(self.conName(), self.phone(), self.email(), self.address()));
}
// ...
self.load = function(){
// haven't tested, but probably won't work. I think you'd have to convert your JSON to observables
self.contacts = localStorage.getItem("stored_contacts");
}
self.save = function(){
self.addItem(); // calling it from here, not from your HTML form submit
// you have to convert to JSON to save in localStorage
localStorage.setItem("stored_contacts", ko.toJSON(self.contacts()));
}
ko.applyBindings(self.templateName);
})();
HTML
<form class="addContact" autocomplete="on">
<!-- ... -->
</form>
A couple of observations:
self.contacts = ko.observableArray(self.save); - this doesn't make any sense. You are initializing an observableArray with a function object. You are not even calling the function, you are passing the function. Either way, doesn't make sense here.
<form data-bind="submit: addItem" > and <button data-bind="click: save" type="submit"> - you are binding an event to your click on the button, and another event to the submit of the form, that happens when... well, when you click on the button. This maybe would work with some setup, but wasn't working, so I called the addItem from the save.
localStorage.setItem("stored_contacts", self.contacts); - you are trying to store an array of very complex objects (the contacts), each one full of several other complex objects (the observables) inside localStorage. localStorage, though, only stores strings. So you have to convert your objects to JSON. ko.toJSON is the way to go. More at the docs.
Edit:
This is a working JSFiddle with the saving part. I don't know how does JSFiddle handles the localStorage, but as I told you in the comments on my code in the original answer, your load function is wrong and will have to read the string from the localStorage, parse it to JSON (with JSON.parse(string)) and construct the appropriate objects using your constructor function (Contact). This is pretty easy and you can do by yourself.
Edit 2:
The load function should be something like this (haven't tested):
self.load = function(){
var contactsJSON = localStorage.getItem("stored_contacts"); // a string
var loadedContacts = JSON.parse(contactsJSON); // an array
self.contacts = ko.observableArray(); // an observableArray
for (var i in loadedContacts) {
var loadedContact = loadedContacts[i]; // an object
var newContact = new Contact(/* pass the parameters from loadedContact*/); // a Contact object
self.contacts.push(newContact);
}
}

I'm getting a "newItem() was not passed an identity for the new item" error while trying to add a new item to a JSON store

I've seen other posts in this site regarding the same issue and I've tried the solutions given. I've also visited the links that may offer a solution but I'm still stuck with the same error.
I'm using DOJO and something as simple as this won't even work
myStore.newItem({id: 'test', otherfield: 'otherinfohere'});
myStore.save();
Supposedly the "newItem() was not passed an identity for the new item" error appears when you haven't provided an identifier for the new item, which i have.
The whole purpose of this (Just in case anyone can provide a good idea or has done something similar before) is that i want to create a data grid that shows info from a particular store. The problem is, that in that store all the items may not have the same structure. For instance:
I may have a store that looks like this
{identifier: 'id',
label: 'name',
items: [
{ id:'1', name:'Ecuador', capital:'Quito' },
{ id:'2', name:'Egypt', capital:'Cairo' },
{ id:'3', name:'El Salvador', capital:'San Salvador' , additionalField: 'otherinfohere'},
{ abbr:'gq', name:'Equatorial Guinea', capital:'Malabo', additionalField: 'otherinfohere'},
]}
This is possible because I'm the one constructing the store in a Spring Controller (I'm also using the Spring Framework) from information I have locally stored in a Berkeley DB. So what i need is a data grid with a dynamic layout because I don't want blank spaces to show in the view in the rows with lesser amount of fields, and i need to show all the info in the store at the same time, but i don't know how to do this.
I thought of doing it by creating a simple layout of only 1 field. In it I would load data from a store i create dynamically at runtime. The data in the store would be composed of HTML combined with the values coming from the original store so I could obtain something like this, which is inside an attribute of a JavaScript Object and let the browser parse it for me:
<div><span>id: originalID </span>....</div>
This of course is a simple example, the html layout i'm looking for is far more complicated, but i think that passing it as a string to an object might do the trick.
The problem is that i don't even know if that idea will work because i get that error whenever i try to add values to my secondary store.
rdb.modules.monitor.historicStore.fetch({onComplete: function(items, request){
for (var i = 0; i < items.length; i++){
var item = items[i];
var obj = new Object();
obj.id = rdb.modules.monitor.historicStore.getValue(item, "id");;
var html = "<div><span>";
html += rdb.modules.monitor.historicStore.getValue(item, "sql");
html += "</span></div>";
obj.html = html;
myStore.store.newItem(obj);
}
}});
In this context "historicStore" refers to the JSON store that has the values that i need to convert and add to "myStore" after i added some HTML.
I hope you got the main idea of what I'm trying to do. If anyone can help me we either of these problems i would really appreciate it. Thanks in advance

For the issue regarding store:-
"id" is mandatory for a store, if it is going to be used for a grid(datagrid, EnhancedGrid, etc. whatever). The items are handled only on basis of "id" attribute by the grid data structures.
Usually, id can be a loop variable/ auto incrementation, to avoid any cases like you have said. Before adding the store to the grid, ensure that all items have the id attribute. You can write a function which will loop through each item and check for this, else add an auto-incrementing value for the id attribute of that item.

Parameter passing between different JavaScript libraries

In my Application, I have a grid made in extjs, on click of every row I need to pass selected cell values of that row to another JavaScript library. So to do so, I am considering html as a bridge, if I can somehow get the value in html then I think passing rest won't be tough job. In this regard, I have couple of questions
Am I correct in the way of my thinking?
If so, can anyone suggest me how to pass parameters from extjs to html?
I am retrieving the cell values from Extjs grid using this code
var grid = Ext.getCmp('lineGridChart');
var selectedRecords= grid.getView().getSelectionModel().getSelection();
myWTN = selectedRecords[0].get('wtn');
myMOU = selectedRecords[0].get('avg');
myWING = selectedRecords[0].get('wing');
myPDU = selectedRecords[0].get('pdu');
I need to pass those values to d3 or a simple jquery.

You can use localstorage...
Or just:
myData = selectedRecords[0].getData();
Update:
myData = {
data: {},
set: function(data) {
myData.data = data;
// You jquery logik
}
};
myData.set(selectedRecords[0].getData());

How to exclude an object's id property before or during $.toJSON

I'm writing a custom REST adapter for ember-data users with a django rest framework app and need to build a JSON string to do POST/PUT. The only problem is I can't seem to chain another jQuery method after the $.toJSON that removes this.
So far I have an ember.js object that I plan to extract each property from, except my django app doesn't want the id to go along with the HTTP POST
I can get a legit string like so
$.param(record.toJSON());
This results in the following
id=0&username=dat
I'd like a quick way to exclude id when I do this toJSON (does this exist w/ out writing it by hand?) Using jQuery 1.8+
Thank you in advance

Turns out this was really simple
var json_data = record.toJSON();
delete json_data.id;
var data = $.param(json_data);
Now instead of
id=0&username=dat
I now get
username=dat