javascript - WordPress path url in js script file

Question

I added custom script:

wp_enqueue_script('functions', get_bloginfo('template_url') . '/js/functions.js', 'search', null, false);

It works great, except in the functions.js I have:

Reset.style.background = "url('../images/searchfield_clear.png') no-repeat top left";

This used to work before, until I changed to pretty permalinks and .htaccess

The folder hierarchy is like:

themename/js themename/images (the images and js folder are in themename folder)

I tried ../images - ./image - /images

Normally it should go back 1 level wherever the js file is located....

I don't want to use full path.

Is there another way that WordPress can recognize in the javascript file to have the correct path?

Currently I am just confused what I am doing wrong.

Answer 1

According to the Wordpress documentation, you should use wp_localize_script() in your functions.php file. This will create a Javascript Object in the header, which will be available to your scripts at runtime.

See Codex

Example:

<?php wp_localize_script('mylib', 'WPURLS', array( 'siteurl' => get_option('siteurl') )); ?>

To access this variable within in Javascript, you would simply do:

<script type="text/javascript">
    var url = WPURLS.siteurl;
</script>