I have tree created with Dynatree, with checkboxes in it.
Can you help me how can I get a list (or array) of checked checkboxes in it, so I can manipulate with them (move them into another tree)?
Tnx in adv!
Ok, here it is:
var selNodes = node1.tree.getSelectedNodes();
// convert to title/key array
var selKeys = $.map(selNodes, function(node1){
alert("[" + node1.data.key + "]: '" + node1.data.title + "'");
});
Related
I'm struggling dynamically creating a dijit.form.DateTextBox and then adding it to an existing document. I've tried several things, first of which is to dynamically create the field via new dijit.form.DateTextBox and then adding it via domConstruct. With this method, I end up getting
"Uncaught TypeError: Failed to execute 'appendChild' on 'Node':
parameter 1 is not of type 'Node'."
.
When I try to dynamically create it with a string that evaluates to what I would use if I was declaratively creating it, I end up with a simple text box.
I was hopeful that the HTML 5 date would work, but it doesn't seem they've improved that a single bit since the moment they came up with the idea.
Here's the code I'm using. The commented version is the one that attempts to create it declaratively, which ends up as only a simple text field, and not a DateTextBox
var startDateField = new dijit.form.DateTextBox({ name: startDateID, class: "dateField",
value: startDate, onchange: "setstartDate(this.value)"}, startDateID);
//var startDateField = '<input id="' + startDateID + '" data-dojo-type="dijit.form.DateTextField" name="' + startDateID + '" class="dateField" ' +
// 'value="' + startDate + '" required onChange="setstartDate(this.value)"/>';
var startDateField = domConstruct.place(startDate, startDateLabel, "after");
You have to use placeAt when it comes to widgets:
var startDateField = new dijit.form.DateTextBox({ name: startDateID, class: "dateField", value: startDate, onchange: "setstartDate(this.value)"}, startDateID);
startDateField.placeAt(startDateLabel, "after");
consider the following:
gridID = datagridID;
//column headers
domConstruct.place("<div class=\"gridheaderrow\" data-type =\"BolingerGridHeaderRow\" ></div>", gridID, "first");
var node = query("div[data-type=\"BolingerGridRow\"]", gridID);
var headerNode = query("div[data-type=\"BolingerGridHeaderRow\"]", gridID);
var cells = query("div[data-type=\"BolingerGridCell\"]", node[0]);
for (var i = 0; i < cells.length; i++)
{
var columnname;
columnname = attr.get(cells[i], "data-columnname");
var headernode = domConstruct.place("<div class=\"gridheadercell\" data-type=\"BolingerGridHeaderCell\">" + columnname + "</div>", headerNode[0], "last");
var sortup = domConstruct.place("<div id=column'" + i + "' data-columnupid = '" + i + "' data-type='sortuparrow' style='display:inline; cursor:pointer'>▲</div>", headernode, "last");
var sortdown = domConstruct.place("<div id=column'" + i + "' data-columndownid = '" + i + "' data-type='sortdownarrow' style='display:inline; cursor:pointer'>▼</div>", headernode, "last");
}
for (var i = 0; i < cells.length; i++)
{
var sortupnode = query("[data-columnupid = '" + i + "']", gridID)[0];
var sortdownnode = query("[data-columndownid = '" + i + "']", gridID)[0];
on(sortupnode, "click", function (e) {
var num = attr.get(sortupnode, "data-columnupid");
sort(true, num);
});
on(sortdownnode, "click", function (e) {
var num = attr.get(sortdownnode, "data-columndownid");
sort(false, num);
});
}
This code places little up and down arrows above each column and attaches on click events to them, which calls the sort function. I'm quite sure I'm attaching the events each up or down arrow once. Yet, no matter what arrow I click on the handler that handles it belongs to the arrow of the last column. Why is this? I'm figuring it has something to do with attaching handlers to nodes I just placed. Thoughts?
Variables do not have block scope in JavaScript. You are expecting that each iteration through your second for loop has its own sortupnode and sortdownnode variables, but in fact each time through the loop, the same variable is being redeclared and its value is being replaced. Your on handlers are continuing to reference the same sortupnode and sortdownnode variables, which by the time they run, will always reference the very last nodes iterated.
In this case the absolute simplest fix would likely be to replace sortupnode and sortdownnode inside your event handlers with this, which should reference the element that the handler fired for. However, you should be able to avoid this issue completely and hook up these event handlers much more efficiently using event delegation. Something along the lines of:
on(document.getElementById(gridID), '[data-columnupid]:click', function (event) {
// Inside delegated event handlers registered with dojo/on,
// `this` references the element that matched the selector
var num = this.getAttribute('data-columnupid');
sort(true, num);
});
Addendum
In response to your second comment: the problem you are facing has no direct correlation to event handling; it is purely related to how scope works in JavaScript.
To attempt to better illustrate how the variables in your loops are actually working, bear in mind that this:
for (var i = 0; i < ...; i++) {
var foo = ...;
...
}
... is essentially equivalent to this, because JavaScript variables do not have block scope:
var i;
var foo;
for (i = 0; i < ...; i++) {
foo = ...;
...
}
That is to say, the variable foo exists in the scope of the surrounding function, not the for loop. The same foo variable has its value modified each time through the loop.
Any code that looks at foo after the loop finishes running will see the last value foo was assigned in the loop. You are defining event handler callbacks in each iteration through your loop which have access to foo from the containing function's scope, but those callbacks are only actually called way later when the user performs an action. "Way later" = after the loop finished running = foo is always going to be the value it was set to during the last iteration.
I have a tablesorter project which has been working good with client side paging since some months. Now I have to turn it to server side paging but I can't get it to work with all the features I was using with client side version.
As on subject, my problem is to make the contenteditable feature to work.
What I've done to achieve that, is to write a custom function to bind to ajaxProcessing handler on the tablesorterPager config:
ajaxProcessing: function (data) {
if (data && data.hasOwnProperty('rows')) {
var str = "", d = data.rows,
// total number of rows (required)
total = data.total_rows,
// len should match pager set size (c.size)
len = d.length;
for (var i = 0; i < len; i++) {
str += '<tr>';
for (var column = 0; column < orderedFieldMapping.length; column++) {
if (orderedFieldMapping[column].toUpperCase() != 'ACTIVATIONDATE' || bReadOnly)
str += '<td class="' + orderedFieldMapping[column].toUpperCase() + '"' + ($('#' + orderedFieldMapping[column].toUpperCase()).prop('checked') ? '' : 'style="display:none;"') + '><div>' + (eval('d[i].' + orderedFieldMapping[column]) != null ? eval('d[i].' + orderedFieldMapping[column]) : '') + '</div></td>';
else
str += '<td class="' + orderedFieldMapping[column].toUpperCase() + '"' + ($('#' + orderedFieldMapping[column].toUpperCase()).prop('checked') ? '' : 'style="display:none;"') + '><div ' + (eval('d[i].' + orderedFieldMapping[column]) != null ? '' : 'class="emptyPlaceholder"') + 'onmouseup="javascript:SelectActivationDateText(this);" onblur="javascript:RestoreCellStyle(this);">' + (eval('d[i].' + orderedFieldMapping[column]) != null ? eval('d[i].' + orderedFieldMapping[column]) : emptyTextString) + '</div></td>';
}
str += '</tr>';
}
// in version 2.10, you can optionally return $(rows) a set of table rows within a jQuery object
return [total, $(str)];
}
},
Please note that I'm returning a set of table rows within a jQuery object, option allowed as stated on the docs example comment (also visible on this code sample). The reason why I do such thing is that I need to control table markup to add styles, handlers and classes. That's what I do in the inner for cycle, and it's not very important knowing exactly what I'm doing there.
What is important is that I get the expected result and markup for my table, and server side paging is working with no issue, BUT contenteditable widget is not working.
I get no warnings on js console and all is working just fine, but I can't edit columns I marked as editable. I can see that also looking at the markup because contenteditable attribute is not present at all. Of course the widget is inintialized and configured (in the same way that it was on previous version, with client side paging).
Another hint that points on some widget malfunction (maybe): I managed to manually add (inside the very same function I posted above) the contenteditable attribute on the markup just to see if it would give me some information. In this case I can edit the content as expected, but I get no handler for editComplete event, and data acceptance settings are not applying. I could still manually add handlers and custom code to get it to work as intended, but it would be bad and I don't want to use a hack to get an already implemented feature to work.
Any hint would be appreciated, thanks to everyone who will answer.
I think I see the issue. The contenteditable widget does not re-apply the contenteditable property on the elements within the table cells when the content is updated (via the pager, or whatever).
So this is definitely a bug, I just opened a ticket: https://github.com/Mottie/tablesorter/issues/732
In the mean time, you can add the contenteditable property to the div in your markup:
str += '<td><div contenteditable>...</div></td>';
I have been working on a project where I need to interact with 3D objects using a hand joint, now I do that using distance formula but however . . i'm using hand joint (X,Y,Z) and using a formula to convert them to 3D space to be able to have the interact with the Models.
Instead of using a formula to do the conversion . . do i actually need to use the function MapSkeletalpoint to color image point??
To give an idea about what i'm doing:
var rightHands = playerSkeleton.Joints[JointType.HandRight];
var rightHandsX = rightHands.Position.X;
var rightHandsY = rightHands.Position.Y;
var rightHandsZ = rightHands.Position.Z;
HandX = rightHands.Position.X;
HandY = rightHands.Position.Y;
HandZ = rightHands.Position.Z;
foreach (_3DModel s in Solar)
{
x_mod = (float)Math.Floor(((HandX * 0.5f)) * maxWidth);
y_mod = (float)Math.Floor(((HandY * -0.5f)) * maxHeight);
z_mod = (float)Math.Floor((HandZ) / 4 * 20000);
if (Math.Sqrt(Math.Pow(x_mod - s.modelPosition.X, 2) + Math.Pow(y_mod- s.modelPosition.Y, 2) + Math.Pow(z_mod - s.modelPosition.Z,2)) < 20)
{
sound.Play();
Console.WriteLine("1" + "handx:" + x + "," + " " + "modelPos.X:" + s.modelPosition.X + "," + " " + "handY:" + y + "modelPos.Y:" + s.modelPosition.Y);
}
Actually, it's not easy to create effective hit test especially when there is larger number of objects.
The thing you need is a collision system. My recommendation to you is that you should use some existing, for example BEPU might be helpful:
http://bepu.squarespace.com/
You should bind the position of an object with the position of the hand (reported by Kinect) and BEPU will do the rest (it will trigger a handler in case of collision).
Just a small advice - it's always good to use relative position of the hand (e.g. to the shoulder). Using absolute coordinates reported by Kinect is not always desired in Kinect-based games (but you know better what you want)
I've looked around everywhere, but I can't seem to find exactly what I'm trying to do. It should be fairly simple...
I have a db table set up like this:
var db = Ti.Database.open('playerInfo.db');
db.execute('CREATE TABLE IF NOT EXISTS playersTable (id INTEGER PRIMARY KEY, name TEXT NOT NULL, "50" INTEGER, "25" INTEGER )');
I have two buttons with an assigned value of 25, and 50, respectively. Each button has a "value" key, where I assign their values. I am trying to accomplish three things:
When a button is pressed, find the column of corresponding value.
increase the value of this column by 1.
Retrieve the new value and console log it.
This is what my code looks like when a button is pressed:
var rows = db.execute("SELECT '" + button.value + "' FROM playersTable WHERE name= '" + owner + "'");
var imagesString = rows.fieldByName(button.value);
Ti.API.debug(imagesString)
This is all in a click event listener where the variable "owner" is passed in as a string.
This is the error I get:
message = "Attempted to access unknown result column 25";
I don't have too much experience with sql, so I'm not sure what I'm doing right and what I'm doing wrong. Any help is appreciated!
Thanks.
I'm not sure quite exactly what the problem is, but the following works for me. Note that the "?" variable substitution syntax makes sure that the values are quoted properly for MySQL:
button = e.source;
db = Titanium.Database.open('test');
var rows = db.execute("SELECT * FROM playersTable WHERE name= ?", "foo");
// Theoretically this should be returning a single row. For other results,
// we would loop through the result set using result.next, but here just check if
// we got a valid row.
if (rows.isValidRow()) {
var imagesString = rows.fieldByName(button.value);
var id = rows.fieldByName('id');
imagesString = imagesString + 1;
Ti.API.info("id = " + id + " val = " + imagesString);
// The ? substitution syntax doesn't work for column names, so we
// still need to stick the button value into the query string.
db.execute('UPDATE playersTable set "' + button.value +'"= ? where id = ?', imagesString, id);
}
else
{
Ti.API.info("Row not found.");
}
db.close();
If you get the row not found error, it's possible your data isn't getting inserted properly in the first place. Here's how I inserted my test row for player "foo":
db.execute('insert into playersTable (name, "50", "25") values (?,?,?)', 'foo', 0, 0);
I think this should solve your problem. Let me know if this doesn't work for you.