If getElementsByClassName can replace using TreeWalker, is it a good idea to do so ?
What are the benefits of using one over the other if the only objective is to replace a DOM element with a particular classname with another DOM element (or append a child into it) ?
Related
I want to create a .png file of a HTML page in angularjs and download it. For this I'm currently using dom-to-image.js and using the domToImage.toBlob function and passing the node element to it. But internally when it goes to dom-to-image.js it throws the error:
node.cloneNode() is not a function
Can anyone please assist me here?
Thanks
This error arises when you attempt to call cloneNode() on anything other than a single DOM node.
In this case, the error is coming from the dom-to-image library, which calls that method internally.
Note that without a code snippet, its hard to identify the precise issue with your code, but the point is, when you call domtoimage.toBlob(), you need to supply a single DOM node.
So double check what you are calling it with. If you are selecting by class, for instance, you could end up with more than one element.
Its best practice to be precise with which node you want to convert to a blob - use the id attribute, like this:
domtoimage.toBlob(document.getElementById('element')).then(...)
where element is the id of your target node.
Its also possible you're selecting with angular.element() or even using jQuery directly.
In both cases, this returns an Object -- which you can't call cloneNode() on.
Also note the following from the Angular docs for angular.element():
Note: All element references in AngularJS are always wrapped with jQuery or jqLite (such as the element argument in a directive's compile / link function). They are never raw DOM references.
Which means you would observe the same behavior in both cases, e.g. both of these:
domtoimage.toBlob($('#element')).then(...)
domtoimage.toBlob(angular.element('#element')).then(...)
would result in the error you see. You can index the Object before supplying it to domtoimage.toBlob(), perhaps like this:
domtoimage.toBlob($('#element')[0]).then(...)
domtoimage.toBlob(angular.element('#element')[0]).then(...)
and that would also work.
Also check out this post about "cloneNode is not a function".
I prepared a simple dojo here: http://dojo.telerik.com/iQERE
Scenario:
I have an array within another array and I wanted to render it with a kendo template in a sort of table/grid.
First array's items are the rows and inner array's items are the columns.
I googled and found this technique: template inside template
The problems are:
1) How can I bind values for the nested array's items?
I tried data-bind="value:subval" but it doesn't work.
I think because using that technique the 'real data' of this template is the outer array, not the inner one!
Tried data-bind="value: item.subval" - leaded to nothing.
So finally I tried data-bind="value: subList[#:index#].subval" and it works. But I ask myself: Is this correct?
2) How can I bind the value to a function in the nested template? (famous kendo mvvm calculated fields).
I hoped I could bind all the input to a unique function who takes the 'caller' value and do something (multiply for another model field for example).
But I can't get rid who called the function... my "e" argument is the whole data!!
After some experiments I tried this way: http://dojo.telerik.com/OpOja and first time works... but it seems the function doesn't trigger when the value1 of the model change (wich I would expect in a normal mvvm behavior), maybe because I declared the function inside the dataSource. (it's not an observable object itself?)
I hope I explained well my problem!
Well.. It seems is not possible. Response from a Telerik ticket:
I am afraid, that the Kendo MVVM framework would not allow you to achieve the desired two-way binding for in the discussed scenario. The reason for that is the fact, that in the $.each() in the template would be executed only once and will not be reevaluated in the viewModel changes.
In addition, in case you need to configure a hierarchical DataSource for an MVVM model, I would suggest you to follow this example. You will notice, that similarly to your implementation, it includes a field which is calculated as a function from another field. It however, will not allow you the desired two-way binding too. So the update of the value1 field would not trigger again the above mentioned function.
here's my problem, I'm using mootools' Drag&Drop functionalities, it works great but i can't find a way to add new droppable element on the fly since the droppable element are defined when the draggables are.
Their is a method makedraggable that you can use to add draggable element but it has no equivalent for the droppables.
With jQuery, you set the draggable elements on one side and the droppable on the other, so you can do pretty much what you want.
Do you know a way to solve my problem?
in theory, you should be able to push elements to the instance.droppables collection.
var foo = new Drag.Move({
droppables: document.getElements('div.dropHere'),
...
});
foo.droppables.push(document.id('newDropHere'));
// or...
foo.droppables.include(element); // etc. all array/Elements methods.
read https://github.com/mootools/mootools-more/blob/master/Source/Drag/Drag.Move.js
if you want actual help, build an example on tinker.io or jsfiddle.net. if memory serves, this has been asked here before and there had to be some extra work around parsing possible droppables in addition to adding to the Collection.
I'm looking for a way to refactor all usages of a method with another. I'm de-singleton-izing a class, and I'm trying to replace all of the getInstance() methods with another method.
In my case, I'd like to change all usages of OldClass.getInstance() to be NewClass.getInstance().getOldClass(0). Is this possible with NetBeans' refactoring tools?
In Netbeans you can refractor the name of the method, but you can't change C.m() to C.m().m2() with refractoring tools.
So the best solutions is to go with Edit->Replace or Replace in project.
Then replace all .getInstance() by .getInstance().getOldClass(0). (Take care of the scope). Don't worry it doesn't replace all occurence directly, it finds match then it displays a tree with checkboxes, you can click on Replace to replace the selected occurence.
I want to remove a div element with a specific class attribute using Coffeescript. I couldn't find any examples about DOM manipulation with Coffeescript on the Internet. How can I do this? Also any references to doing DOM would be great.
CoffeeScript is a JavaScript preprocessor, there is no additional standard library. What this means is that if you want to do DOM manipulation you would do it the same way you would in JavaScript.
You can use any JavaScript library like jQuery with CoffeeScript, alternatively you can use the document variable directly:
element.parentNode.removeChild(element) for element in document.getElementsByClassName('some-class')
Or (for browsers not supporting that method)
element.parentNode.removeChild(element) for element in document.getElementsByTagName('*') when element.className = 'some-class'
Or, since those identifiers are somewhat long, use block syntax:
for element in document.getElementsByTagName('*')
if element.className is 'some-class'
element.parentNode.removeChild(element)
Relevant quote from CoffeeScript.org:
The golden rule of CoffeeScript is: "It's just JavaScript". The code compiles one-to-one into the equivalent JS, and there is no interpretation at runtime. You can use any existing JavaScript library seamlessly from CoffeeScript (and vice-versa).
#lauren's answer works for me but when I'm using chrome, I'm getting the following error:
Uncaught TypeError: Cannot read property 'id' of undefined
Using the following works perfect, tested on Chrome.
$(document).on 'hidden.bs.modal', "#newProject", ->
document.getElementById("<ID>").outerHTML=''
delete element
From:
https://stackoverflow.com/a/19298575/5452072