Static content doesn's load via document.getElementById().innerHTML


(DenisD) #1

(edited). We would like to add static infosection on top of each page. We would like to have 0 (or close to 0) Ember code as we dont have any Ember dev skills available. the way we would like to keep static content - as a raw topic to read the “raw” like http://community.yoch.tv/raw/14
then load it via admin/customize/css_htm
Our Top html is

<div id="topBar"> <button class="ui primary button" onclick="load_section()"> Click to open infosection </button> </div>
<div id ="infosection" > </div>

JS

<script>
      function load_section(){
            document.getElementById("infosection").innerHTML='<object type="text/html" data="http://community.yoch.tv/raw/14" ></object>';
  }
</script>

the result - the HTML is escaped into text.

the link to model code and custom style -
http://community.yoch.tv/?preview-style=6b5adc7a-7bc9-4d22-9453-b909259709ac

Please advise if JS methods like setting document.getElementById.innerHTML are supported in html customizations and how.

Many thanks in advance


(David Taylor) #2

I think this should be

<object type="text/html"

(DenisD) #3

Thank you very much!, it brings us close, although it is rendered as text document with some DS decoration. Again - thanks.


(David Taylor) #4

I’m not sure an embed tag is going to work for this use-case.

To achieve what you’re after, you could use some simple jQuery. Replace your javascript above with:

<script>
      function load_section(){
            $.get("http://community.yoch.tv/raw/14", function(data){
                $('#infosection').html(data);
            });
      }
</script>

This really isn’t a tidy solution though, you probably want to add more checks and error handling.


(DenisD) #5

Thank you very much, it worked and suits our needs.
It is not clear however why pure JS solution doesnt work and why the HTML content is being wrapped into

 tag.

BUT again, thank you so much.


(David Taylor) #6

I’m not 100% sure, but I think the reason the <object> embed doesn’t work is that the URL http://community.yoch.tv/raw/14 returns a header with Content-Type:text/plain; charset=utf-8, and so the browser renders it as plain text instead of HTML.

Glad to help :slight_smile: