Get PHP variable in Javascript file

Question

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.

Are you looking for ajax syntax : http://www.w3schools.com/jquery/ajax_ajax.asp — Niklesh Raut, May 14 '16 at 10:05
don't know what is your question.you should follow a tutorial. — Madhawa Priyashantha, May 14 '16 at 10:07
Refer this : http://stackoverflow.com/questions/19515723/access-php-variable-into-external-javascript-file — GBnewbie, May 14 '16 at 10:07
Possible duplicate of [Access PHP var from external javascript file](http://stackoverflow.com/questions/2928827/access-php-var-from-external-javascript-file) — tschale, May 14 '16 at 13:34

score 0 · Answer 1 · answered May 14 '16 at 10:11

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

My JS file is from an external source – May 14 '16 at 10:14 — , May 14 '16 at 10:14

Poiz · Accepted Answer · 2016-05-14T10:46:54.257

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.

OK... But is it in any way connected with numberOfImages.php? I mean are you using it in that PHP File? — Poiz, May 14 '16 at 10:21
Then Ajax is what you need... because ***Option Nr. 1 won't work in that case*** ... — Poiz, May 14 '16 at 10:23
Yes, can you please edit your answer accordingly. Thanks you :) — , May 14 '16 at 10:24
@Han I already did... and there is now the 2nd Option... hope it does what you want... :-) Cheers... — Poiz, May 14 '16 at 10:39
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/111928/discussion-between-han-and-poiz). — , May 14 '16 at 13:09

Get PHP variable in Javascript file

2 Answers2