I want to return data with json from a php-script. The data is containing html tags but when I try to use the data as html I can see the "tags".
HTML-tags will be displayed as: <h1>hello</h1>
and not:
hello
I am using the <core-ajax>
tag in Polymer
<core-ajax id="ajax" auto url="php/directory_json.php" on-core-response="{{docsLoaded}}" handleAs="json"></core-ajax>
Javascript
var template = document.querySelector('template[is="auto-binding"]');
var docs = []
template.docsLoaded = function() {
this.docs = this.$.ajax.response.slice(0);
}
HTML
<template repeat="{{doc in docs}}"><div>{{doc.content}}</div></template>
PHP
$my_html = array(array('uid'=>'0', 'content'=>'<h1>hello</h1>'));
echo json_encode($my_html);
Any help would be appreciated
Edit: It seems like you can't just put out a variable with html-code. You need to apply it in the element with innerHTML()
($.html()
with jquery).
Now I have stumbled upon another problem, I can't target my element with its ID, it says "undefined".
HTML
<template repeat="{{doc in docs}}">
<div id="div-content-"{{doc.uid}}></div>
{{myfunction(doc.uid, doc.content)}}
</template>
JavaScript
myfunction = function(id, content){
$('#div-content-'+id).html(content);
}
It seems like the element isn't "applied" to the html until the whole loop is completed? Any idea on how to achieve this?