CODEWITHSUNDEEP
jquery-uinewlinejquery-ui-tabs
Arnaud Leymet
Arnaud Leymet

Reputation: 6132

jQuery UI tabs loading text files don't preserve newlines

The following code loads a txt file content in a new tab. But it doesn't preserve newlines even though the content is inside a <pre> tag:

multiline.html:

<!DOCTYPE html>
<html>
<head>
<script src="js/jquery-1.4.1.min.js"></script>
<script src="js/jquery-ui-1.8.15.custom.min.js"></script>
<link rel="stylesheet" href="js/ui-lightness/jquery-ui-1.8.15.custom.css" type="text/css"></link>
<style>
pre {
  border: 1px red solid !important;
}
</style>
<script>
$(document).ready(function() {
  $("#tabs").tabs({panelTemplate: '<pre></pre>'});
});
</script>
</head>
<body>
  <h3>PRE TAG:</h3>
  <pre>
  Multi
  line
  FTW
  </pre>
  <h3>jQueryUI-loaded PRE TAG:</h3>
  <div id="tabs">
    <ul>
      <li><a href="multiline.txt">Tab</a></li>
    </ul>
  </div>
</body>
</html>

multiline.txt:

I'm line #1
And I'm line #2
Guess what! I'm #3

And woohoo I'm #4 but I wanted to be alone!

As an alternative, I tried to create a jsfiddle, with no success since the browser will yell at me with cross-origin loading error.

Upvotes: 0

Views: 721

Answers (3)

Arnaud Leymet
Arnaud Leymet

Reputation: 6132

As per jQueryUI ticket #7669, it can't be done with the tabs widget.

Remote tabs expect to load HTML, not plaintext.

Upvotes: 0

Steve Wellens
Steve Wellens

Reputation: 20640

You could try wrapping the text with a pre tag:

http://www.w3schools.com/tags/tag_pre.asp

Upvotes: 1

streetlogics
streetlogics

Reputation: 4730

Remember, HTML parsing ignores line breaks. If you want it to render with the line breaks, you need to add <br /> tags.

I am line #1 <br />
I am line #2 <br />
I am line #3 <br />

EDIT: Since you don't have access to the source, you can do something like this (using "content" ID as placeholder for actual container DIV id, replace with your own.):

$("#content").html( $("#content").html().replace("\n","<br />") );

Upvotes: 0

Related Questions