1

I have a PHP file on my server which is counting the number of files in a directory. I would like to get the number of files ($fileCount) in my Javascript file.

numberOfImages.php:

<?php
$dir = "/my/directory/";
$fi = new FilesystemIterator($dir, FilesystemIterator::SKIP_DOTS);
$fileCount = iterator_count($fi);
echo $fileCount; 

?>

main.js (EXTERNAL JS FILE) I don't have any code to do with my php file in my JS file yet. I would like to get the variable from my PHP file(http://www.website/numberOfImages.php) and use it (alert it) in my external JS file.

I'm willing to use AJAX.

Improve this question
4

2 Answers 2

Reset to default
0

You may adopt one of 2 Possibilities... Option Nr. 1: You can expose the Number of Images as a Global Variable & Use it in your main.js (that is Assuming that main.js was included in the numberOfImages.php Script. Option Nr. 2 You can use Ajax to do that too:

OPTION NR. 1

    <?php 
        //FILE =>numberOfImages.php:

        $dir = "/my/directory/";
        $fi = new FilesystemIterator($dir, FilesystemIterator::SKIP_DOTS);
        $fileCount = iterator_count($fi);

        // EXPOSE THIS VARIABLE TO JAVASCRIPT AS A GLOBAL VARIABLE..
        //echo $fileCount; 

    ?>
        // SOMEWHERE IN THE SAME FILE: numberOfImages.php:
        <script type="text/javascript">
            var _NUM_IMAGES = "<?php echo $fileCount; ?>"; 
        </script>

Now, you can access the Number of Images in the main.js by simply referencing the variable _NUM_IMAGES. So doing alert(__NUM_IMAGES) would work. However, be Sure that the main.js is included in the numberOfImages.php File

OPTION NR 2

    // INSIDE YOUR HTML/PHP FILE THAT RUNS THE SHOW; IMPORT BOTH JQUERY & YOUR main.js BELOW. 
    // INCLUDE JQUERY LIBRARY: OTHERWISE THIS WON'T WORK...
    // SURE YOU CAN ALSO DO ALL THESE IN PURE JAVASCRIPT, BUT WHY RE-INVENT THE WHEEL???
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
    <script type="text/javascript" src="main.js"></script>

        //YOUR main.js COULD LOOK SOMETHING LIKE THIS:::
        jQuery.noConflict();
        (function ($) {
            $(document).ready(function(e) {
                $.ajax({
                    url: 'numberOfImages.php',     // <== POINTS TO THE VALID URL OF THE PHP FILE THAT OUTPUTS THE NUMBER OF IMAGES...
                    dataType: "HTML",
                    cache: false,
                    type: "POST",

                    //HANDLE THE SUCCESS CASE FOR THE AJAX CALL
                    success: function (data, textStatus, jqXHR) {
                        if(data){
                            alert(data);
                        }
                    },

                    //HANDLE THE FAILURE CASE FOR THE AJAX CALL
                    error: function (jqXHR, textStatus, errorThrown) {
                        console.log('The following error occured: ' + textStatus, errorThrown);
                    },

                    //HANDLE THE EVENT-COMPLETE CASE FOR THE AJAX CALL
                    complete: function (jqXHR, textStatus) {
                    }
                });
            });
        })(jQuery);

And the numberOfImages.php could look something like this. Exactly the same way you did it:

        <?php

            /**
             * filename: numberOfImages.php
             */

            $dir        = "/my/directory/";
            $fi         = new FilesystemIterator($dir, FilesystemIterator::SKIP_DOTS);
            $fileCount  = iterator_count($fi);

            die($fileCount);

However, be informed that You need JQuery for this to work. You can add this to the File in which you are importing the main.js but before you import the main.js.

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

My JS file is an external file.
OK... But is it in any way connected with numberOfImages.php? I mean are you using it in that PHP File?
No, it is not connected in any way.
Then Ajax is what you need... because Option Nr. 1 won't work in that case ...
Yes, can you please edit your answer accordingly. Thanks you :)
|
0

if your other javascript isn't from an external source you can do something like:

<?php
$dir = "/my/directory/";
$fi = new FilesystemIterator($dir, FilesystemIterator::SKIP_DOTS);
$fileCount = iterator_count($fi);
?> 



<script type="text/javascript">var fileCount = "<?= $fileCount?>";</script>

<script type="text/javascript" src="main.js"></script>

    and then in the main.js use FileCount like so:

    alert("fileCount: " + fileCount);
Improve this answer

1 Comment

My JS file is from an external source

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.