How to include a php file with javascript

Question

I am trying to include javascript for my file index.php , the problem is the javascript is inside a php file extension charts.php and when I try to link the javascript to my index.php it dosent work, so how do I link charts.php to index.php?

I've tried

<script>
    <?php include_once "../assets/js/charts.php";?>
</script>

as well as

<script src="../assets/js/charts.php"></script>

both of which don't work.

sample charts.php

<!-- Gender stats of user -->
<script type=''>
var options = {
    chart: {
        height: 320,
        type: 'pie',
    }, 
    <?php echo "series: [$gender[0],$gender[1],$gender[2]],"?>
    labels: ['Male','Female','Not specify'],
    legend: {
        show: true,
        position: 'bottom',
        horizontalAlign: 'center',
        verticalAlign: 'middle',
        floating: false,
        fontSize: '14px',
        offsetX: 0,
        offsetY: 7
    },
    responsive: [{
        breakpoint: 600,
        options: {
            chart: {
                height: 240
            },
            legend: {
                show: false
            },
        }
    }]

}

var chart = new ApexCharts(
    document.querySelector("#gender-pie-user"),
    options
);

chart.render();
</script>

While charts.php has a php file extension, its mostly Javascript with a few php variables from my database. I should note that if I included the charts.js code directly inside index.php it works.

for example, this works:

// index.php
<script type=''>
var options = {
    chart: {
        height: 320,
        type: 'pie',
    }, 
    <?php echo "series: [$gender[0],$gender[1],$gender[2]],"?>
    labels: ['Male','Female','Not specify'],
    legend: {
        show: true,
        position: 'bottom',
        horizontalAlign: 'center',
        verticalAlign: 'middle',
        floating: false,
        fontSize: '14px',
        offsetX: 0,
        offsetY: 7
    },
    responsive: [{
        breakpoint: 600,
        options: {
            chart: {
                height: 240
            },
            legend: {
                show: false
            },
        }
    }]

}

var chart = new ApexCharts(
    document.querySelector("#gender-pie-user"),
    options
);

chart.render();
</script>

While this does not work:

// index.php
<script src='../assets/js/charts.php'></script>

Did you check what the browser console had to say, when you tried <script src='../assets/js/charts.php'></script> ...? I'm guessing it probably said there that the browser refused to execute this as script code, because the Content-Type header said text/html ... — C3roe
– C3roe, Commented Dec 22, 2021 at 12:50

Björn Büttner · Accepted Answer · 2021-12-22 12:22:19Z

2

<?php require __DIR__ . "/../assets/js/charts.php";?>

Is the one that should be working. Switch it to require to see if the path can be resolved at all. I would also advice to start it with __DIR__ - make the path absolute.

answered Dec 22, 2021 at 12:22

Björn Büttner

808 bronze badges

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

Comments

thephper · Accepted Answer · 2021-12-22 12:21:28Z

1

PHP does not output content as default. So when you do this:

<script>
    <?php include_once "../assets/js/charts.php";?>
</script>

you actually just includes the content from charts.php into memory, but never outputs it.

Something like this is more likely to work:

<script>
    <?php echo require("../assets/js/charts.php");?>
</script>

answered Dec 22, 2021 at 12:21

thephper

2,70028 silver badges23 bronze badges

3 Comments

thephper Over a year ago

And as Bjørn Büttner suggested try to prefix the relative path with __DIR__ to ensure that the path is resolved from the directory of the including file. E.g. require(__DIR__ . "/../assets/js/charts.php")

ADyson Over a year ago

Look at the contents of charts.php. your idea would put a script block inside a script block, which isn't going to work. and a .PHP file will still auto output anything which isn't within a <?php tag (because actually it's the webserver which outputs that non-php content, it never goes to PHP). Not quite sure how this answer managed any upvotes

Wagmi Over a year ago

@ADyson I took your advice and removed the script tags inside charts.php and it seems to work now.

herrstrietzel · Accepted Answer · 2021-12-22 16:47:38Z

An alternative approach would be to save your dynamic php data to a html data-attribute like this:

<?php
$gender_arr =[
    'male',
    'female',
    'not_specify'
];
?>
<div id="gender-pie-user" data-series='<?php echo json_encode($gender_arr);?>'></div>

Example output:

<div id="gender-pie-user" data-series='["male","female","not_specify"]'></div>

This way you could save your chart init script as a static js file:

    let genderPie = document.querySelector("#gender-pie-user");
    
    // render chart if #genderPie element exists
    if(genderPie){
    
        let genderPieSeries = genderPie.getAttribute('data-series');
        var options = {
            chart: {
                height: 320,
                type: 'pie',
            }, 
            //parse data attribute
            series: JSON.parse(genderPieSeries),
            labels: ['Male','Female','Not specify'],
            legend: {
                show: true,
                position: 'bottom',
                horizontalAlign: 'center',
                verticalAlign: 'middle',
                floating: false,
                fontSize: '14px',
                offsetX: 0,
                offsetY: 7
            },
            responsive: [{
                breakpoint: 600,
                options: {
                    chart: {
                        height: 240
                    },
                    legend: {
                        show: false
                    },
                }
            }]
        }
    
        var chart = new ApexCharts(
            genderPie,
            options
        );
    
        chart.render();
    }

This way you can easily reuse your initializing function for different chart data views and benefit from static js file caching.

Collectives™ on Stack Overflow

How to include a php file with javascript

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related