3

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

julian
  • 4,634
  • 10
  • 42
  • 59

3 Answers3

6

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.

Behnam Esmaili
  • 5,835
  • 6
  • 32
  • 63
3

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]);
}
Community
  • 1
  • 1
Anton
  • 32,245
  • 5
  • 44
  • 54
  • Great! and yes the files are on my server of course. but is it possible to loop them with jQuery? – julian Dec 21 '12 at 12:30
  • I don't think so, you'll need to use ASP.net or PHP. If you are using ASP.net i could show you how to do it – Anton Dec 21 '12 at 12:33
  • the url cannot accept folders..so the success function is not called. – julian Dec 21 '12 at 15:02
0
  • 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

Community
  • 1
  • 1