D3 invalid character in element - mongodb

I'm getting a response in JSON format, which contains an _id that is stored as an ObjectID in Mongodb on the server side. However, I change it into a String, and it still won't let me add it. Is it because it has numbers? I need the element to be identifiable by the id, so if I can't append this way, is there any other way I can reference the element by the id?
var group = d3.select("#containerthing");
var id = response._id.toString();
console.log(id);
//5802bc044f6313c1097de4a2
var responseNode = group.append(id).attr("fill","black").attr("x", 15).attr("y", 15).attr("width", 190).attr("height", 90);
//InvalidCharacterError: String contains an invalid character

I believe that I understand your problem.
D3's .append():
If the specified type is a string, appends a new element of this type (tag name) as the last child of each selected element, or the next following sibling in the update selection if this is an enter selection. [...] This function should return an element to be appended. (The function typically creates a new element, but it may instead return an existing element.
Why .append() work fine if you pass 'foo'? Because D3 append a custom tag element. If you see in your console I'am sure that you will see <foo>...</foo>
Why .append() work wrong if you pass '5802bc044f6313c1097de4a2'? A custom tag element can't start with a number. You don't use _id, you should try to find another pattern for identify your element.
I hope that helps

The reason was that you can't start elements with numbers. I had to do:
var responseNode = group.append("n"+id).attr("fill","black").attr("x", 15).attr("y", 15).attr("width", 190).attr("height", 90);
to get it to work.

Related

How to negate class selector in Cytoscape.js?

I want to select all elements that do not have the class "myclass". How can I do that in Cytoscape.js?
According to http://js.cytoscape.org/#selectors/data, "[^name] Matches elements if the specified data attribute is not defined", however a class is not a data attribute and ^.myclass does not work, neither does :not(.myclass).
The error is The selector :not(.myclass) is invalid.
Is there a way to negate classes?
If you want to get the negative class selector, you can do this:
cy.elements().not(cy.$('.yourClass'));
// in more detail
var allElements = cy.elements(); // get all elements
var negators = cy.$('.yourClass'); // get all elements with the class to negate
var result = allElements.not(negators); // gets the difference between the two collections
If you really want to achieve this by using selectors only, then you might add a data field to each element which has myclass (this can be done while adding the class), and then use [^myclass]

Protractor - Compare two elements having same locator

My application uses infinite scrolling on row of records which means a locator for any particular record, say last record, is always going to be same but the record underneath is going to be different every time I do a scroll.
I wish to compare the the element corresponding to last element before it is scrolled to the same element corresponding to last element after it is scrolled
Protractor has a function 'equals' but I suppose it compares based on the locator which is why it always result as true when I compare the last elements having same locator but different record.
Is there any other way to compare two elements directly?
Its very simlple. before you perform scrolling store the text in some variable. After performing scrolling again use the same locator to get the latest record's text. Look at below example code.
var textOfLastRecordBeforescrolling = element.all(by.css("someLocator")).last().getText();
//Perform Scrolling
var textOfLastRecordAfterscrolling = element.all(by.css("someLocator")).last().getText();
expect(textOfLastRecordBeforescrolling).toEqual(textOfLastRecordAfterscrolling) //do whatever comparison you want do
You will probably need to save the information from the first element, then scroll, get the information from the second, and then compare.
it('Has different elements after infinite scrolling', function(){
var elementOfInterest = $$('.infiniteScrollElement').last();
// Get the text of the first element and pass it down
elementOfInterest.getText().then(function(firstElementsText){
// Scroll however far you need to
browser.executeScript('window.scrollTo(0,500);').then(function(){
// Compare the current elements text with the past elements text
expect(elementOfInterest.getText()).not.toEqual(firstElementsText, 'Error: The text should be different between the two elements, but was not');
})
})
});
To compare an instance of a web element, you can test the value returned by element(...).getId().
The returned id is a reference generated for each encounter HTMLElement object in the page and is not related to the id attribute/property.
This is an example to scroll the content and wait for the last element to be replaced:
browser.get("https://twitter.com/BBC/");
// define the locator for the last element
var lastElement = $$('#stream-items-id > li').last();
// store the reference for the last element
var storedRef = lastElement.getId();
// scroll to the last element
browser.actions().mouseMove(lastElement).perform();
// wait for the last element to be another reference
browser.wait(function(){
return storedRef.then(function(a){
return lastElement.getId().then(b => a !== b);
}, 3000);
});
// compare the stored reference with the last element
expect(lastElement.getId()).not.toEqual(storedRef);

SelectField renders unicode syntax

When dynamically creating choices for SelectField in WTForms, I get (u'Choice',) rendered in the dropdown list.
I suspect its something to do with unicode, but no idea how to get the correct string.
for example
form.group_id_name.choices = [(row, row) for row in db.session.query(entry.group_id_name).distinct()]
In my forms I have
group_id_name = SelectField('group_id_name')
I would like it to render
<select id="group_id_name" name="group_id_name"><option value="Choice1">Choice1</option><option value="Choice2">Choice2</option></select>
Instead I get
<select id="group_id_name" name="group_id_name"><option value="(u'Choice1',)">(u'Choice1',)</option><option value="(u'Choice2',)">(u'Choice2',)</option></select>
It's not anything to do with Unicode.
query() returns a sequence of column values for each row. For a query with only one column in it you get a length-1-tuple.
When you implicitly convert a tuple to a string as part of the template you get the Python code representation of the tuple, which looks like (somevalue,).
You want to include the string value of the column itself in the template, so you should access the first element of the sequence, eg:
form.group_id_name.choices = [(row[0], row[0]) for row in db.session.query(entry.group_id_name).distinct()]
or using unpacking assignment:
form.group_id_name.choices = [(name, name) for (name,) in db.session.query(entry.group_id_name).distinct()]

Get back the webdriver.Locator out of an elementFinder

Given I have the elmFinder variable:
var elmFinder = element(by.css('.thing'));
What if i need to get back the webdriver.Locator, a.k.a locator strategy? i.e.
elmFinder.??? //=> by.css('.thing')
I'm looking after the function ??? if it exists.
UPDATE:
This feature has been merged and we can now do:
elmFinder.locator();
UPDATE:
This feature has been merged and we can now do:
elmFinder.locator();
Old answer:
You cannot. The element finder does not keep a reference to the locator:
https://github.com/angular/protractor/blob/master/lib/protractor.js#L103
What I typically do is store the selector in it's own var, and then place that string into the selector, so I can use both interchangably:
var cssThingSelector = '.thing';
var elem = $(cssThingSelector);
Something like that.
Edit:
I will also add that you can nest findElement calls from selenium webelement objects.
So, if there is another item in the inner html of the .thing web element (say, a span tag), you could just nest another findElement call:
var spanElem = elem.$('span');
You can do this as much as you'd like.

How to fetch value from custom multifield component?

I have created a multifield custom widget having two fields with names ./urlLink and ./urlText.
Now i m trying to fetch the values from widget into the component's jsp with following code
String property = properties.get("./urlLink",String[].class);
for(String value: property ) {
out.print(value);
}
out.print(property);
But i am not able to get its value instead i m getting error.
If you're getting a property and it contains a string value, you need to use the method getString() - that way when you have the property, you can set the string to the value by doing something like this:
Property property = properties.get("./urlLink",String.class);
String value = property.getString();
Just a side note, if your return is supposed to be a string array, your type that you're putting the values in should be a string array.
String[] value
Check out the documentation on day.com for Properties and getting the values inside them.
Looks like a typo: you don't prefix a property name with .\ when accessing it.
My guess is you got a NullPointerException, right? That's because there's no ./urlLink property in the value map (properties). You should check against that anyway (so that it's not thrown on a fresh page with no content).
If that doesn't help -- double check that you have the properties in the content (call your page with .xml or .infinite.json extensions, and then double check if you can read them as plain strings (you should be able to -- CRX does some magic, smart type conversions).
It's good to register custom xtype as :
// registering the custom widget with the name dualfield
CQ.Ext.reg("dualfield", CQ.Ext.form.DualField);
Then u can easily fetch the value as :
String[] data = properties.get("multi",String[].class);
Here multi is the name of widget having multifield as xtype