Output PHP record within Javascript CSS function

Question

I'm trying to create my own version of a carousel that changes the background image of a div when one div is clicked. Each one of those div's images will be defined through a PHP record that matches a variable. Below, you will find my idea. I was wondering how I would go about echoing a PHP record within the CSS changes. Thanks in advance!

I've tried defining a Javascript variable to output it, and it doesn't work. In addition to that, I've also tried just putting the PHP echo script in there.

    function myImage1() {
        $('#change').on('click', function() {
        var image="<?php echo $record['img'] ?>";
        document.write (message);
        $('#background').css('background-image', 'url(document.write (message))');})}

Barn on a Hill · Accepted Answer · 2019-10-14T03:13:32.557

0

If you're able to get the url into a JS string, you can modify the HTMLElement.style.backgroundImage property directly: https://www.w3schools.com/jsref/prop_style_backgroundimage.asp

$('#click').on('click', function()
{
    var bgNode = document.getElementById('background');
    if (bgNode)
    {
        // json_encode will return output wrapped in double quotes there.
        var imgString = <?php echo json_encode($record['img']) ?>;
        var urlString = "url('" + imgString + "')";

        bgNode.style.backgroundImage = urlString;
    }
});

edited Oct 14 '19 at 03:13

answered Oct 14 '19 at 01:19

Barn on a Hill

359
3
10

This doesn't really seem to solve the issue. I'm not sure how to get the PHP echo into a JS string. Any ideas? – Oct 14 '19 at 01:35
A quick google search found this question, which suggest you use "" as it will escape quotes : https://stackoverflow.com/questions/168214/pass-a-php-string-to-a-javascript-variable-and-escape-newlines – Barn on a Hill Oct 14 '19 at 02:01
I updated the answer to be a bit more complete. Something like that should work, depending on how record.img is actually stored – Barn on a Hill Oct 14 '19 at 02:05
Adding this still doesn't produce the result. When trying to activate the function, it doesn't work. $record['img'] is stored within a database, and is pulled specifically from a result that matches a certain ID. UPDATE: Adding a missing bracket some-what fixed the issue. Now it's displaying that URL on the background-image as "Null". Any ideas? – Oct 14 '19 at 02:16
If you pause execution in the browser after instantiating urlString, what's the value when you log urlString to the console? Confirming you get the correct string makes sure that your data access layer isn't the real culprit. – Barn on a Hill Oct 14 '19 at 02:18
Hm, are you sure that $record['img'] is actually being set correctly in your controller? That seems to be the last piece of the puzzle. – Barn on a Hill Oct 14 '19 at 02:38
Echoing $record['img'] shows a value. It's actually being used as a background for one of the divs. To make it a little easier, I broke $record['img'] down to just $img. I'm not really sure what else we can do. It just returns an error. – Oct 14 '19 at 02:42
As an update, I've changed the script to the following, and it's not outputting an error within the console: function myImage1() { var urlString = "url('" + "" + "')"; var bgNode = document.getElementById('background'); if (bgNode) { bgNode.style.backgroundImage = urlString; } } The error is: "Uncaught SyntaxError: Unexpected identifier 3listing.php?id=3:259 Uncaught ReferenceError: myImage1 is not defined at HTMLAnchorElement.onclick (listing.php?id=3:259)". If needed, I can upload this to pastebin so you can see it easier. – Oct 14 '19 at 02:45
Can you upload it to a pastebin? That would definitely make it easier. – Barn on a Hill Oct 14 '19 at 02:50
I can't see where image1 is being called, but it looks like it's not in scope for the onClick callback. You could probably just put the code to change the background directly inside the callback like so: https://pastebin.com/Te1JLdyr – Barn on a Hill Oct 14 '19 at 03:05
That's the answer! – Oct 14 '19 at 03:12

Output PHP record within Javascript CSS function

1 Answers1