Trying to run php code within a Javascript (.js) file - php

Question

First off I am very new to php so bear with me. I have a javascript (.js) file from a wordpress template that reads the key from var googledockey. In order to change it I have to manually open the .js file and change that variable. What I would like to do is have the .js file grab the key from where it was saved on a page I made. Here is the code for the admin page that has the textfield for me to enter in a key.
<?php
if($_POST['gdocs2wp_hidden'] == 'Y') {
//Form data sent
$gdkey = $_POST['gdocs2wp_gdkey'];
update_option('gdocs2wp_gdkey', $gdkey);
?>
<div class="updated"><p><strong><?php _e('Options saved.' ); ?></strong></p></div>
<?php
} else {
//Normal page display
$gdkey = get_option('gdocs2wp_gdkey');
}
?>
The key saves and whenver I open the page they key shows up so I know this half is working. This is where I am stumped. Within my .js file which is in a subdirectory of the admin page, the var googledockey is where I have had to manually save the key which works everytime. I have tried <?php echo $gdkey; ?> and get_option('gdocs2wp_gdkey'); to try and get the key but I havent had any luck. Can php work within a .js file? Does anyone have any insight to help me along? Thanks
var jqueryNoConflict = jQuery;
//var googledockey = <?php echo $gdkey; ?>
var googledockey = "INSERTmyKEYhere";
// begin main function
jqueryNoConflict(document).ready(function(){
initializeTabletopObject(googledockey);
});

Answer 1

You could always have the JS run an Ajax call to get the data. Alternatively, you could move the variable declaration to the PHP/HTML file where you include the JS, and just add
<script type='text/javascript'>
var googledockey="<?echo $gdkey;?>"
</script>

Answer 2

1. Register your script
Create a JavaScript file, place it in your theme folder, and register it with WordPress.
wp_register_script(
'google-docs',
get_bloginfo('template_directory') . '/scripts/google-docs.js'
);
Documentation: http://codex.wordpress.org/Function_Reference/wp_register_script
2. Enqueue your script
Whenever your script is needed in a template, you enqueue the file.
wp_enqueue_script(
'google-docs'
);
Documentation: http://codex.wordpress.org/Function_Reference/wp_enqueue_script
3. Localize your script
This allows you to make PHP variables available in your JavaScript.
wp_localize_script(
'google-docs',
'google_docs_vars',
array(
'key' => $google_doc_key
)
);
Documentation: http://codex.wordpress.org/Function_Reference/wp_localize_script
4. Use variable in your script
Now you have access to the variable in your script.
var google_docs_key = google_docs_vars.key;
That's it. I think this would solve your problem and it's also the proper way to do it.

Answer 3

JS files are not generally parsed for PHP. The easiest (albeit not the prettiest) way to do this is probably to either:
1) Echo the value in a hidden DOM element in the page template itself, and then use JS to grab that element and set the variable (so, put the value inside a hidden element on the page, or as an attribute or something, then grab that value using JS and assign it to your variable).
2) Similar to above, just put the variable declaration in an inline script (<script>code</script>) because that WILL get parsed for PHP - see Seriyia's answer.
3) Use simple AJAX calls which are really easy with jQuery and let you pass data from JS to a PHP function somewhere else like functions.php and then back to the JS. This might be more trouble than it's worth though if you aren't familiar with AJAX.

Answer 4

This is quite simple
You are recently using this code snipet
var jqueryNoConflict = jQuery;
//var googledockey = <?php echo $gdkey; ?>
var googledockey = "INSERTmyKEYhere";
// begin main function
jqueryNoConflict(document).ready(function(){
initializeTabletopObject(googledockey);
});
Where you need to Replace this with following code
var jqueryNoConflict = jQuery;
var googledockey = "<?php echo $gdkey; ?>"
var googledockey = "INSERTmyKEYhere";
// begin main function
jqueryNoConflict(document).ready(function(){
initializeTabletopObject(googledockey);
});