How can you put PHP inside a Javascript?

Question

I am retrieving a Facebook Page Like count via a PHP function like this:

<?php
function fbLikeCount($id,$appid,$appsecret){
$json_url ='https://graph.facebook.com/'.$id.'?access_token='.$appid.'|'.$appsecret.'&fields=likes';
$json = file_get_contents($json_url);
$json_output = json_decode($json);
if($json_output->likes){
    return $likes = $json_output->likes;
}else{
    return 0;
}
}
?>

Then, I am able to echo this out no problem like this:

<?php
echo number_format(fbLikeCount('companynamegoeshere','XXXXXXXXXXXX','XXXXXXXXXXX'));
?>

But, I am using a JavaScript function to do this animation for where teh number is displayed on the page, like this:

<script>
$({someValue: 0}).animate({someValue: 450700}, {
duration: 3000,
easing: 'swing',
step: function () {
   $('#facebookCount').text(commaSeparateNumber(Math.round(this.someValue)));
},
complete:function(){
      $('#facebookCount').text(commaSeparateNumber(Math.round(this.someValue)));
  }
});
</script>

Where that 450700 is in the JS code is where I need to put the PHP echo'ed number. Is it even possible to put a PHP echo (if I make it a variable first?) into the JS.

I've tried many, many things and hitting a brick wall. Any help is greatly appreciated.

thanks!

Yes it is possible to echo a php value and use it in javascript, what have you tried? — sheeldotme
– sheeldotme, Commented May 15, 2016 at 1:44
I've been trying different solutions for hours now (including all on this page), but either get a 0 or a NaN instead of the number which prints out regularly with PHP — gamehendgeVA
– gamehendgeVA, Commented May 15, 2016 at 2:37
You've marked gavgrif's answer as correct, did it work for you? — sheeldotme
– sheeldotme, Commented May 15, 2016 at 2:51
Yes, his recommendation for the parseInt, along with the hidden div and getting the inside with text() worked. thanks! — gamehendgeVA
– gamehendgeVA, Commented May 15, 2016 at 3:06
This question is similar to: How to incorporate a PHP-generated value into JavaScript code on the page?. If you believe it’s different, please edit the question, make it clear how it’s different and/or how the answers on that question are not helpful for your problem. — dumbass
– dumbass, Commented Jul 28, 2024 at 13:35

Jeremy Jackson · Accepted Answer · 2016-05-15 01:45:40Z

3

You can put PHP tags inside of the javascript if the javascript is in the php file. But honestly, you'd be better off creating an element that is hidden, echoing the data you need in that, and then just using javascript to get the value/innerHTML of that element.

answered May 15, 2016 at 1:45

Jeremy Jackson

2,25718 silver badges24 bronze badges

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

5 Comments

gamehendgeVA Over a year ago

wow, this is interesting, I've tried so much and read through every article I could find, but nothing is working... this approach sounds good though, when you say "hidden element" do you mean a display none div, can you help with any code? I'll keep trying, thanks!

Jeremy Jackson Over a year ago

Yeah, exactly. You got it! Just give it an id so that you can use document.getElemenyById('myHiddenElement'), or since you seem to be using jQuery $('#myHiddenElement'). It's all just javascript :)

gamehendgeVA Over a year ago

I tried this hidden div: <div style="display:none;"> <div id="test"><?php echo number_format(fbLikeCount('ccc','xxx','xxx')); ?></div> </div> and with this modification, but just getting 0 and not the real number that I get when just a php echo: <script> var myInnerHtml = $("#test").innerHTML; $({someValue: 0}).animate({someValue: myInnerHtml}, {

Jeremy Jackson Over a year ago

You may need to use $("#test").text() instead with jQuery. Oh, you should also wrap your javascript something like this $( document ).ready(function() {console.log( "ready!" );});

gamehendgeVA Over a year ago

Thanks for helping!! I finally got it, had to use parseInt and rid of the number_format part... thanks again!

gavgrif · Accepted Answer · 2016-05-15 02:03:51Z

0

To modify @Pedro Lobito's answer - you echo the value inside the js as follows:

<?php
$number = "1234";
?>
<script>
$({someValue: 0}).animate({someValue: <?php echo"$number";?>}, {
duration: 3000,
...

or alternatively:

    <?php
    $number = "1234";
    ?>


    <script>
    var testValue = <?php echo"$number";?>;
    $({someValue: 0}).animate({someValue: testValue}, {
    duration: 3000,
    ...

or even

<input type="hidden" name="testInput" value="<?php echo"$number";?>" />

        <script>
        var testValue = $('[name=testInput]').val();
        $({someValue: 0}).animate({someValue: testValue}, {
        duration: 3000,
        ...

or a hidden div / span - but move the display:none to the external CSS sheet

<span style="display:none"  id="testSpan"><?php echo"$number";?></span>

        <script>
        var testValue = $('#testSpan').text();
        $({someValue: 0}).animate({someValue: testValue}, {
        duration: 3000,
        ...

edited May 15, 2016 at 2:03

answered May 15, 2016 at 1:55

gavgrif

15.5k2 gold badges30 silver badges31 bronze badges

7 Comments

gamehendgeVA Over a year ago

I would think this would work, but it's not, I'm getting NaN with this

<div style="display:none;" id="test"><?php echo number_format(fbLikeCount('xxx','xxx','xxx')); ?></div> <script> var myInnerHtml = $("#test").text; $({someValue: 0}).animate({someValue: myInnerHtml}, {

gavgrif Over a year ago

ok - two things - you need () after .text and you need to parse the text as a number - try this: var myInnerHtml = parseInt($("#test").text());

gamehendgeVA Over a year ago

I tried, but still getting the NaN. I think it's with this -- here, I got rid of the display none so see it printed out literally on the screen, not converted to a number first: <div id="test"><?php echo "number_format(fbLikeCount('ccc','xxx','xxx'))"; ?></div> So, how can I make that innner text be the printed out number with php? I tried putting that parseInt up there too, but no luck...

gavgrif Over a year ago

no idea - sorry - i am guessing that "fbLikeCount('ccc','xxx','xxx')" does not give you an actual number - have you exhoed that out to see what it is giving you?

gamehendgeVA Over a year ago

I got it!! I finally got the echo in the (now) hidden div to be the number, my quotes may have been off, then the parseInt was needed to, but I found the number_format was leading to it just returning the first 3 numbers, so I took that out, and this is working:

<div id="test" style="display:none;"><?php echo fbLikeCount('ccc','xxx','xxx'); ?></div> <script> var fbCount = parseInt($("#test").text()); $({someValue: 0}).animate({someValue: fbCount}, {

|

Pedro Lobito · Accepted Answer · 2016-05-15 02:02:15Z

0

You can add php code inside JavaScript, if the JavaScript code is on a php page, but I prefer using the heredoc syntax, i.e.:

somefile.php

<?php
$number = "1234";
echo <<< LOB
<script>
$({someValue: 0}).animate({someValue: {$number}, {
duration: 3000,
easing: 'swing',
step: function () {
   $('#facebookCount').text(commaSeparateNumber(Math.round(this.someValue)));
},
complete:function(){
      $('#facebookCount').text(commaSeparateNumber(Math.round(this.someValue)));
  }
});
</script>
LOB;
?>

edited May 15, 2016 at 2:02

answered May 15, 2016 at 1:47

Pedro Lobito

99.8k36 gold badges274 silver badges278 bronze badges

2 Comments

gamehendgeVA Over a year ago

thanks, but that gave me an "unexpected =" PHP error, and this does not work either:

<?php $number = "echo number_format(fbLikeCount('abc','xxxxxxxxxxxx','xxxxxxxxxx'));"; ?>  <script> $({someValue: 0}).animate({someValue: <?php $number; ?>}, {

gamehendgeVA Over a year ago

still not working. Note that if I replace $number = "echo number_format(fbLikeCount('ccc','xxx','xxx'));" with just $number = "555";` then it works fine. It's like the PHP is not turning the number_format(fbLikeCount code into a number first before putting it into the JS function, if that makes any sense. In my testing, I either get 0, or NaN (not a number I believe)

Collectives™ on Stack Overflow

How can you put PHP inside a Javascript?

3 Answers 3

5 Comments

7 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

7 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related