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?

Answer 1

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.