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.
garyhesseAsked:
Who is Participating?
 
leakim971PluritechnicianCommented:
Full example :
<!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" />
<title>JQuery and slip</title>
<script type="text/javascript" src="jquery.js"></script>
<script language="javascript">
	$(document).ready(function(){
		$("#divs").load("new_s.txt",null,function() {
			$("#stitle").text($("#divs").text().split('|')[0]);
			$("#speaker").text($("#divs").text().split('|')[2]);
		});
	});
</script>
</head>
<body>
<div id="divs"></div>
<p id="stitle" class="stitle"></p>
<p id="speaker" class='speaker'></p>
</body>
</html>

Open in new window

0
 
anoyesCommented:
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?
0
 
garyhesseAuthor Commented:
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

0
Cloud Class® Course: CompTIA Healthcare IT Tech

This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.

 
Gurvinder Pal SinghCommented:
what is 'new_s' variable in line 4 returning?

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

see
http://jquery.bassistance.de/api-browser/#appendContent
0
 
leakim971PluritechnicianCommented:
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

0
 
garyhesseAuthor Commented:
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?
0
 
leakim971PluritechnicianCommented:
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

0
 
garyhesseAuthor Commented:
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);
    }
});
0
 
leakim971PluritechnicianCommented:
Thanks for the points and your full resolution! Merry Christmas!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.