找到文件后如何显示隐藏的div？

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

As far as I know this is not possible. You can do an ajax call to a php-page which will check if the file exist on the server and returns something, but directly loading/checking using jQuery is in violation of browser security so they should not allow you to do that.

Answer 2

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);
    }
 });

Answer 3

According to http://api.jquery.com/jQuery.get/ you can handle errors:

If a request with jQuery.get() returns an error code, it will fail silently unless the script has also called the global .ajaxError() method.

Please also see http://api.jquery.com/jQuery.ajax/#jqXHR

An example from that page:

// Assign handlers immediately after making the request,
// and remember the jqxhr object for this request
var jqxhr = $.ajax({ url: "example.php" })
    .success(function() { alert("success"); })
    .error(function() { alert("error"); })
    .complete(function() { alert("complete"); });

// perform other work here ...

// Set another completion function for the request above
jqxhr.complete(function(){ alert("second complete"); });