asked on

Javascript read text after file loaded into div

I want to read the contents of a text file, split it with a pipe character, then display parts of the array in a couple of paragraphs on the page.

What I've done:
1. Load the file contents into a div
$("#stmp").load("/assets/new_s.txt");
This part works. The content of the text file is of the format Title|Reference|Author

I want to display the Title in one paragraph (<p class="stitle"></p>) and the Author in another (<p class="speaker"></p>.
I tried this:

var new_s = $("#stmp").text();

and tried writing this to the paragraph:

$("p.stitle").text(new_s);

and also simply tried writing new_s with document.write(). Neither displays any content.

Of course, I'll need to use split() at some point, but it seems the problem I need to resolve lies elsewhere.

anoyes

What type of element is stmp? Textbox? Div? I assume it's hidden? If you unhide it, do the contents of the text file load up into it?

garyhesse

ASKER

stmp is a div. It will be hidden, but it's unhidden during the dev process to confirm that the text file is successfully loading (and it is).
Code is attached.

<script type="text/javascript">
...
$("#stmp").load("/assets/new_s.txt");
var new_s = $("#stmp").text();
$("p.message").text(new_s);
...
</script>
<body>
...
<div class="messagetitle">
    <h2>Upcoming Message</h2>
    <p class="stitle"></p><p class='speaker'></p>
</div>
<div id="stmp"></div>

Open in new window

Gurvinder Pal Singh

what is 'new_s' variable in line 4 returning?

try $("p.message").append(new_s);

see
http://jquery.bassistance.de/api-browser/#appendContent

leakim971

Hello garyhesse,

The following work for me :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.js"></script>
<script language="javascript">
	$(document).ready(function(){
		$("#divs").load("/assets/new_s.txt");
	});
</script>
</head>
<body>
<div id="divs"></div>
</body>
</html>

Open in new window

garyhesse

ASKER

gurvinder372: new_s is not returning anything. That's where the problem is. So append works no better than text().
leakim971: Loading the text initially works fine. That's really not my question.

All: Let me restate the problem more clearly (I hope). How can I load the contents of a text file into a string variable? Once I store the text in a variable I can split it and rewrite it to the page where I want to.

Does that help?

leakim971

You need to use the callback argument from load JQuery function : http://docs.jquery.com/Ajax/load

<script language="javascript">
	$(document).ready(function(){
		$("#divs").load("new_s.txt",null,function() {
			alert($("#divs").text().split('|')[0]);
			alert($("#divs").text().split('|')[1]);
			alert($("#divs").text().split('|')[2]);
		});
	});
</script>

Open in new window

ASKER CERTIFIED SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

garyhesse

ASKER

The callback worked perfectly! Thank you.

I've also come up with an alternative solution that doesn't require writing the source file into a hidden div first. This uses AJAX with a callback:

$.ajax({
url: "new_s.txt",
cache: false,
success: function(html){
var new_s = html.split("|");
      var scr = new_s[1] + " | " + new_s[2];
      $("p.stitle").text(new_s[0]);
      $("p.speaker").text(scr);
}
});

leakim971

Thanks for the points and your full resolution! Merry Christmas!