CODEWITHSUNDEEP
phpjavascriptundefined
Zach Wulf
Zach Wulf

Reputation: 433

Javascript value undefined when passing from PHP

UPDATE: Thank you everyone who helped out. I hope the myriad of solutions on here can serve as a reference for anyone who is facing similar difficulties.

I am reading from a text file with PHP and I need to pass the string into JS for manipulation. I tried the more direct way of placing the PHP into my external JS file, but that didn't work so I'm resorting to using an empty div container. However, in JS I'm still getting an undefined value. The file reads correctly into the div value, it just won't pass to my external javascript file.

HTML:

<?php
    $world = file_get_contents('http://url.com/testworld.txt');
    //echo $world;
?>

<html>

    <head>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script type="text/javascript" src="js/game.js"></script>
    </head>

    <body onload="init()">
        <canvas id="game" width="650" height="366" style="border: 2px solid black;"></canvas>
        <br />
        <h1> Currently in development.</h1>
        <br />
        <div id="world" value="<?php echo $world; ?>" />
    </body>

</html>

And the JS:

var world = document.getElementById('world').value;

document.write(world);

If there is a way to make just pulling the variable from the PHP in an external javascript file work, I would prefer to do that.

Upvotes: 0

Views: 7072

Answers (7)

MrTrick
MrTrick

Reputation: 1957

It's quite easy to pass data from PHP -> JS without resorting to hiding it inside the DOM. The trick is the json_encode() function - it will convert php strings, array, etc into a valid javascript format. See your example below, fixed up:

<?php
    $world = file_get_contents('http://url.com/testworld.txt');
?>
<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="js/game.js"></script>
</head>
<body onload="init()">
    <script type="text/javascript">
        //World is defined here, and accessible to the javascript that runs on the page
        var world = <?=json_encode($world)?>;
    </script>
    <canvas id="game" width="650" height="366" style="border: 2px solid black;"></canvas>
    <br />
    <h1> Currently in development.</h1>
    <br />
</body>

I'm pretty sure your troubles are occurring because of the way that scoping of variables works in javascript. This simple example must work for you:

<?php
    $foo = "\"Hello world!\"";
?>
<html>
<head>
</head>
<body>
    <script type="text/javascript">
        var foo = <?=json_encode($foo)?>;
        alert("The value of foo is: " + foo);
    </script>
</body>
</html>

So in the context of the inline script, the foo variable is present. Perhaps if your code were to look like:

<script type="text/javascript">
    //Load the game world, and pass to the javascript lib
    var world = <?=json_encode($world)?>;
    loadWorld(world);
</script>

then you wouldn't have to worry about scoping so much?

Upvotes: 1

Rukmi Patel
Rukmi Patel

Reputation: 2561

Rather than specifying value in div tag, you should specify that value in hidden input field.this is a better approach like this 

<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="js/game.js"></script>
</head>

<body onload="init()">
    <canvas id="game" width="650" height="366" style="border: 2px solid black;"></canvas>
    <br />
    <h1> Currently in development.</h1>
    <br />
    <input type="hidden" name="world" id="world" value="<?php echo $world;?>"/>         
</body>

</html>

you should also specify form tag too. by specifying form tag, you can have more ways to access element using javascript.

if you want to use div then it should be like this ..

<div id="world"><?php echo $world;?></div>

in js you can access $world by this code ..

var world = document.getElementById('world').innerHTML;

Upvotes: 0

jfbarrois
jfbarrois

Reputation: 989

Another way : In your php

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

In your JS:

$('#world').attr('data-world');

Also you may want to make sure the value of $world is properly escaped for being used as an html attribute

Upvotes: 1

Wyatt
Wyatt

Reputation: 1366

value has a special meaning on DOM Elements (it refers to the value of textboxes, etc.). Instead, you might use an HTML5 Data Attribute such as data-value, and then examine it using document.getElementById('world').getAttribute('data-value');.

However, a better approach would be to use a hidden input, such as

<input type="hidden" id="world" value="<?php echo $world; ?>" />

and then leave your script as is.

Upvotes: 1

Lucas
Lucas

Reputation: 10646

Try changing:

<div id="world" value="<?php echo $world; ?>" />

to:

<div id="world"><?php echo $world; ?></div>

and change:

getElementById('world').value;

to:

getElementById('world').innerHTML;

If you need to you can add a style of display: none; to the div to hide it.

Upvotes: 0

Tudor Constantin
Tudor Constantin

Reputation: 26861

I am not sure about this, but it might be that the 2 $world variables to be in different scopes. Try with:

<html>

    <head>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script type="text/javascript" src="js/game.js"></script>
    </head>

    <body onload="init()">
        <canvas id="game" width="650" height="366" style="border: 2px solid black;"></canvas>
        <br />
        <h1> Currently in development.</h1>
        <br />
        <div id="world" value="<?php echo file_get_contents('http://url.com/testworld.txt'); ?>" />
    </body>

</html>

and see if it works

Upvotes: 0

Ankur
Ankur

Reputation: 33637

It doesn't make sense to have a value attribute to a div. Instead of a div use a hidden textarea element and put file content inside that using something like:

<textarea id="fileContent" style="display:none"><?php echo $world; ?></textarea>

and then in JS:

document.getElementById('fileContent').value;

Will return the text area content

Upvotes: 0

Related Questions