Using a php variable in a setTimeOut function in a mouseover in an html tag

Question

I have a php variable:

<?php
$imagename = $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile());
?>

This is created in a loop. This loop displays some images.

When I hover over an image the onmouseover fires. This all goes okay.

The problem is:

onmouseover="myTimer=setTimeout('imageswitcher(<?php echo $imagename;?>)', 2000);"

The php doesn't work. Now I read something about ajax requests. But I have no idea what it is or how to use it. So I was hoping someone here could help me.

score 3 · Accepted Answer · edited May 23 '17 at 12:18

Firstly, you have a million and one problems here besides the PHP variable things. Firstly, you really shouldn't be using the onmouseover attribute anymore. Take a look at JavaScript & Events - Best Practice

So to replicate your problem with nicer code, you would do something like this.

<!-- This should be in an external JS file -->
<script>
    // IE Event Listener "Polyfill"
    var addEvent = function(element, event, callback) {
        if (document.addEventListener) {
            element.addEventListener(event, callback);
        } else {
            element.attachEvent('on' + event, callback);
        }
    };

    addEvent(document, 'load', function() {
        var element = document.getElementById('element');

        attachEvent(element, 'onmouseover', function() {
            myTimer = setTimeout('imageswitcher(<?php echo $imagename; ?>)', 2000);
        });
    }

</script>

<!-- Not an actual element, used for example purposes only -->
<element id="element"></element>

Variables should be assigned using 'var'

Your next problem is that your assigning myTimer without var. Now, it's not likely to be causing the issue here, it's good to keep it in mind.

var myTimer = setTimeout('imageswitcher(<?php echo $imagename; ?>)', 2000);

Function Strings

I don't know what your trying to do, but you're passing a string instead of a function to setTimeout. Let's fix that.

var myTimer = setTimeout(function() {
    imageswitcher(<?php echo $imagename; ?>);
}, 2000);

Addressing the issue

Now, let's address the actual issue here.

$imagename is probably a string, which you're not accounting for in your javascript. Let's fix that.

imageswitcher('<?php echo $imagename; ?>');

Putting it all together

<!-- This should be in an external JS file -->
<script>

    var addEvent = function(element, event, callback) {
        if (document.addEventListener) {
            element.addEventListener(event, callback);
        } else {
            element.attachEvent('on' + event, callback);
        }
    };

    addEvent(document, 'load', function() {
        var element = document.getElementById('element');

        attachEvent(element, 'onmouseover', function() {
            var myTimer = setTimeout(function() {
                imageswitcher('<?php echo $imagename; ?>');
            }, 2000);
        });
    };
</script>

<!-- Not an actual element, used for example purposes only -->
<element id="element"></element>

Many thanks. Your solution worked :) Thanks for the advice and for saving me some hours of trouble! — Wesley Smits, Oct 02 '12 at 15:37
This is very likely a typo, but `attachEvent(element, 'onmouseover'...` should attach `mouseover` instead of `onmouseover`. OP very understandably defines a global `myTimer` instead of a local `var`, as that definition happens inside an implicit event handler function and that `myTimer` variable would have been inaccessible from anywhere if it were a local in that function. — lanzz, Oct 02 '12 at 15:44

lanzz · Answer 2 · 2012-10-02T15:23:21.033

1

Embedding PHP values in Javascript code is most safely done with json_encode(), and since you're outputting in a HTML attribute, it would be wise to also put it through htmlspecialchars(); also, passing strings to setTimeout is discouraged practice, so you should pass an anonymous function there instead:

onmouseover="myTimer=setTimeout(function() { imageswitcher(<?php echo htmlspecialchars(json_encode($imagename));?>) }, 2000);"

edited Oct 02 '12 at 15:23

answered Oct 02 '12 at 15:16

lanzz

42,060
10
89
98

Hmm, this still doesn't do the trick :( I commented on Dutchie432's answer what the content of `$imagename` could be-> http://example.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/b/r/test.jpg Could this affect how i should do this? – Wesley Smits Oct 02 '12 at 15:26
No, it shouldn't. I have put up a [working example](http://test.dev.lanzz.org/json_encode/index.php), and you can see its [source code](http://test.dev.lanzz.org/json_encode/index.txt). – lanzz Oct 02 '12 at 15:37
NatIsGleek's solution worked. But i still want to thank you for taking the time to try and help me :) – Wesley Smits Oct 02 '12 at 15:38

Using a php variable in a setTimeOut function in a mouseover in an html tag

2 Answers2

Variables should be assigned using 'var'

Function Strings

Addressing the issue

Putting it all together