1

I need to be able to insert some PHP into an external .js file. Is this possible? I have created a slider using basic slider and need to have the page titles as markers at the top of the slider.

This is the code the .js file uses to generate the markers currently. 

var slidenum    = key + 1, 
var marker = $('<li><a href="#">'+ slidenum +'</a></li>');

I need to replace '+ slidenum +' with the WordPress function 'get_title'. Can this be replaced with php?

Josh Pyzer
  • 65
  • 3
  • 9
  • You can't do it unless you tell your webserver to send those to PHP to be interpreted. There are alternatives. I see other answers already has those alternatives. – HungryCoder Oct 08 '12 at 10:59

5 Answers5

1

You can define JS variables in your php files, then use those variables in your external js.

for example, in one of your PHP files, you can add:

<script type="text/javascript">
// variable1 = number
variable1 = <?php echo $var1; ?>;
// variable2 = string
variable2 = "<?php echo $var2; ?>";
</script>

And for your question:

<script type="text/javascript">
slidenum = "<?php the_title(); ?>";
</script>

the_title() reference: http://codex.wordpress.org/Function_Reference/the_title

Update - The Loop:

<?php 
$slider_titles = array();
if ( have_posts() ) : while ( have_posts() ) : the_post(); 
  // your codes go here
  $slider_titles[] = get_the_title(); // adds the title to the array  
endwhile; endif;
?>

<script type="text/javascript">
slidenum = <?php echo json_encode($slider_titles); ?>;
</script>

When your loop is over then you add the javascript part

RRikesh
  • 14,112
  • 5
  • 49
  • 70
  • Note that if you're using a string and not a number/boolean you need to surround the PHP tags with either `'` or `"`'s. – h2ooooooo Oct 08 '12 at 11:00
  • Yes, that's a good point to node. It can be easily missed. I updated the answer. – RRikesh Oct 08 '12 at 11:13
  • 1
    There's another problem: If you want to pass quotes or doubleQuotes it won't work. To avoid this problems i write all Values to pass into one PHP-Array and define the var like this: var variables = ; – mineichen Oct 08 '12 at 11:18
  • OP wants to pass a post title, it's *relatively* safe to assume that he knows if quotes are present. `addslashes` can also be used if it is the case. – RRikesh Oct 08 '12 at 11:22
  • 1
    @rrikesh - `json_encode` and `addslashes` do pretty much the same thing here, but `json_encode` will do it better. In fact, `addslashes` is generally the wrong answer to any question; it doesn't escape everything that might need escaping in any context - if you value your code security/reliablility, you should never use `addslashes` for anything. – SDC Oct 08 '12 at 11:29
  • Thanks for the precision SDC. I Hope OP takes that into consideration. – RRikesh Oct 08 '12 at 11:37
  • Thanks for all the feedback guys. This method did work but when I put it inside a WP_Query it echos the first post title every time. So I have the first post printing 4 times as slide markers. Any body know of any reasons why this script wouldn't loop correctly in a WP_Query – Josh Pyzer Oct 08 '12 at 11:52
  • You shouldn't put it in your query. Use PHP to populate an array in the query then assign it to a JS variable after the loop is done. – RRikesh Oct 08 '12 at 11:55
  • Thanks for your help rrikesh but I am still having the same problem. Can you clarify you answer a bit further please. thanks – Josh Pyzer Oct 08 '12 at 12:26
  • Updated the answer. Slidenum variable will be an array. You can make a loop to display the slider. – RRikesh Oct 08 '12 at 12:34
  • That also worked but now I have all the values in each marker. Any further ideas? Thanks again for your help – Josh Pyzer Oct 08 '12 at 13:35
  • The problem was the for loop in the .js file wasn't working. had to add [key] to slidenum in the .js file. Thanks a lot for your help though – Josh Pyzer Oct 09 '12 at 09:43
1

Some people are trying to tell you to use Ajax for this. That isn't the solution in this case. The variable is static for the lifetime of the page load, so there's need to keep going back to the server to get the value.

Others are suggesting setting the server to parse JS files as PHP so that you can embed PHP code into them. This also isn't a good answer, because you will lose all the browser's ability to cache the JS file, which will slow down your site and increase your bandwidth costs.

The solution is simply to add a separate single chunk of JS code to your page header -- ie add a small <script> tag to your page template, setting the variable in question.

The variable will then be accessible as a global in any JS code your run elsewhere in the page.

SDC
  • 14,192
  • 2
  • 35
  • 48
0

Yes, you can replace slidenum with get_title. No, you cannot do this with javascript nor at runtime. You'll need to use AJAX for that.

konqi
  • 5,137
  • 3
  • 34
  • 52
0

Not directly. You can jump through a few hoops to get it done.

Problem is that .js doesn't get interpreted by PHP at all.

So if you must, you can use mod_rewrite and the like to pretend your php script is actually an .js.

Or write the js file from PHP completely to filesystem.

Or use XHR (Ajax) to fetch a certain value.

Erwin Moller
  • 2,375
  • 14
  • 22
0

Another solution, not the best IMHO, is tell Apache to parse js files as php files. Simply put this in your .htaccess file:

AddType application/x-httpd-php .js
AddHandler x-httpd-php5 .js

<FilesMatch "\.(js|php)$">
SetHandler application/x-httpd-php
</FilesMatch>
m4t1t0
  • 5,669
  • 3
  • 22
  • 30