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.
  1. <a target="_blank" href="compress-xml-string-variables-in-client-side-and-export-in.html">
  2. Compress XML, String, Variables in Client Side and Export in HTML5 Using jQuery
  3. </a>myBreak
  4. <a target="_blank" href="Infosys-Interview-Questions-For-DotNet-Professionals.html">
  5. Infosys Interview Questions for Dot Net Professionals
  6. </a>myBreak
  7. <a target="_blank" href="Using-GitHub-Application-in-Windows.html">
  8. Upload your Source Code to GitHub using GitHub Application in Windows
  9. </a>myBreak
  10. <a target="_blank" href="dot-net-interview-questions-for-experienced-and-fresher.html">
  11. Interview Questions For Experienced and Beginner .NET Professionals
  12. </a>myBreak
  13. <a target="_blank" href="export-hierarchical-html-multi-level-html-with-styles.html">
  14. Export Hierarchical (Multi-Level) HTML Table With Styles Using jQuery
  15. </a>myBreak
  16. <a target="_blank" href="how-to-make-your-website-loads-faster.html">
  17. How to Make Your Website Load Faster
  18. </a>myBreak
  19. -----------------------
  20. <a target="_blank" href="Convert-CellSet-to-HTML-table-And-From-HTML-To-Json-To-Array.html">
  21. Convert CellSet to HTML Table and From HTML to JSON and to Array
  22. </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

  1. <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.
  1. <script type="text/javascript">
  2. $(document).ready(function () {
  3. $.get('myContents.txt', function (data) {
  4. var myHrefCollection = '<ul>';
  5. var myData = data.split("myBreak");
  6. for (i = 0; i < myData.length; i++) {
  7. if (myData[i] != null || myData[i] != undefined)
  8. myHrefCollection += '<li>' + myData[i] + '</li>';
  9. }
  10. myHrefCollection += '</ul>';
  11. $('#container').html(myHrefCollection);
  12. });
  13. });
  14. </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.
  1. <style>
  2. a {
  3. display: block;
  4. margin: 0;
  5. padding: 5px 10px 5px 20px;
  6. color: #777777;
  7. text-decoration: none;
  8. border-bottom: 1px dotted #666666;
  9. background: url("orange_file.gif") no-repeat 10px center #F9F9F9;
  10. outline: none;
  11. }
  12. ul {
  13. margin: 0;
  14. padding: 0;
  15. list-style: none;
  16. }
  17. li {
  18. margin: 0 0 3px 0;
  19. padding: 0;
  20. display: list-item;
  21. text-align: -webkit-match-parent;
  22. }
  23. #container {
  24. display: block;
  25. width: 700px;
  26. padding: 25px;
  27. background-color: #F9F9F9;
  28. margin-bottom: 30px;
  29. }
  30. </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