Don't display a button while file exists on server

Question

I'm trying to display a download button on an HTML page only when a specific file on the web server is deleted. I thought I'd use a CSS display: none; then a PHP script with a while loop that'd look like this :

while (file_exists("/aaa/file.txt")) {
      sleep(5);
    }
//set display property of the invisibleLink class to block and continue

The thing is I don't know how to do this last step and every thread I've seen about modifying CSS with PHP doesn't work with my use case.

Answer 1

PHP executes before anything is displayed on the screen, so you are probably not going to be able to do that: the code would simply sleep for 5 and then continue with generating the rest of the html before displaying to the user.

What you might want to do instead is mark the button as display: none and then when the page is done loading have a js function that calls a php page that returns whether the file exists or not. Have the js function loop until the php page says the file is gone, then have the js function display the button and stop looping.

<button type="button" id="test_btn" style="display: none;">Download</button>

<script type="text/javascript">
    $(document).ready(function () {
        checkFile();

        function checkFile() {
            $.ajax({
                url: '/path/to/file_checker.php',
                type: 'GET',
                success: function (data) {
                    if (data === "deleted") { // or whatever you want the response to be
                        $('#test_btn').show();
                    }
                    else {
                        checkFile(); // you can add a setTimeout if you don't want this running too often
                    }
                }
            });
        }
    }
</script>

Then your file checker php can be something similar to what you had:

if (file_exists("/aaa/file.txt")) {
    echo "exists";
}
else {
    echo "deleted";
}