ansaurus

Question

How do I change a hardcoded path to a dynamic one in javascript?

Answer 1

+1 A:

What I like to do is to save the web root URL (or media/resources folder URL or whatever) in a global JS variable before including external scripts:

 <script type="text/javascript">
 my_project_web_root = "http://example.com";
 </script>

and use that in all subsequent scripts:

 images:{clientPath: my_project_web_root+'/wp-content/themes/MyThemeFolder/...'

Pekka 2010-09-14 12:20:14

Thanks for the quick response Pekka. In this example, I'm distributing my theme to end users, so I will not know the URL of the site in order to set the web root. I'm looking for a completely dynamic method :)

Scott B 2010-09-14 12:44:23

@Scott I see! Does the relative path not work then? Maybe you'll need to add some more detail about what is relative to where.

Pekka 2010-09-14 12:49:13

@pekka, I think I need to clarify what I'm lookin for. I just need a way to replace "MyThemeFolder" with a dynamically generated value to represent it. If I hardcode the name of the themefolder, the script breaks if the user decides to change the name of the theme folder.

Scott B 2010-09-14 12:49:44

@Scott but why do you need to specify the name of the theme folder in the first place? Is your script not already in there?

Pekka 2010-09-14 12:51:26

Yep, it sure is. I'm not sure why the script author did it this way. Are you familiar with the jpicker script? its minified, so I cant figure out how to make the clientPath variable relative to the current directory. It seems weird it would go up a level, then right back down to the folder in which the script resides.

Scott B 2010-09-14 12:58:37

@Scott nope, I don't know that plugin. The overall question in the end is what the path will be relative to. That depends on where it will be output to the browser and how. Try playing around with it to find out where it points to (use Firebug's net tab to see where the requests go) and whether that odd construction is necessary at all

Pekka 2010-09-14 12:59:51

I believe the main issue is that the script is loaded into the wordpress theme options utility. It loads functions.php within the context of wp-admin/admin.php?page=functions.php. So even though the js file is included in functions.php, the image paths are relative to the current directory, which is wp-admin. I think that's why I had to hard code the references in the first place.

Scott B 2010-09-14 14:20:04

@pekka: Am I able to set a javascript variable via PHP? If so, I could set the clientPath variable from PHP and just reference it in the js file

Scott B 2010-09-14 14:24:26

@Scott B sure, as long as you're doing it on the PHP page - you won't be able to do it in the .js file unless you rename it to .php and import the wordpress header, which is not a good idea

Pekka 2010-09-14 14:27:51

Thanks for all your help Pekka, I've updated the question with the answer.

Scott B 2010-09-14 14:40:42

@ScottB You're welcome! It is a bit hard to read at the moment, though. Maybe isolate what you changed?

Pekka 2010-09-14 14:42:21

I edited it a bit. Feel free to change it if you like. I hope it makes sense now.

Scott B 2010-09-14 14:54:06

ansaurus

tags:

views:

answers:

How do I change a hardcoded path to a dynamic one in javascript?

related questions