Develop Reference

HTML5 formData.append() passing field names and values as single parameter

I have to append some information in my JS with form data. Something like..
var form_data = new FormData();
form_data.append('photo', photo_data );
form_data.append('customer_id', customer_id);
form_data.append('year_name', year_name);
As we can see I have used .append thrice for three information. I tried something like this and did not work as .append() expects two parameters(field name and value) and not object.
var data = {'photo': photo_data, 'customer_id': customer_id, 'year_name', year_name};
form_data.append(data);
I wish to know if there is some way to pass multiple field names and values in a single line. Thanks!

KnockoutJS, mapping plugin, get notified when changes in model?

Im using knockoutJS in following way:
var messagesFromServer = getJSONData().messages; //this get msgs from server
ko.mapping.fromJS(messagesFromServer, {}, myobject.viewModel.Messages);
Then i am basically calling this every three seconds to update html table, and it works just fine, new rows are added if new data found from server. Now i would like to add custom callback when something has actually changed, for example when new messages are found.
How should i implement this?
thanks in adv,
-hk

You could convert the two objects into json, then compare them json strings.
var messagesFromServer = getJSONData().messages; //this get msgs from server
var newString = ko.toJSON(messagesFromServer);
var oldString = ko.toJSON(myobject.viewModel.Messages);
if(newString != oldString ) {
// something new
}
ko.mapping.fromJS(messagesFromServer, {}, myobject.viewModel.Messages);
See ko.toJSON doc
I hope it helps.

If the messages is array, you can use ko.utils.compareArrays to detect the changes and raise custom events yourself. Here is code example for comparing ko.observableArray(). Look for Comparing two arrays

Create object property names using loop and input textboxes

I am refactoring some code where I grab the values inputted into textboxes and use said values for calculations. The problem is rather than using document.getElementByID multiple times I want to loop through each textbox on the page and assigning each value to this object which I will pass to my calculation functions. I would also like to set the property names of this object by looking at the input textbox IDs and using the ID strings for the object property names.
See code below:
$(document).ready(function() {
var calcObj = new Object();
$("input[id^='txt']").each(function(i, val) {
calcObj[i] = this.value;
});
$.each(calcObj, function(i, val) {
// alert(val);
});
});
As you can see when document is ready, object is created. There is a jquery .each loop to go through every input with id that contains txt. I am assigning this.value to object where index is i.
So I want to some how name the properties of this object and assign value so I can reference object property name elsewhere in the code where I pass this object to another function.
Thanks.

As far as I understand, you want:
calcObj[this.id] = this.value;

I don't exactly get what you're asking for, because it seems like you're already doing what I think you're asking.
Right now, you're doing:
calcObj[i] = this.value;
That's no different from assigning it like:
calcObj['foo'] = this.value;
// and later we can access that via
alert( calcObj.foo ); // or calcObj['foo']
You can be dynamic with that as well, like:
calcObj[this.id] = this.value;

TaffyDB: Select problems

I'm new to TaffyDB and haven't done a lot of javascript programming so I'm hoping that the problem I'm having is something simple. I'm trying to update a listbox with the options stored in the TaffyDB according to the selected client. When I do my select however, it is returning all the rows.
Below is the code I am using to update the listbox, along with the selectString used to do the query, and what's in the TaffyDB.
Anyone have any ideas why I am getting back all rows when I specify clientID = 1788?
I tried the select string with and without quotes around the column identifier.
// load existing user client projects if we have any
var lbProjects = document.getElementById('lbProjects');
lbProjects.options.length = 0;
var selectString = '{clientID:"' + clientID + '"}';
alert(selectString);
userProjects(selectString).each(
function (r) {
var option = new Option();
option.value = r.projectID;
option.text = r.projectName;
lbProjects.add(option, null);
});
What's in selectString:
{clientID:"1788"}
What's in the DB:
[{"clientID":"1788","projectID":"19"},
{"clientID":"1789","projectID":"24"},
{"clientID":"1790","projectID":"23"}]
Thanks for any help.
Aaron L. Bratcher

The problem was trying to use the selectString variable.
The line
userProjects(selectString).each(
now reads
userProjects({clientID: clientIDValue}).each(
I was supposed to be passing in an object array, not a string. {} in javascript creates an array of objects.

How can I post a bunch of checkbox names to an array?

I'm looking to get a bunch of checkboxes (all with the same class) and get all the attribute names and push all the checked boxes into an array (also remove them from the array if they get unchecked).
Eventually, I want to pass an array of what was checked via ajax, and the ajax refreshes every time a box is checked/unchecked.
Any ideas on how I'd do this?

Use $.map to get all the names of checkboxes in an array.
var names = $('.theClassName').map(function() {
return this.name;
});
For second part of your question.
To get only checked checkboxes use $('.theClassName:checked'). You don't have to maintain an array for this.

Try the following
var names = [];
$('.theClassName').each(function() {
var name = $(this).attr('name');
names.push(name);
});

var names = $('input.class_name:checked').map(function {
return $(this).attr('name');
})
will fill an array with the names of the checked checkboxes.