Question

I was trying to make hidden div which shows on when .txt file is found.
I want the div to show the content of the .txt file.

Is that possible?

I have tried to make it by using jQuery but without success.

Idea is simple: div box with constant dimensions which shows content of .txt file which is in same folder on server, but when there isn’t any .txt file div becomes hidden (for example in jQuery $("p").hide();).

Answer 1

This depends on the usage, but say you have your div for the text, you can make that invisible by setting it to display:none in css.
Now you can either try getting the file with an ajax call, or you can use a ajax head call to check if the file exists on the server.
Just getting the file is faster if it exists, as a head call only checks if it’s there, and another ajax call would be neccessary to get the content of the file, however a head call is faster it it does not exist as it does’nt get the content of the file.

EDIT: but since the file does not exists, there is nothing to get, so a head call is probably not needed here as a “get” would be faster in both situations, but the example still shows how to check if a file exists on the server, and then do something if it does or does not exist.

It would look like something like this.

$.ajax({
    url:'http://www.mysite.com/myfile.txt',
    type:'HEAD',
    error: function()
    {
        //file does not exists, no need to do anything
    },
    success: function()
    {
        //file exists get the file and put in the textcontainer and make that visible
        $.ajax({
           url:'http://www.mysite.com/myfile.txt',
           success: function(data)
              {
                 $("#textcontainer").show().text(data);
              }

    }
 });

Or the other way around with the textcontainer visible with display:block etc :

$.ajax({
    url:'http://www.mysite.com/myfile.txt',
    type:'GET',
    error: function()
    {
        //file does not exists, hide the textcontainer
        $("#textcontainer").hide();
    },
    success: function(data)
    {
        //file exists get the file and put in the textcontainer that is already visible
         $("#textcontainer").text(data);
    }
 });