I am trying to render polymer template using below code,
const shadowRoot = this.attachShadow({mode: 'open'});
const htmlTemplate = importDoc.querySelector('template');
shadowRoot.innerHTML = htmlTemplate.innerHTML;
But this renders two way binded data also as a string instead of showing the binded value e.g
<h1 id ="contactFooter">{{localize('_testVal')}}</h1>
is displayed as it is do anyone have any idea? Two way binding is just example it renders everything like this.
To use a <template> tag you should use importNode on the content.
e.g.
var clone = document.importNode(htmlTemplate.content, true);
shadowRoot.appendChild(clone);
// note that you will need to clear the shadowRoot if you do rerenderings
// OR you could try
shadowRoot.innerHTML = htmlTemplate.content;
see more details here https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template
Related
I'm looping through a table in the form of table.rows.length and inside it rows.cells.length and when a certain cell meets a certain criteria then I would like to set an attribute to that html of that cell.
I know you can change the innerHTMl like
var x = document.getElementById("myTable").rows[0].cells;
x[0].innerHTML = "NEW CONTENT";
so I thought the attr would be like
x[0].attr = ('name', 'value');
But no such luck.
could someone please point me to the right direction?
If there are any resources you can recommend that give a full list of all the options you can add to a cell this way that would be great!
Since you're operating with HTML nodes directly - you're dealing with HTMLElement objects that are, in their turn, inherited from generic Element.
As you can see from documentation - you can reach attributes through Element.attributes map, each of them are Attr object with name and value properties.
So correct way will be to use:
x[0].setAttribute('name', 'value');
Working with jQuery and es6 syntax you could use the map function:
var xtr = $('#mytable tr');
xtr.map(itr => {
xtd = $(itr).children('td');
xtd.map(itd => {
$(itd).attr('key', 'value');
});
});
If thats confusing you can work with the for loop the old way:
var xtr = $('#mytable tr');
for(i in xtr){
xtd = $(xtr[i]).children('td');
for(j in xtd){
$(xtd[j]).attr('key', 'value');
}
}
Point being when using jQuery what you do is:
$('element').attr('key', 'value');
I am trying to add a custom element into a editable div using document.execCommand detailed at https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand.
But when I try to add a custom polymer element using the execCommand, browser is unable to recognize the custom element even if it was already imported into scope.
var video-id='FnoL3d33U8o'//a youtube video Id
var html = '<p><div><custom-video-element width="454" height="280" video-id="'+videoUrl+'"></custom-video-element></div></p>';
document.execCommand('insertHTML', false, html);
But this doesn't help and the custom-video-element is not recognized by the browser. Please help if there is any alternate ways or if I am running after a mirage!
if you know what element you need to append, then you can use document.createElement.
There are multiple options how to achiev that, but In your case:
var p = document.createElement("p");
var div = document.createElement("div");
var custom = document.createElement("custom-video-element")
custom.setAttribute("video-id", videoUrl);
.. setting another attributes ..
div.appendChild(custom);
p.appendChild(div);
document.appendChild(p);
and that is it. This should work well.
Of course there might be better and easier solutions but in your case this isn't so bad.
if you create bigger html structure inside your JS, you will do something like:
var div = document.createElement("div");
var inner = "<div class="test"><div></div><p class="p"></p></div>;
div.innerHTML = inner;
div.querySelector(".p").appendChild(document.createElement("custom-video-element"));
HTML has a draft specification for a < template > tag. Details here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template
I'm thinking about using Rivets.JS on a new project, I also want to use this new template tag.
Can the two be made to work together nicely?
I imagine I'd want to tell rivets something along the lines of 'get this template, bind it to this data and output the result here'.
You can copy the template as your normally would, and then use Rivets to bind to your new element. demo # jsfiddle
HTML:
<template id="demo">
<p id="tag">{ demo.info }<p>
</template>
Javascript:
var demo = {
info: "Test string"
}
// Copy template data to visible DOM
var el = document.getElementById("demo");
var clone = document.importNode(el.content, true);
document.body.appendChild(clone);
// Bind using Rivets as normal
var tag = document.getElementById("tag");
rivets.bind(tag, { demo: demo });
I hope someone can help me with this, It's a strange question maybe as I didn't find an answer online.
I call the database and retrieve a list (in json) of items.
Then in angularjs,I render this list by extracting relevant pieces of data(name,age,etc) and show it properly in a table as a list of rows.
I have then an edit button that takes me to another page where I want to put a dropdown list.
What I want to know if is possible to add to that dropdown list the rendered list I previously created in my previous page.
is it possible to save the previously rendered list in a variable and then use that variable in the dropdown?
thank you
You could store the list within a controller and make this data availablte to this dropdown, I think.
Instead of trying to query for the list, add the list to the template, get the list from the template and render somewhere else, I'd suggest query for the list, save the list in a service , and then when you want to use that list again, get it from the service. Something like:
service:
var services = angular.module('services');
services.factory('getListService',['$http',function($http){
var getListOfStuff = function(){
//call to database
return //your json
};
var extractNameAgeEtc = function(){
var myListOfStuff = //get list of stuff from $http or database
var myListOfNameAgeEtc = //make a list of tuples or {name,age,etc} objects
return myListOfNameAgeEtc;
};
return {
extractNameAgeEtc : extractNameAgeEtc
};
}]);
controllers:
angular.module('controllers',['services']);
var controllersModule = angular.module('controllers');
controllersModule.controller('tableRenderController',['getListService','$scope',function(getListService,$scope){
//use this with your table rendering template, probably with ng-repeat
$scope.MyTableValue = getListService.extractNameAgeEtc();
}]);
controllersModule.controller('dropdownRenderController',['getListService','$scope',function(getListService,$scope){
//use this with your dropdown rendering template, probably with ng-repeat
$scope.MyDropDownValue = getListService.extractNameAgeEtc();
}]);
I have a SFW embedded in a PHP page. There is also a div on the page with id="target".
I want to access the content of that div (ie: the characters inside it) and hold them as a String variable in AS3. How can I do this?
My attempt so far
import flash.external.ExternalInterface;
var myDivContent = ExternalInterface.call("function(){ return document.GetElementById('target');}");
var myDivContent2:String = myDivContent.toString();
test_vars.text = myDivContent2; //Dynamic text output
I don't think you can define a function in the ExternalInterface.call() method. You have to call a function by name which already exists in the JavaScript.
So I'd create some JavaScript code like this:
function getTargetContent()
{
return document.getElementById('target').innerHTML;
}
And then in your Flash,
var myDivContent = ExternalInterface.call("getTargetContent");
Note that document.getElementById('target') only returns the reference to that div, not the contents within. So if you don't return .innerHTML then the Flash will get an object which may not be usable (although I haven't actually tried doing this).
The easiest way to do this is as Allan describes, write a Javascript function to sit on the page and return the required value to you.
Of course, if you can't edit the page content, only the flash, then you do need to pass the function itself, which will actually have to be forced into the page though JavaScript injection. An example for your case, which I have not tested:
//prepare the JavaSctipt as an XML object for Dom insertion
var injectCode:XML =
<script>
<![CDATA[
function() {
getElementContent = function(elementID) {
return document.getElementById(elementID).innerHTML;
}
}
]]>
</script>;
//inject code
ExternalInterface.call(injectCode);
//get contents of 'divA'
var divAContent:String = ExternalInterface.call('getElementContent','divA') as String;
//get contents of 'spanB'
var spanBContent:String = ExternalInterface.call('getElementContent','spanB') as String;
You're almost there :
var res : String = ExternalInterface.call("function(){return document.getElementById('target').outerHTML}");
If you only want the content of your target, use innerHTML instead of outerHTML.