Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Javascript read text after file loaded into div

Posted on 2009-12-25
9
Medium Priority
?
934 Views
Last Modified: 2012-08-13
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.
0
Comment
Question by:garyhesse
9 Comments
 
LVL 16

Expert Comment

by:anoyes
ID: 26123505
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
 

Author Comment

by:garyhesse
ID: 26123620
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
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 26123871
what is 'new_s' variable in line 4 returning?

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

see
http://jquery.bassistance.de/api-browser/#appendContent
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 83

Expert Comment

by:leakim971
ID: 26124243
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
 

Author Comment

by:garyhesse
ID: 26124578
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
 
LVL 83

Expert Comment

by:leakim971
ID: 26124678
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
 
LVL 83

Accepted Solution

by:
leakim971 earned 1000 total points
ID: 26124685
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
 

Author Closing Comment

by:garyhesse
ID: 31669962
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
 
LVL 83

Expert Comment

by:leakim971
ID: 26124967
Thanks for the points and your full resolution! Merry Christmas!
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses
Course of the Month14 days, 13 hours left to enroll

577 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question