For example, I am randomly picking a button element from within the rows of a table.
After the button is found, I want to retrieve the table's row which contains a selected button.
Heres is my code snippet:
browser.findElements(by.css('[ng-click*=submit]')).then(function (results) {
var randomNum = Math.floor(Math.random() * results.length);
var row = results[randomNum];
// ^ Here I want to get the parent of my random button
});
As of the most recent Protractor (1.6.1 as of this writing), the syntax changed a bit:
var row = results[randomNum].element(by.xpath('..'));
(use element() instead of findElement()).
Decided to use xpath.
var row = results[randomNum].findElement(by.xpath('ancestor::tr'));
You can now use
var element = element(by.css('.foo')).getWebElement()
var parentElement = element.getDriver() // gets the parent element
to get the parent element. See http://www.protractortest.org/#/api?view=webdriver.WebElement.prototype.getDriver for more info.
Actually, at the moment there is an easier way to select the parent of an element avoiding to use xpath.
From an ElementFinder you can simply access the parent element through parentElementArrayFinder and for example then trigger directly the click method:
myElement.parentElementArrayFinder.click();
Related
I need to manipulate the text elements of the first and last tick of an axis to bring them more towards the center.
I am trying to select them, one at the time, with something like svg.select('.tick:last-child text') but it doesn't work. I'd then apply .transform('translate(4,0)')...
Am I doing something wrong? How can I achieve this?
One thing you could do is to create custom sub-selections by adding methods to d3.selection.prototype. You could create a selection.first() method that selects the first item in a selection, and a selection.last() method that selects the last item. For instance:
d3.selection.prototype.first = function() {
return d3.select(this[0][0]);
};
d3.selection.prototype.last = function() {
var last = this.size() - 1;
return d3.select(this[0][last]);
};
This would let you do the following:
var tickLabels = svg.selectAll('.tick text');
tickLabels.first()
.attr('transform','translate(4,0)');
tickLabels.last()
.attr('transform','translate(-4,0)');
Of course, you need to make sure that you only have one axis if you do it that way. Otherwise, specify the axis in your initial selection:
var tickLabels = svg.selectAll('.axis.x .tick text');
HERE is an example.
Here's the cleanest method I've found:
g.selectAll(".tick:first-of-type text").remove();
g.selectAll(".tick:last-of-type text").remove();
As google brought me here, I also want to add a cleaner method to what Adam Grey wrote.
Sometimes you just want to do it without taking a reference of selectAll .
svg.selectAll('.gridlines').filter(function(d, i,list) {
return i === list.length - 1;
}).attr('display', 'none');
the 3rd parameter of the filter function gives you the selected List of elements.
They don't exist in d3 specifically, but you can use the .firstChild and .lastChild methods on a node.
You can first select all of the parents of the node, and then operate within the scope of a .each() method, like so:
d3.selectAll('.myParentElements').each(function(d,i){
var firstChild = this.firstChild,
lastChild = this.lastChild;
//Do stuff with first and last child
});
Within the scope of .each(), this refers to the individual node, which is not wrapped by a d3 selection, so all of the standard methods on a node are available.
Using .filter() with a function also works selection.filter(filter) :
var gridlines;
gridlines = svg.selectAll('.gridlines');
gridlines.filter(function(d, i) {
return i === gridlines.size() - 1;
}).attr('display', 'none');
It's for D3.js v4
d3.selection.prototype.first = function() {
return d3.select(
this.nodes()[0]
);
};
d3.selection.prototype.last = function() {
return d3.select(
this.nodes()[this.size() - 1]
);
};
Example:
var lines = svg.selectAll('line');
lines.first()
.attr('transform','translate(4,0)');
lines.last()
.attr('transform','translate(-4,0)');
Here is another, even though I used Fered's solution for a problem I met.
d3.select(d3.selectAll('*').nodes().reverse()[0])
I'm trying to understand how I can have nested knockoutjs view models with a little fiddle that lists some items and on click of a button, it shows the details of that item. Then, I have a button that updates the Id property of each item by adding 15 to each ones but for a reason, they end up having all the same value at the end.
Can someone enlighten me?
Thanks!
The fiddle in question
It's your .Name computed property. The Id change works correctly.
http://fiddle.jshell.net/Y3JXD/1/
The item in the closure was always the last item in the list after the first execution. Remember that the computed is updated any time the observable changes. So, the first time during setup, it worked fine as item was the item from the loop. But, what was captured in the closure was just item (the 15th item), not the one that was for that specific loop instance.
Update: forgot about the second parameter to computed as suggested in a comment.
http://fiddle.jshell.net/Y3JXD/1/
item.Name = ko.computed(function () { return 'Item_' + item.Id(); }, item);
Here's another technique for wrapping the reference in a closure, and capturing the right item instance (just as a demonstration for what needs to happen to capture the proper scope).
self.loadItems = function () {
for (var i = 0; i < 15; i++) {
var item = ko.mapping.fromJS({
Id: i
});
self.items.push(item);
(function (item) {
item.Name = ko.computed(function () {
return 'Item_' + item.Id();
});
})(item);
}
};
Could you move the Name property to the itemModel?
self.Name = ko.computed(function() {
return 'Item_' + self.Id();
});
It seems odd to set it when you create the object, rather than when you consume it.
I'm trying to prevent the dragging and dropping of nodes outside of the parent node ("LLCA") with no luck.
Any suggestions?
Image of Treeview
I ended up getting it to work using your code below:
function onDrop(e) {
var dst = e.destinationNode;
var first = $('.k-item:first');
var pos = e.dropPosition;
if (dst && dst.uid === first.uid && pos !== "over") {
e.setValid(false);
}
}
Lets define the treeview:
var tree = $("#tree").kendoTreeView({
dataSource :content,
dragAndDrop:true
}).data("kendoTreeView");
What I'm going to do is add a drop callback where I will control that:
We are not dropping outside the tree
We are not dropping before or after the first node of the tree
The definition of the tree would be:
var tree = $("#tree").kendoTreeView({
dataSource :content,
dragAndDrop:true,
drop :function (ev) {
var dst = tree.dataItem(ev.destinationNode);
var first = tree.dataItem(".k-item:first");
var pos = ev.dropPosition;
if (dst && dst.uid === first.uid && pos !== "over") {
console.log("invalid");
ev.setValid(false);
}
}
}).data("kendoTreeView");
Check http://docs.kendoui.com/api/web/treeview#drop for information on drop event.
Because I cannot comment on an answer, I will write my own.
User Mithrilhall asked about MVC wrappers, also the top answer only prevents movement to the root node.
I will attempt to answer both Mithrilhall and provide an example where you can only move a child within the context of its parent. To put it another way, to only allow children of any parent to change their order within the parent.
Firstly, for MithrilHall, this is how you get to the events in MVC.
#(Html.Kendo().TreeView()
.Name("ourTreeView")
.Events(e => e.Drop("treeViewDrop"))
There are other events in treeview, you can take a gander for yourself. The argument is the name of a javascript function. Here is an example javascript function for this MVC wrapper to prevent children from moving outside of their parent, but allowing them to still move within the parent.
<script type="text/javascript">
function treeViewDrop(dropEvent) {
var treeView = $("#ourTreeView").data("kendoTreeView");
var destination = treeView.dataItem(dropEvent.destinationNode);
var source = treeView.dataItem(dropEvent.sourceNode);
if (!(destination && destination.parentID == source.parentID)) {
dropEvent.setValid(false);
}
}
</script>
I had a parentID field modeled in my datasource. You could accomplish this in many ways. The dataItem method returns a kendo treeview item, so it has all of your modeled fields in it.
Also understand, this solution does not change the widget to show an X when you are moving to a place you cannot drop to. This is another problem with another solution.
I hope this helps, good luck!
I am new to dashcode and trying to build a simple web app for iphone using it. My primary aim is to have a Rectangular List (I have used the "Rounded rectangle list"). It is a static list and has three rows. What I want is a website to open when user clicks on any of the row, and each row would have a different URL. I was able to add a Rounded rectangle list with three static rows like
The object ID is "list"
Row 1-- Label- "Gift Cards" , Value - "http://www.abcxyz.com/giftcard"
Row 2-- Label- "Toys" , Value - "http://www.abcxyz.com/toys"
Row 3-- Label- "Bikes" , Value - "http://www.abcxyz.com/bikes"
i added onclick even to call a java script function like below
function myButtonPressHandler(event)
{
var websiteURL = "http://www.abcxyz.com/giftcard";
location = websiteURL;
}
the above code opens the same URL "http://www.abcxyz.com/giftcard" when the user clicks on any of the three buttons, but what I want is to fetch the value of each child node (which would be their respective URLs) at runtime and open it using location = WebsiteURL something like below (did'nt work for me :( -
function myButtonPressHandler(event)
{
var websiteURL = document.getElementById("list").children;
var WebURL = websiteURL[???].value;
location = WebURL;
}
Any help would be appreciated.
Thanks
OK ... so figured out my own answer. The Rounded Rectangular list is actually a multidimensional array. so to get the value of each of the rows i.e. the Http URLs and open them on the browser when the rows were touched/tapped/pressed is as below.
function buttonpresshandler(event)
{
// Insert Code Here
var list = document.getElementById("list").object;
var selectedObjects = list.selectedObjects();
//Open webpage with the value of each label
location = selectedObjects[0][1];
}
Hurray!
I have a div called album_number_xx (xx being digits).
this div contains another set of divs, each one representing an image with caption and other details.
I need to allow the user to reorder images by drag and drop, and then update the database with the new order.
using jQuery sortable and serialize, I'm able to get the sequence of images on update. But don't know how to get the album_id, (the xx in the name of the container div).
I though that maybe I can grab the name of that div, store it in variable and then cut the last digits, but don't know how to do it.
any ideas?
thanks,
Patrick
I don't know how you're grabbing the div name, but if you have it in a variable:
var albumId = divNameVariable.split('_')[2];
var name = $('div[id^=album_number]').attr('id');
var num = parseInt(name.substr(name.lastIndexOf('_') + 1));
Based on Scott Evernden answer you can do it on click event:
$(document).ready
(function()
{
var albums = $("div[id^='album_number']").click
(function()
{
var id = $(this).attr('id');
var numberId = id.substr(id.lastIndexOf('_') +1);
alert(numberId);
});
});