Load Contents From Text File using jQuery

Sibeesh Venu

Querycss in jqueryjQuery styleoad Text File using jQuery

25 Comments

Join the conversation! Your thoughts help the community grow.

Sibeesh Venu11y ago
Debasis Saha Thank you
Debasis Saha11y ago
Good One..
Sibeesh Venu11y ago
Gowtham K Thank you
Sibeesh Venu11y ago
Rakesh Chavda Thank you
Sibeesh Venu11y ago
Upendra Pratap Shahi Thank you
Gowtham K11y ago
Good one thanks for sharing
Rakesh11y ago
Good one
Upendra Pratap Shahi11y ago
Good one Sibeesh Venu Sir
Gowtham Rajamanickam11y ago
keep writing
- Sibeesh Venu11y ago
  Sure mate
Gowtham Rajamanickam11y ago
good
- Sibeesh Venu11y ago
  Thanks buddy
Karthik Muthu Karuppan11y ago
good one
Rahul Kumar Saxena11y ago
Good Show bro...
- Sibeesh Venu11y ago
  Rahul Saxena Thank you bro.
Sibeesh Venu11y ago
Nitin Tyagi Thank you
Nitin11y ago
Good one
Sibeesh Venu11y ago
Shubham kumar thank you buddy.
Shubham Kumar11y ago
Nice one
Santhakumar Munuswamy11y ago
Good one
- Sibeesh Venu11y ago
  Santhakumar Munuswamy Thank you
Krishnanand Sivaraj11y ago
Thanks for sharing
- Sibeesh Venu11y ago
  Krishnanand Sivaraj Thank you
Sam Hobbs11y ago
Would it work to store the data as a XML file and then generate the HTML using something such as an Extensible Stylesheet Language (XSL)? Or you could store the data as a tab-delimited file. Alternatively, perhaps you could store your links as a HTML file that you load into an iframe.
- Sibeesh Venu11y ago
  Yeah It can be as you said. But my need was very simple. I just wanted to save my href tags somewhere so that I can save my rework of creating html UI elements in every page. Thank you

Introduction

Hi all, this article explains how to load the contents from a text file using jQuery and style the contents.

Please see this article in my blog: Load Contents From Text File using jQuery

Background

I wanted to load same contents in various pages. For example the article links in my blog. The problem here is, I can't use a master page since I have not included ASP.Net in my hosting plan and the next problem is I have not included a database also. My blog is entirely based on normal HTML pages. So I thought of entering the href tags in a text file and loading those href tags in the pages accordingly.

That's all.

Create a text file

I have put some of my article links in a text file as shown below.

<a target="_blank" href="compress-xml-string-variables-in-client-side-and-export-in.html">
Compress XML, String, Variables in Client Side and Export in HTML5 Using jQuery
</a>myBreak
<a target="_blank" href="Infosys-Interview-Questions-For-DotNet-Professionals.html">
Infosys Interview Questions for Dot Net Professionals
</a>myBreak
<a target="_blank" href="Using-GitHub-Application-in-Windows.html">
Upload your Source Code to GitHub using GitHub Application in Windows
</a>myBreak
<a target="_blank" href="dot-net-interview-questions-for-experienced-and-fresher.html">
Interview Questions For Experienced and Beginner .NET Professionals
</a>myBreak
<a target="_blank" href="export-hierarchical-html-multi-level-html-with-styles.html">
Export Hierarchical (Multi-Level) HTML Table With Styles Using jQuery
</a>myBreak
<a target="_blank" href="how-to-make-your-website-loads-faster.html">
How to Make Your Website Load Faster
</a>myBreak
-----------------------
<a target="_blank" href="Convert-CellSet-to-HTML-table-And-From-HTML-To-Json-To-Array.html">
Convert CellSet to HTML Table and From HTML to JSON and to Array
</a>myBreak

Please note that I have used a separator in each href tag. That is “myBreak”. Please download the attachment, myContents, for more information.

Load a jQuery reference

<script src="jquery-2.1.3.min.js"></script>

You can get this file from the source code attached here.

Write the script

The following is the script block I have written for the requirements.

<script type="text/javascript">
$(document).ready(function () {
$.get('myContents.txt', function (data) {
var myHrefCollection = '<ul>';
var myData = data.split("myBreak");
for (i = 0; i < myData.length; i++) {
if (myData[i] != null || myData[i] != undefined)
myHrefCollection += '<li>' + myData[i] + '</li>';
}
myHrefCollection += '</ul>';
$('#container').html(myHrefCollection);
});
});
</script>

In the preceding script we are taking the contents from the text file using the get method of jQuery. And once the data is retrieved, we are splitting the data. To do that we are using a separator (myBreak) in our content.

Add CSS

Add the following CSS styles.

<style>
a {
display: block;
margin: 0;
padding: 5px 10px 5px 20px;
color: #777777;
text-decoration: none;
border-bottom: 1px dotted #666666;
background: url("orange_file.gif") no-repeat 10px center #F9F9F9;
outline: none;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
margin: 0 0 3px 0;
padding: 0;
display: list-item;
text-align: -webkit-match-parent;
}
#container {
display: block;
width: 700px;
padding: 25px;
background-color: #F9F9F9;
margin-bottom: 30px;
}
</style>

Output

Conclusion

Please download the source code for more details. I hope you liked this article. Now please share your thoughts and suggestions. It matters a lot.

Kindest Regards,

Sibeesh Venu

www.sibeeshpassion.com