I've got an application that seems to work fine when I put all my elements inside a <dom-bind> element. When I remove that dom-bind (no longer needed), most of the elements carry on working, but paper-card stops and throws an error:
"Uncaught DOMException: Failed to construct 'CustomElement': The result must not have attributes"
The error is thrown from polymer/lib/legacy/lib/class.html if that helps. Anyone got any ideas?
I had the same error, and find out angular create an empty element (), then bind stuffs to it.
This fail according to spec:
4.13.2 Requirements for custom element constructors
The element must not gain any attributes or children
https://html.spec.whatwg.org/multipage/custom-elements.html#custom-element-conformance
I fix my problem by assigning in connectedCallback()
Related
When trying to remove a the parent element I have been able to use this line for most cases:
Polymer.dom(Polymer.dom(this).node.domHost.parentNode).removeChild(Polymer.dom(this).node.domHost);
Yet in some cases I get this error:
Uncaught Error: The node to be removed is not a child of this node: [object HTMLElement]
I have verified the child is there and the objects look correct, but I think I am probably missing a Polymer.dom() somewhere?
I have been able to solve it for all cases that I need by doing this:
var thisNode = Polymer.dom(this).node;
Polymer.dom(Polymer.dom(thisNode.domHost).parentNode).removeChild(thisNode.domHost);
Given this <template>:
<template id="my-template">
<h1 id="h">Hello!</h1>
</template>
And JS:
var t = document.querySelector("#my-template");
var h = t.content.querySelector("h1");
h.outerHTML = "<h3>AAAAAAAAAAAAAA</h3>";
It's interesting that it works in FireFox and Edge but in Chrome outerHTML requires a parent element, otherwise it throws error in console (https://chromium.googlesource.com/chromium/blink/+/master/Source/core/dom/Element.cpp#2528):
<template id="my-template">
<div>
<h1 id="h">Hello!</h1>
</div>
</template>
See https://jsfiddle.net/q5fmn186/11/
My question is, is Chrome behavior the correct one? Should setting outerHTML not work in <template> on direct children? Why aren't the other web-browser treat it like an error?
The other web browsers won't treat it like an error because they are following the DOM Parsing and Serialization W3C Candidate Recommendation (which is not a standard yet):
On setting [outerHTML], the following steps must be run:
Let parent be the context object's parent.
If parent is null, terminate these steps. There would be no way to obtain a reference to the nodes created even if the remaining steps were run.
If parent is a Document, throw a DOMException with name "NoModificationAllowedError" exception.
If parent is a DocumentFragment, let parent be a new Element with body as its local name, the HTML namespace as its namespace, and the context object's node document as its node document.
Let fragment be the result of invoking the fragment parsing algorithm with the new value as markup, and parent as the context element.
Replace the context object with fragment within the context object's parent.
The <template>'s content is of type DocumentFragment (step 4) but it is treated (in this situation) as a Document (step 3) by Chrome and Safari.
Hi I am trying to access the DIV element using watir but I am unable to do that,I have tried in different ways but couldn't access it,may be I think it need to be access through some parent element can anyone help me out?
My system Configurations
IE-8
Windows 7
I tried with the below command
#ie.div(:text,'COMPOSE').click
the command gets execute with no errors but no action is performed on the UI
The best solution appears to be switching to Watir-Webdriver. With Watir-Webdriver, #ie.div(:text,'COMPOSE').click will work as expected.
Assuming that is not an option, there are a couple of reasons why that same command does not work with Watir(-Classic) v1.6.7:
The first problem is that #ie.div(:text,'COMPOSE').click will find the first div that contains this text. This would be one of the ancestors of the div you want. As a result, Watir will send the click event against the wrong element.
The second problem is that the div is not responding to the onclick event fired by Watir. I am not sure why this problem exists.
To solve the first problem, you will need to be more specific when locating the div. In this case, the "role" attribute can be used since none of the ancestor elements have this attribute. Watir-Classic does not support using the role attribute as a locator. As a result, you will need to create a custom locator using an element collection and the find method:
#ie.divs.find{ |div| div.attribute_value('role') == 'button' && div.text == 'COMPOSE' }
To solve the second problem, it turns out that double clicking does work. While newer versions of Watir-Classic have a double_click method implemented, it does not exist in 1.6.7. You can replicate the method by calling the fire_event method:
.fire_event('ondblclick')
Putting it all together, the following will click the compose button:
#ie.divs.find{ |div| div.attribute_value('role') == 'button' && div.text == 'COMPOSE' }.fire_event('ondblclick')
There may be more than one element on the page with the text 'COMPOSE', some may be hidden. Try:
#ie.divs(:text,'COMPOSE').size
That is divs with an s.
Then you can try something like the following and see if you get a change in the UI:
#ie.divs(:text,'COMPOSE').each { |b| b.fire_event('click') }
I remember that fire_event works better, but would recommend consulting the docs for the difference between .click and fire_event.
I am trying to implement drag and drop files from desktop using knockout. The starting code is taken from html5rocks.
I tried to implement this using event binding, so my View looks something like this:
<div class="drop_zone" data-bind="event:{
dragover: function(data, e){ $root.dragover(e);},
drop: function(data, e){ $root.drop(e, $parent);},
dragenter: function(data, e){ $root.dragenter(e);},
dragleave: function(data, e){ $root.dragleave(e);}
}">Drop files here</div>
The $parent parameter was used in attempt to do something similar to my previous question, where parent was able to locate where exactly the element should be removed.
My ViewModel is an observableArray of observableArrays (many dropzones) and looks like this:
this.dropZones = ko.observableArray([{
'elements' : ko.observableArray([])
},{
'elements' : ko.observableArray([])
}]);
The full code can be found in jsFiddle, but the problem is that I can not properly add new files to the files element. Also I can not correctly highlight the element the person is dragEntering/Leaving.
I understand why I can not highlight the proper element (I just select every class, but I can not understand how to select the parent element), I am failing to understand why parent.elements.push(f.name); does not add the name of the file to the right parent.
Can anyone please tell me what is the problem and how can I fix it?
P.S. in jsFiddle I get the error:
TypeError: Cannot read property 'dataTransfer' of undefined
which tells me that I am passing wrong event, but the same code on my local server does not give me this problem. The error which I am getting on localhost is:
Uncaught TypeError: Cannot call method 'push' of undefined
which tells me that my idea of using parent was wrong.
1) { $root.drop(e, $data);} instead of { $root.drop(e, $parent);}
2) var files = e.dataTransfer.files; (without originalEvent)
Fiddle. (I've not fixed problem with css, do it youself :))
You should use $data instead of $parent because of elements is the property of each dropZone element. So, when you iterate with foreach: dropZones you have access to current element by $data, and you should send to $root.drop function current element (not parent) for get access to it elements array.
Update:
Solved CSS problem. (with help of $index() and jQuery .eq())
You could read about binding context (parent, data, index and etc.) here.
I keep getting errors doing this:
puts browser.table(:after? => span(:text => "Asmeniniai duomenys") )[2][2].text
basically saying:
undefined method `span' for main:Object (NoMethodError)
or
undefined method `table' for main:Object (NoMethodError) etc...
so I decided that the table was not found. I tried if/else, but it's the first time I used ruby, I did not understand if it worked or not.
So I thought that the simplest way would be to find out how to highlight something.
Could anyone suggest how can I highlight elements or how to fix this problem?
I assume you mean to highlight the element so you can determine if the right element is being found.
You can use the Element#flash method. This method will change the background of the element a couple of times, which should help you figure out what element was found.
For example:
browser.table.flash