0

i am trying to show a turtle file on a very simple homepage i made.

<p class="lead" id="testbed-meta"> 
    <script>
    $.ajax({
            cache: false,
            type: "GET",
            async: false,
            url: "/native/api/resources/turtle",
            success: function(data,status){ 
            document.getElementById("testbed-meta").innerHTML = data;       
            },
            error: function(xhl,status){
            document.getElementById("testbed-meta").innerHTML = "Error";
            },
            statusCode:{                
                201: function(){
                alert("Error");
                }
            }
        });

    </script>

HTML don't understand that it's turtle and makes it to one long String without line brakes and also deletes some parts. Maybe because there are some "<" and ">" that are not escaped.

Is there a nice way to show a ttl file via html and maybe javascript?

EDIT: By the way, i forgot to say that i get something like this in the answer:

@prefix omn-federation: <http://open-multinet.info/ontology/omn-federation#> .

But HTML don't show the "http:/....." part. Only:

@prefix omn-federation: .

Maybe because of the "<" and ">" ?!

Bhargav Rao
  • 50,140
  • 28
  • 121
  • 140
Error 404
  • 105
  • 2
  • 10

2 Answers2

0

try with a pre tag instead of p tag:

<pre class="lead" id="testbed-meta"></pre>

The HTML Preformatted Text (<pre>) represents preformatted text. Text within this element is typically displayed in a non-proportional font exactly as it is laid out in the file. Whitespaces inside this element are displayed as typed.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre

<pre class="lead" id="testbed-meta"> </pre>
<script>
$.ajax({
        cache: false,
        type: "GET",
        async: false,
        url: "/native/api/resources/turtle",
        success: function(data,status){ 
             document.getElementById("testbed-meta").innerHTML = data.replace(/<br\s*\/?>/gi, '\n').replace(/</g, '&lt;'); 


        },
        error: function(xhl,status){
        document.getElementById("testbed-meta").innerHTML = "Error";
        },
        statusCode:{                
            201: function(){
            alert("Error");
            }
        }
    });
</script>

See this small snippets:

data = '<br/> \@prefix omn-federation: <open-multinet.info/ontology/omn-federation#>; . <br/> \@prefix rdf: <w3.org/1999/02/22-rdf-syntax-ns#>; . <br/>'
document.getElementById("testbed-meta").innerHTML = data.replace(/<br\s*\/?>/gi, '\n').replace(/</g, '&lt;'); 
<pre id="testbed-meta"></pre>
ben
  • 3,558
  • 1
  • 15
  • 28
  • Thx ben for the Info, but it didn't work. The text is just a little bit bigger. Still no line brakes. Can i provide you any additional Infos to find the problem? – Error 404 Jul 01 '15 at 10:57
  • I edited my first poste, maybe it's because of the tags? – Error 404 Jul 01 '15 at 11:07
  • Can you copy the data you are receiving ? `
    ` should do the trick for the new lines (basically if your data contains  `\n` or `\r`).
For the `<`, you need to replace them. Either using jquery `.text` or with plain JS `.replace(/
     – ben Jul 01 '15 at 14:20
  • First lines of data i receive looks like this:
    \@prefix omn-federation: .
    \@prefix rdf: .
    I used the .text and then then the .replace Method, but now i have "
    " tags in my text and still no line brakes. With 
     by the way
     – Error 404 Jul 02 '15 at 12:49
  • Oh! So you have `
    ` which should not be escaped and other tags which should be... See my edited answer     – ben Jul 02 '15 at 14:01
0

Try this in your success callback:

$("#testbed-meta").text(data);

jQuery's text() method escapes all HTML for you.

Additionally, if you'd like to get new lines in your HTML, you need to replace all new line characters to HTML's <br> tag:

$("#testbed-meta").text(data).replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, "$1<br>$2");
Robo Robok
  • 21,132
  • 17
  • 68
  • 126
  • I get an Error if i use your method: [TypeError: "#testbed-meta".text is not a function]. my Script now looks like this: success: function(data,status){ ("#testbed-meta").text(data); }, – Error 404 Jul 02 '15 at 12:02
  • That's strange, because you are using jQuery in your example and `.text()` is built-in jQuery method. – Robo Robok Jul 02 '15 at 12:05
  • Sry, i forgot the $ . Now its showing something. My Fault. Will now try to implement the line brakes – Error 404 Jul 02 '15 at 12:08
  • I used your second Code-Line but i get again the "TypeError: .text...replace is not a function" so i wrote it like this: var newData = data.replace(...); $("#testbed-meta").text(newData); But now i have "
    " standing in my text but still no line brakes, although i have used 
     instead of
    – Error 404 Jul 02 '15 at 12:52