check if file exists, display according message, jQuery

Question

I need a global function that checks if a file exists. I need to reuse that function for several methods so I just want it to return true or false. I tried to make it asynchronous but I can't get it to work. This is the function:

  function checkIndex(){
      $.ajax({
          url:'upload/_3.fdt',
          type:'HEAD',
          async: false,
          error: function(){
                return false;   
          },
          success: function(){
                return true;
          }
      });
}

this is one the functions that calls the checkIndex()

$(function(){
    $(document).ready( function(){

        if(checkIndex() == false)
            $('#check').html('<td><img src="img/cross.gif" /></td><td>No index present</td>');
        else
            $('#check').html('<td><img src="img/check.gif" /></td><td>Index is present</td>');

    });
   });

How can I make this work?

similar stackoverflow question http://stackoverflow.com/questions/16553174/test-if-a-file-exists-with-javascript — Parag, Nov 06 '13 at 05:44

score 3 · Accepted Answer · answered Feb 14 '13 at 16:31

3

I'd return the deferred object from the ajax function, and just insert the html based on wether or not the ajax function failed or not :

function checkIndex(file){
    return $.ajax({
        url : file,
        type:'HEAD'
    });
}

$(function(){
    checkIndex('upload/_3.fdt').done(function() {
        $('#check').html('<td><img src="img/check.gif" /></td><td>Index is present</td>');
    }).fail(function() {
        $('#check').html('<td><img src="img/cross.gif" /></td><td>No index present</td>');     
    });
});

If you pass the filename to check to the function, it's very reusable as well.

answered Feb 14 '13 at 16:31

adeneo

312,895
29
395
388

Good answer, but it looks pretty similar to mine :P – jbabey Feb 14 '13 at 16:35
@jbabey - That's probably because you just changed yours to look exactly like mine ! – adeneo Feb 14 '13 at 16:36
The only thing I changed was `then` to `done`, which are exactly the same if you only pass one callback to `then`. – jbabey Feb 14 '13 at 16:39
@jbabey - If you say so, I don't really care. You posted a few seconds before me, and I don't really care about the points, so it does'nt really matter to me. – adeneo Feb 14 '13 at 16:42
works, but I can't do this 'upload/*.fdt' .. It works in koopajah's solution though.. – PogoMips Feb 14 '13 at 17:20
@PogoMips - The first example in koopajah should work like you expect it to, just be aware that async calls locks the browser, and is generally bad practice, but if that's what you're after, koopajah has the right answer. – adeneo Feb 14 '13 at 17:28
It's not about the method he used. I'd prefer your method since it's more reusable. I just can't figure out how I can work with wildcards in the filename ;) – PogoMips Feb 14 '13 at 17:31
What do you mean "wildcards", this only works with the exact filename, ajax (or anything like this really) does'nt work with, say 'upload/*.fdt' ?? – adeneo Feb 14 '13 at 17:38

score 0 · Answer 2 · answered Feb 14 '13 at 16:30

In general, if you find yourself using async: false, you're doing it wrong.

You can solve this problem by taking advantage of the fact that $.ajax returns a Deferred object which you can interact with like so:

function checkIndex(){
    return $.ajax({
        url:'upload/_3.fdt',
        type:'HEAD'
    });
}

checkIndex().done(function () {
    $('#check').html('<td><img src="img/check.gif" /></td><td>Index is present</td>');
}).fail(function () {
    $('#check').html('<td><img src="img/cross.gif" /></td><td>No index present</td>');
});

For more information, see the documentation on jQuery Deferred Objects.

check if file exists, display according message, jQuery

2 Answers2