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"?>

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??

Please don't put the answer in your question. Instead you should mark your own answer as Best answer. — Michiel Pater
– Michiel Pater, Commented Mar 1, 2011 at 16:28

Michiel Pater · Accepted Answer · 2011-03-01 15:10:14Z

2

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

answered Mar 1, 2011 at 15:10

Michiel Pater

23.2k5 gold badges47 silver badges58 bronze badges

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

4 Comments

ptamzz Over a year ago

I tried this method but the directory comes relative to the home directory, ie that www/index.php, not from the www/themes/theme1/javascript/ directory, which is where the js file is resideing.. :/

Michiel Pater Over a year ago

@ptamzz: Did you know about base url in HTML? Have a look at w3schools.com/tags/tag_base.asp

Michiel Pater Over a year ago

@ptamzz: You are welcome. You could set the base url once for each theme and then use relative paths to your images. ;-)

ptamzz Over a year ago

Maybe if you can put this HTML base thing on your answer above, I can mark your answer the best one as it actually solved the issue the best way. :)

Pointy · Accepted Answer · 2011-03-01 15:11:58Z

1

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.

answered Mar 1, 2011 at 15:11

Pointy

415k62 gold badges600 silver badges631 bronze badges

2 Comments

ptamzz Over a year ago

the same idea, but window['THEME_PATH'] doesn't work. I changed it to window.themPath. Now it's working. :)

Pointy Over a year ago

Well there's no reason that window['THEME_PATH'] would not work; I just tested it out and it does. That's perfectly legal JavaScript.

ptamzz · Accepted Answer · 2011-03-01 16:14:59Z

1

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.

answered Mar 1, 2011 at 16:14

ptamzz

9,44531 gold badges95 silver badges151 bronze badges

Comments

Marc B · Accepted Answer · 2011-03-01 15:12:56Z

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.

Collectives™ on Stack Overflow

Path problem with javascript/php

4 Answers 4

4 Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related