how to add a php inside a javascript

Question

need some help on thi script

(function($) {
    var oldHide = $.fn.popover.Constructor.prototype.hide;

    $.fn.popover.Constructor.prototype.hide = function() {
        if (this.options.trigger === "hover" && this.tip().is(":hover")) {
            var that = this;
            // try again after what would have been the delay
            setTimeout(function() {
                return that.hide.call(that, arguments);
            }, that.options.delay.hide);
            return;
        }
        oldHide.call(this, arguments);
    };
})(jQuery);

$(document).ready(function () {
    $('#example').popover({
        html: true,
        trigger: 'hover',
        container: '#example',
        placement: 'bottom',
        content: function () {
            return '<div class="box">here is some content</div>';
        },
        animation: false,
        delay: {
            hide: 1500
        }
    }).on({
        show: function () {
            console.log("shown");
        },
        hide: function () {
            console.log("hidden");
        }
    });
});

this is a bootstrap popover and all I want is to add a php script inside

<div class=box><?php php_here(); ?></div>

because I need to output a wordpress script which is

<?php wp_nav_menu(); ?>

is this possible?

Answer 1

Yes, it is possible:

content: function () {
     return '<div class="box">'<?php wp_nav_menu(); ?>'</div>';
}

Answer 2

I'm not sure if it's the best way to do this.. but you can move your javascript code into your php file (make a <script> tag) like:

<script type="text/javascript">
(function($) {
    var oldHide = $.fn.popover.Constructor.prototype.hide;

    $.fn.popover.Constructor.prototype.hide = function() {
        if (this.options.trigger === "hover" && this.tip().is(":hover")) {
            var that = this;
            // try again after what would have been the delay
            setTimeout(function() {
                return that.hide.call(that, arguments);
            }, that.options.delay.hide);
            return;
        }
        oldHide.call(this, arguments);
    };
})(jQuery);

$(document).ready(function () {
    $('#example').popover({
        html: true,
        trigger: 'hover',
        container: '#example',
        placement: 'bottom',
        content: function () {
            return '<div class="box"><?php wp_nav_menu(); ?></div>';
        },
        animation: false,
        delay: {
            hide: 1500
        }
    }).on({
        show: function () {
            console.log("shown");
        },
        hide: function () {
            console.log("hidden");
        }
    });
});
</script>

since php is server-side and javascript is client-side php will output what you wan't inside your javascript code, hope it helps!

Answer 3

As long as the file you try to write php in is a .php file or the server handles it like one, you can write php in it.
If this is a .js file, you might have to make it a .php file for the server to handle it correctly. But other than that, it should work as you want it to (there are ways to make the server handle javascript files as php files, but it might not be the best idea and its a bit more work than just renaming the js file).
If you change it to a .php file, you will want to send content-type headers with the type of application/javascript for the client to handle it correct.

Example:

test.php

<?php header('Content-Type: application/javascript'); ?>
alert('This is a .php file with javascript in it!');

index.html

<script src="test.php"></script>
//Should show an alert with "This is a .php file with javascript in it!" when opening index.html 

edit: added example

Answer 4

Is this your expected one ?

content: function () {
     var wp_nav_menu ="<?php wp_nav_menu(); ?>";
     return '<div class="box">'+wp_nav_menu+'</div>';
}