Passing PHP Variables to JavaScript Console Error

  console, javascript, php, variables

I’m facing a bit of a roadblock in my script. I’ve been using the following code in my PHP to send variables into my Javascript files, for use with a price slider.

.php

                            <div class="border p-4 rounded mb-4">
                                <div class="mb-4">
                                    <h3 class="mb-3 h6 text-uppercase text-black d-block">Price</h3>
                                    <div id="slider-range" class="border-primary"></div>
                                    <input type="text" name="text" id="amount" data-path="/<?= $foo['uri']['path']['controller']; ?>/<?= $foo['uri']['path']['method']; ?>/<?= $foo['uri']['path'][0]; ?>/<?= $foo['uri']['path'][1]; ?><?php if ($foo['uri']['path']['controller'] != 'store'): ?>/<?= $foo['uri']['path'][2]; ?>/<?= $foo['uri']['path'][3]; ?><?php endif; ?>" data-floor="<?= floor($first['min_sale_price'] / 5) * 5; ?>" data-ceil="<?= ceil($first['max_sale_price'] / 5) * 5; ?>" data-query="?<?php if (isset($foo['uri']['query']['term'][0])): ?>term=<?= urlencode($foo['uri']['query']['term'][0]); ?>&<?php endif; ?>view=<?= $foo['uri']['query']['view'][0]; ?>&sort=<?= $foo['uri']['query']['sort'][0]; ?>&show=<?= $foo['uri']['query']['show'][0]; ?>" class="form-control border-0 pl-0 bg-white" disabled="" />
                                </div>
                            </div>

.js

    const sp = document.querySelector('#amount');
    var siteSliderRange = function() {
        $("#slider-range").slider({
            range: true,
            min: 0,
            max: sp.dataset.ceil,
            values: [ sp.dataset.floor , sp.dataset.ceil ],
            slide: function(event, ui) {
                $("#amount").val("£" + ui.values[0] + " - £" + ui.values[1]);
            },
            change: function( event, ui ) {}
        });
        $( "#slider-range" ).on( "slidechange", function( event, ui ) {
            window.location.href = sp.dataset.path + "/" + ui.values[0] + "/" + ui.values[1] + sp.dataset.query;
        } );
        $("#amount").val("£" + $("#slider-range").slider("values", 0) +
            " - £" + $("#slider-range").slider("values", 1));
    };
    siteSliderRange();

It works great, except the silder code doesn’t appear on my homepage and I get the following error:

Uncaught TypeError: Cannot read property 'dataset' of null at HTMLDocument.<anonymous>

I and if statement around the function, and it worked great… except Webpack removes it again.

I’ve considered implementing the variables directly into the Javascript file (as this would work for every scenario) – but I can’t seem to get the syntax right…

I’ve tried to define the following variations, followed by a console.log to check the value, and I’m getting the following:

var ceil = <?= ceil($first['max_sale_price'] / 5) * 5; ?> // Uncaught SyntaxError: Unexpected token '<'
var ceil = <?php echo ceil($first['max_sale_price'] / 5) * 5; ?> // Uncaught SyntaxError: Unexpected token '<'
var ceil = "<?= ceil($first['max_sale_price'] / 5) * 5; ?>" // Prints: <?= ceil($first['max_sale_price'] / 5) * 5; ?>

How can I do this? The PHP variable is definitely a number, not a string.

Source: Ask PHP

LEAVE A COMMENT