0

I have some JavaScript code in webpage.php. Part of the JS code is generated by PHP. I want to move the JS to a different file, jscode.js. How can I move the PHP-generated JS code out of webpage.php in such a way that webpage.php still dynamically loads JS code, according to variables declared in webpage.php?

Part of webpage.php looks like this:

<?PHP $height = $_POST['height'];
// more code
var height = <?PHP echo $height; ?>;

I want it out of the document where $height is declared. How do I do this?

Improve this question
1
  • You can just define var height in the jscode.js, and execute height= 1111; in the php. Just need to make sure the main function started after the height is set, e.g. call some init() function in php after height = .. Commented Feb 27, 2014 at 9:21

4 Answers 4

Reset to default
4

Say the height relates to a div tag. Have php echo the height on the div like this:

<div id="whatever" data-height="<?php echo $height; ?>"></div>

Then access it in javascript like this:

var height = parseInt(document.getElementById("whatever").getAttribute("data-height"), 10);

Include the script tag to this at the end of your page, to ensure that the div (or whichever) element exists when the JS code is executed.

This is the least obtrusive way of doing it, and it doesn't rely on height being a global variable.

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

2 Comments

no, this is bad because not compatible with html standards, see W3C rules for more information.
Not sure about that @Loïc. Please provide reference? Here is the W3 section on HTML5 custom data attributes if that was what you thought was invalid? Note, "Every HTML element may have any number of custom data attributes specified, with any value."
1

If your webpage.php contains your document <head> you could do

<script type="text/javascript">
    var height = "<?php echo $height; ?>";
</script>
<script type="text/javascript" src="jscode.js"></script>

Then if you include you jscode.js script after that the height variable will be in scope

Improve this answer

3 Comments

I accepted your answer before testing, I shouldn't have done that. I'm getting error: height is not defined in code.js, despite having this in the header of webpage.php: <script type="text/javascript"> var height = <?PHP echo $heigth; ?> ; </script> <script src="code.js" type="text/javascript"></script> What could be the reason?
Try putting quotes in - var height = "<?php echo $height; ?>";
@user3324865 Cool, sorry about that. I've updated the code in my answer
0

Just pass dynamicaly generated values to functions defined in .js file.

//jscode.js
function doStuff(x, y){
    //stuff
}

//page.php
<scrpit>
    doStuff(<?PHP echo $x; ?>, <?PHP echo $y; ?>);
</script>
Improve this answer

Comments

0

You could use basic templating.

In your js file put your source, and where you need a php variable, call it a special way, like : [php:MyVar]

Then in your php, you can put all templates vars in an array.

$templateVars = array('[php:MyVar]'=>'value', '[php:MyVar2]'=>'value2');

load your file :

$js = file_get_contents("js_file.js");

and replace it's content :

$js = str_replace(array_keys($template_vars), array_values($template_vars), $js);

to finally print it :

echo "<script>$js</script>";
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.