0

I want to display the data from xml to html via jquery

I have the data in xml in paragraph format, but becuase of html's default behaviour it cannot display the lines which are in form of "enter".

please suggest how can i make sure that it'll start displaying.

my query is very similar to this link which is already done here.

but i don't know how to do it in html/javascript

Read xml string into textbox with newline

Thanks in advance
Dave

Community
  • 1
  • 1
dave
  • 1,669
  • 5
  • 24
  • 32

2 Answers2

2

If you're inserting indented XML code, you can use the white-space: pre CSS property on the container to display the line breaks:

<p style="white-space: pre" id="xmlCode"></p>

And in jQuery just set the text:

$('#xmlCode').text(xmlContent);
Klemen Slavič
  • 19,661
  • 3
  • 34
  • 43
  • Sorry, should have been `white-space: pre`; I fixed the answer. – Klemen Slavič Dec 10 '10 at 07:21
  • Thank Krof, it's working but it's not taking the "Enter" which is there in xml. it's continuing into the one line only – dave Dec 13 '10 at 07:08
  • Unless you're going to manually break lines, there's no way you can have automatic line breaking with `pre` white space. What you can do is set `overflow-x: auto; overflow-y: hidden` on the `p` element to show horizontal scrollbars whenever the lines overflow the width. – Klemen Slavič Dec 13 '10 at 07:11
  • What's the ASCII code for the "Enter" character? Sounds like you're not using `\n` or `\r\n`. – Klemen Slavič Dec 13 '10 at 07:12
  • it's straight forward displaying \r\n in page – dave Dec 13 '10 at 09:27
  • The code above should work if the `xmlContent` variable contains the correct whitespace. If you view the XML content in Notepad or similar, does it show the line breaks correctly? – Klemen Slavič Dec 13 '10 at 09:32
  • Maybe this will help: [jQuery text() call preserves newlines in Firefox but not in IE](http://stackoverflow.com/questions/656605/jquery-text-call-preserves-newlines-in-firefox-but-not-in-ie) – Klemen Slavič Dec 13 '10 at 10:33
0

I just inserted the iwantenter into the xml file whereever I need enter

and after assigning the text to the div

I called this function

id_of_my_div.replace(/iwantenter/g,'< br > < br >'); and it worked

Thanks Krof for continues replies.

dave
  • 1,669
  • 5
  • 24
  • 32