CODEWITHSUNDEEP
ajaxjquery
julian
julian

Reputation: 4714

jquery - load all text files and display them

I have been using jQuery pretty long time, but I never learned AJAX, so here I come..

we have this code :

$('body').load('hello.txt');

Simple enough, now let's say I have multiple text files (I don't know their names) I want to load,
Can I do that ? Maybe I need to loop all the text files and load them somehow ?

Thanks in Advance

Upvotes: 3

Views: 15066

Answers (3)

user257319
user257319

Reputation:

  • Run FTP list command (there are various ways to do so, Web-Sockets is one..)
  • A simpler, more common ans secure-solution is a server-side listing of the files, and "cooking" the HTML (meaning- embedding the file-listing within it),

*you can use raw HTML or put it in var statement to be used by JavaScript (for example).

 

see following answer:

https://stackoverflow.com/a/30949072/257319

Upvotes: 0

Behnam Esmaili
Behnam Esmaili

Reputation: 5967

Assuming you have text files in the server in a specific location you can do this:

HTML markup:

 <div id="fileList">
       here list of files will be loaded so that user can select which one to load
 <div>

 <div id="file-content">
       content of selected file will be loaded here
 <div>

JQuery part :

 $.ajax({
      url : "FileServer/GetFileNames", // this is just a url that is responsible to return files list 
      success : function(data){
          //here a JSON data including filenames expected 
          $.each(data,function(i,item){
                var $fileHolder = $("<div></div>");
                $fileHolder.attr("filename",item.filename).click(function(){
                      $("#file-content").load($(this).attr("filename"));
                }).html(item.filename).appendTo("#fileList");  
          });
      }
 });

JSON Structure expected 

   [
      {
          filename : "text1.txt"
      },
      {
          filename : "text2.txt"
      },
      {
          filename : "text3.txt"
      } 
   ]

implementing file listing in the server side is up to you.

Upvotes: 6

Anton
Anton

Reputation: 32581

Javascript does not have access to the local file system for obvious security reasons. This is not possible.

Unless you are trying to loop through files on your server, in which case you wouldn't want to use jQuery anyway but something like ASP.NET or PHP or whatever framework you are using.

Foreach file in directory jQuery

UPDATE

Try this out 

var files;
$.ajax({
    url: "http://homepage/folder",
    success: function (txt) {
        files = txt.split('<A href="');
    }
});
var fList = new Array();
$(files).each(function () {
    if (this.indexOf('.txt') > -1) {
        fList.push(this);
    }
});
for (i = 0; i < fList.length; i++) {
    fList[i] = fList[i].split('">')[0];
    fList[i] = fList[i].replace('"');
}

for (i = 0; i < fList.length; i++) {
    $('#idLoadHere').load(fList[i]);
}

Upvotes: 3

Related Questions