Pass HTML through JSON

This site is best viewed in a modern browser with JavaScript enabled.

Chris1904

Hi Fellas,

my problem is following that I have JSON strings which include HTML code, but if I print out those strings they don't interpret the HTML code, instead it is like it was in a <pre> tag. http://chris1904.webege.com/test2.html you can analyse my problem right there. How do I get to it to work so HTML is interpreted when using it in JSON strings?

Chris

Kevin2

"Google Chrome could not connect to chris1904.webege.com"

Chris1904

That's weird. It works on my end on chrome, mozilla, and safari.

landar

I can see it in Safari. Are you talking about the "Jane Parker" message?

Text: "<iframe width=\"420\" height=\"315\" src=\"//www.youtube.com/embed/NiXbRBS5Z58\" frameborder=\"0\" allowfullscreen></iframe>",

Chris1904

Exactly, I want this iframe to actually be produced and not just show up the code . Sorry for not articulating understandably

Padonak

this is Usher-Yeah )) but youtube doesn't let watching it from another site

Chris1904

Well, even then HTML is not interpreted and I was just wondering how I can get that fixed. I just used that video as an example

landar

Well, I am too new to this stuff to really say for sure but it seems like your "JSON" text is being interpreted as just that...text. You need to parse it perhaps for the browser to know you actually want an inline frame. How to do that? "eval(Text)" maybe?

Padonak

i would try looking for the answer in kendo documentation or ask kendo users

Tcobb

Try putting an empty DIV element in your HTML and then set its innerHTML property to that of the string.

007Julien

it's always possible to detect or remove the tags with something like this :


[COLOR=#0000ff]// to replace the text with something[/COLOR]
if (/<?\/[^>]+>/g.test(text)) {/* text= ... change the text */}
[COLOR=#0000ff]// to remove the tags [/COLOR]
text=text.replace(/<?\/[^>]+>/g,'');
if (!text) text="No text  to display !"

Gray1989

Your problem lies in this piece of code:

<script type="script/x-kendo-template" id="inboxItem">
    <h3 class="time">#: Time#</h3><h3>#: From #</h3>
    <h2>#: Subject#</h2>
    <p><div id="myAnchor">#: Text#</div></p>
</script>

Please see the documentation here.

You could make an easy fix for it by making the following change:

<script type="script/x-kendo-template" id="inboxItem">
    <h3 class="time">#: Time#</h3><h3>#: From #</h3>
    <h2>#: Subject#</h2>
    <p><div id="myAnchor">#= Text#</div></p>
</script>

But that would leave a possible XSS vulnerability open. I would suggest doing the following:

<script type="script/x-kendo-template" id="inboxItem">
    <h3 class="time">#: Time#</h3><h3>#: From #</h3>
    <h2>#: Subject#</h2>
    <p><div id="myAnchor">#: Text##= HTML#</div></p>
</script>

Then just add an HTML variable to your JSON object solely for rendering raw HTML data.

Had to do a little bit of research on this as I have absolutely no experience with this kendo framework. Hope it helps!