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

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);

});

The PHP parser isn't going to parse the JS file unless it is configured to do that. You could do a script tag, though, and set the src of the tag to a PHP URI. Then, PHP could manipulate the JS before the browser uses it. — Doug Dawson
– Doug Dawson, Commented Jun 13, 2013 at 16:17
Otherwise you could add the following in your .htaccess file if you are using Apache: AddType application/x-httpd-php .js — dkroy
– dkroy, Commented Jun 13, 2013 at 16:20
I did try adding that into the .htaccess file but nothing changed. — Pacobart
– Pacobart, Commented Jun 13, 2013 at 17:04

Seiyria · Accepted Answer · 2013-06-13 16:18:24Z

2

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>

answered Jun 13, 2013 at 16:18

Seiyria

2,1323 gold badges25 silver badges52 bronze badges

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

Comments

NightHawk · Accepted Answer · 2013-06-13 16:30:30Z

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.

Ennui · Accepted Answer · 2013-06-13 17:44:43Z

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.

Mudasir Nazir · Accepted Answer · 2013-06-13 16:29:07Z

-1

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);

});

answered Jun 13, 2013 at 16:29

Mudasir Nazir

595 bronze badges

2 Comments

Pacobart Over a year ago

I have tried it using the <?php echo $gdkey; ?> and it did not work. All I need to do is add the " " around it?

Mudasir Nazir Over a year ago

yes of course. because the way you was doing this, it was not converted into string. Where my method will echo and convert this into string.

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

1 Comment

Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

2 Comments

Related