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?

How do you include the script via script tag or in the document itself? — Nouphal.M
– Nouphal.M, Commented Dec 22, 2013 at 8:35
I just want it to be like these <div class="box"><?php wp_nav_menu(); ?></div> that could output the list — Francis Alvin Tan
– Francis Alvin Tan, Commented Dec 22, 2013 at 8:37

Jite · Accepted Answer · 2013-12-22 09:24:52Z

1

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

edited Dec 22, 2013 at 9:24

answered Dec 22, 2013 at 8:47

Jite

5,8772 gold badges28 silver badges40 bronze badges

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

3 Comments

Jite Over a year ago

Then its likely that your server handles it like a js file and php will not be handled correctly :)

Jite Over a year ago

@FrancisAlvinTan Added a small example snippet showing how it works. Feel free to mark answer as correct if it gave you the information you needed!

Francis Alvin Tan Over a year ago

I just happen to make the changes the way you said it, but now when I add <?php wp_nav_menu(); ?> it shows blanks but when I add <?php echo 'hello'; ?> it appears, is this something to do with wordpress

Zaheer Ahmed · Accepted Answer · 2013-12-22 08:43:08Z

1

Yes, it is possible:

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

answered Dec 22, 2013 at 8:43

Zaheer Ahmed

28.7k12 gold badges77 silver badges113 bronze badges

Comments

Pezhvak · Accepted Answer · 2013-12-22 08:45:33Z

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!

Krish R · Accepted Answer · 2013-12-22 08:38:47Z

0

Is this your expected one ?

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

answered Dec 22, 2013 at 8:38

Krish R

22.7k7 gold badges54 silver badges60 bronze badges

3 Comments

Francis Alvin Tan Over a year ago

it does not output anything, it should show some lists I created in wordpress

Francis Alvin Tan Over a year ago

but that is what Im trying to achieve

Krish R Over a year ago

@Francis Alvin Tan, I have updated answer, can you check

Collectives™ on Stack Overflow

how to add a php inside a javascript

4 Answers 4

3 Comments

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related