Path problem with javascript/php

Question

I've been developing my site with the site directory structure as

www
  img
  javascript
  include
  index.php

Now I want to change it to

www
   index.php
   dir1
   dir2
   ...
   themes
       theme1
          img
          javascript
          include
          index.php

At the theme level index.php, earlier I've my paths to javscript files as javascript/file1.js or so.

Now I've changed the paths to <?php echo THEME_PATH . "javascript/file1.js"?> <?php echo THEME_PATH . "javascript/file1.js"?>

This includes the js files, however my problem is when I reached inside the js file.

For example, in one script.js file, I've a jquery method called as

$('#pop-con').html('<p><img src="img/ajax-loader.gif" width="220" height="19" /></p>');

I can't use php inside the js file. So how do I change the paths similar to the php implementation above??

Answer 1

Relative paths
Probably one of the easiest ways to solve it is using relative paths.

In your case you will need to be one directory up (../), so it would be:

$('#pop-con').html('<p><img src="../img/ajax-loader.gif" width="220" height="19" /></p>');

Answer 2

You can have a small <script> on your pages that creates a global variable to store the "THEME_PATH" value:

<script>
  window['THEME_PATH'] = '<?php echo THEME_PATH?>';
</script>

Then your JavaScript files can just look for the global variable and use it to construct paths. I keep such code in a global template header that's used for all the pages in my application. There really are only a very small number of things like that to worry about; in my application I think there are like 4 or 5 items of information like that to communicate with included .js files.

Answer 3

Solution, in case anyone else need it.

I put the following code in my theme level index.php file

<script>
    window.themePath =  "<?php echo $site_info[theme_style_path]; ?>";
</script>

And use the javascript global variable to append the path.

Answer 4

The source of the Javascript is irrelevant for the purposes of HTML being embedded within the page. What matters is the location of the page the HTML is embedded within.

For instance, if you load a page from example.com/index.php , and some Javascript loaded from example.com/js/script.js inserts some HTML into the main page, then image path references are going to be relative to / , as that's where the page was loaded from, not from /js .

As for embedding PHP in JS, you're right - but you can have PHP emit a .js file trivially:

<?php
    header('Content-type: text/javascript');
?>

var settings = <?php echo json_encode($SETTINGS_ARRAY); ?>;

would generate perfectly valid Javascript, even thought it came from a PHP file.