Embed PHP script output in javascript file

Question

file1.php will echo the URL of the WordPress post featured image. I am trying to embed this URL in img tag in the file2.js file.

file1.php

<?php $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID), 'thumbnail' ); ?>
<?php echo $url ?>

file2.js

var mjvfiurl;
$.get("/wp-content/plugins/mjv_sample_plugin/file1.php", function(mjvdata) {
     mjvfiurl=mjvdata;
});

var fapDom = '<div id="fap-wrapper"><img src="'+mjvfiurl+'" alt="" /></div>';

$('body').append(fapDom);

But its not working. Source code rendered as below:

<img src="undefined" alt="">

Console error:

http://padals.com/baahubali-beginning/undefined 404 (Not Found)

Just to embed the PHP output in the javascript image tag. Exact answer is appreciated.

Possible duplicate of [How do I return the response from an asynchronous call?](http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Patrick Evans, Jun 05 '16 at 13:47
@Patrick - Sorry I don't think it a duplicate of what you have given. — JAMUNARANI S, Jun 05 '16 at 13:58
It is a duplicate because your problem is you are using an asynchronous method but are not waiting till it has finished before trying to use the data, which is covered in the linked duplicate — Patrick Evans, Jun 05 '16 at 17:18
Check the issues solved here http://stackoverflow.com/questions/3241422/include-php-inside-javascript-js-files — Jazeb Pervez Butt, Jun 05 '16 at 22:16

score 0 · Answer 1 · answered Jun 05 '16 at 14:11

Assuming you're using jQuery's $.get(), what you're looking for is:

$.get("/wp-content/plugins/mjv_sample_plugin/file1.php", function(mjvdata) {
     var mjvfiurl = mjvdata;
     var fapDom = '<div id="fap-wrapper"><img src="'+mjvfiurl+'" alt="" /></div>';
    $('body').append(fapDom);
});

Your problem is that since you're doing an asynchronous call, mjvfiurl might not be defined by the time you append to the body because the request sent out to get the URL hasn't finished yet.

When you make async calls, the rest of the JavaScript will execute.

I up voted @Patrick's comment because the accepted answer from that post goes into better detail the difference between synchronous and asynchronous programming as well as giving examples on how to solve your exact problem. — Superbus, Jun 05 '16 at 14:30

score 0 · Answer 2 · answered Jun 05 '16 at 22:22

<script type="text/javascript">
    phpVars = new Array();
    <?php foreach($vars as $var) {
        echo 'phpVars.push("' . $var . '");';
    };
    ?>
</script>
<script type="text/javascript" src="yourScriptThatUsesPHPVars.js"></script>

If you just need to pass variables from PHP to the javascript, you can have a tag in the php/html file using the javascript to begin with.

score 0 · Answer 3 · answered Jun 05 '16 at 22:27

If you're trying to call functions, then you can do this like this

<script type="text/javascript">
    functionOne(<?php echo implode(', ', $arrayWithVars); ?>);
    functionTwo(<?php echo $moreVars; ?>, <?php echo $evenMoreVars; ?>);
</script>
<script type="text/javascript" src="YourFunctions.js"></script>

Embed PHP script output in javascript file

3 Answers3