enqueue can't find script file

Resolved bkmason
(@bkmason)

9 years, 11 months ago
I would appreciate it if anyone can help me before I give up on wordpress altogether. I’ve been trying to do a so called “simple” enqueue ha! for at least 3 weeks. I’m trying to install a price table on my product page using my custom jQuery script. I’ve been to google, the forums, read the codex etc… Followed over 25 different enqueue and register script examples only to get Warning: call_user_func_array() expects parameter 1 to be a valid callback, function ‘pricetable’ not found or invalid function name in public_html/wp-includes/plugin.php on line 470. just a few examples I’ve tried are…
```
function theme_name_scripts() {
   wp_enqueue_style( 'style.css', get_stylesheet_uri() );
   wp_enqueue_script('pricetable',get_stylesheet_directory_uri()
. 'pricetable.js', array('jquery'), '1.0.0', false );
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );
```
```
function my_scripts_method() {
	wp_enqueue_script(
		'jquery',
		get_template_directory_uri() . 'pricetable.js',
		array('jquery')
	);
}
add_action('wp_enqueue_scripts', 'my_scripts_method');
```
add_action(‘woocommerce_single_product_summary’,’pricetable’);`
```
function custom_scripts() {
	wp_register_script( 'jQuery', 'http://wp-content/themes/wootique-child/pricetable.js', array( 'jquery'), '1.0.0', false );
	wp_enqueue_script( 'jQuery' );
}
add_action( 'wp_enqueue_scripts', 'custom_scripts' );
```
My pricetable script starts…
```
jQuery(document).ready (function($) {
var x = document.createElement("TABLE");
x.setAttribute("id", "pricetable");
document.body.appendChild(x);
```
I’m using a wootique-child theme and have installed woocommerce, a function.php, header file, etc… in its child directory. I’ve tested the function file by writing a simple “hello world” function and placing “hello world” in different areas of the product page using action and filter hooks. I’ve also placed my no-conflict anonymous jQuery “pricetable” script in the child themes header which allows the table to be displayed and manipulated by the child style.css file on the product page. However the product page hooks that I’ve placed at the end of the script don’t work and it doesn’t matter if their commented out or not. This might be the reason the table is appended to one side of the product page and the table data is slightly off center. That problem could probably be fixed by tweaking the css file. The strange thing is that the table only appears on the product page, like it supposed to, without the aid of the product page hooks?

I would like to use my child function.php to call the “pricetable.js” file the correct way so that I can clean up my templates and use the add action and filter hooks to place the table in the proper area of the product page. Neither the literature nor examples indicate where any of the files they mention need to be placed. Therefore I’ve placed my “pricetable.js” file in several different areas to try and make it work. In the child theme I placed the pricetable.js file directly in its subdirectory using the wp-content /themes /wootique-child/ pricetable.js path. In both the parent and child theme I also placed the “pricetable” file in wp-content/themes /wootique(child) /includes/js/ pricetable.js. I’ve tried enqueue in both the child and parent theme. Whatever file path I use, method of register or enqueue, wordpress can’t locate the “pricetable.js” file.
It also would be nice to know the proper syntax so I can use the hooks as a variable in my script to retrieve the products base price to use in the table.
Thank you I appreciate your help

Viewing 11 replies - 1 through 11 (of 11 total)

catacaustic
(@catacaustic)

9 years, 11 months ago
This line might be wrong:

add_action('woocommerce_single_product_summary','pricetable');

You’re getting that error becuase you don’t have a PHP function called pricetable anywhere.

The examples that you’ve got look like they should be working OK – but it all depends on where your Javascript file is located. This should do what you’re looking for:
```
function custom_scripts() {
    wp_register_script( 'pricetable', get_stylesheet_directory_uri() . 'pricetable.js', array( 'jquery'));
	wp_enqueue_script( 'pricetable' );
}
add_action( 'wp_enqueue_scripts', 'custom_scripts' );
```
The biggest changes that I have made that you didn’t have in that example are that you should never use jQuery as the script name as that will over-write the existing refernece to jQuery and pretty much break everything. Apart from that there was just a small error where you didn’t have your webistes URL in there.

If that doesn’t work, can you show us a URL of a page where it’s not working? That would let us see exactly where something is going wrong.
Thread Starter bkmason
(@bkmason)

9 years, 11 months ago
Catacaustic thanks very much for your response. I’ve already tried the “function custom scripts” method several different ways including the way you just described. I pasted your version into my child function.php anyway with no results.

Are you referring to the get_stylesheet_directory_uri() . ‘pricetable.js’ that you just used as the url or http://wp-content/themes/wootique-child/pricetable.js as the url? I’ve used the latter in some of my enqueue examples again with no results. Do I need to include the full url path somewhere in my function.php file?

Ive pasted a link to my product page for you that well also give you access to my site. You can see my price table there only because I pasted the script directly in the child themes header.

http://gator2012.hostgator.com/~nsdinc/product/port-company-essential-t-shirt-pc61/

As I mentioned above I’m not sure where the pricetable.js file is supposed to go so I’ve put it in three different folders to try to access it. In the child theme I placed the pricetable.js file directly in its sub-directory using the wp-content/themes/wootique-child/pricetable.js path. In both the parent and child theme I also placed the “pricetable” file in wp-content/themes/wootique(child)/includes/js/ pricetable.js path.None work.

I added the action hooks in the example below to try and hook the table to the area of the product page where I wanted it to go. Like I did with the hello world example.
```
function custom_scripts() {
    wp_register_script( 'pricetable', get_stylesheet_directory_uri() . 'pricetable.js', array( 'jquery'));
	wp_enqueue_script( 'pricetable' );
}
add_action( 'wp_enqueue_scripts', 'custom_scripts' );
add_action('woocommerce_single_product_summary','wp_enqueue_scripts');
```
Could it be that my pricetable function is an anonymous jQuery and wordpress can’t find it or does the script file get assigned an arbitrary handle when you enqueue it. Thanks again for your help.
catacaustic
(@catacaustic)

9 years, 11 months ago

Firstly, what do you mean by “no results”? Is it finding the file? Is something in the JS not working? some other issue?

Second, yes, using a URL of http://wp-content/themes/wootique-child/pricetable.js is wrong. That doesn’t include the domain name, and that’s required. But, hard-coding that is not a good idea, and that’s why I’ve used get_stylesheet_directory_uri() . 'pricetable.js' as that will get the correct file from the root folder of your child theme.

I couldn’t see a link to a page of yours anywhere on there, so I’m still in the dark about where that is. 🙂

As far as an anonymous script, if you mean that Javascript part, then that’s fine and the normal way that it’s done.

The first thing that you need to do is to see what the URL of the file actually is. To do that use Firebug or your browsers developer tools to see which resources are being loaded. You’ll see URL’s that didn’t load marked in red (most times) so if something is missing you’ll easily see it there.

Thread Starter bkmason
(@bkmason)

9 years, 11 months ago

Catacaustic: thanks for getting back
1)link should be there just used it’ it works. starts w/gator 2012
2)no results means it seems it can’t find the file as far as I know. there may be another issue don’t know?
3)I’m aware of the hard code problem read about it in the codex.however tried that out of desperation with full domain name and path, still couldn’t find file.
4)is it OK to have the pricetable.js in it’s own file under the child theme folder or does it need to be in the includes js sub-folder. I have it in both
5)the ftp path of the 1st prictable.j file that I placed directly under the child themes is /public_html/wp-content/themes/wootique-child/pricetable.js. the second one I placed in the includes sub-folder under the child theme is /public_html/wp-content/themes/wootique-child/includes/js.
6)I have Firebug don’t know how or what loading I’m checking for but will look into it.
thanks

catacaustic
(@catacaustic)

9 years, 11 months ago

I get the feeling that you’re doing something really wrong here for some reason.

From the source code of your page, you’re not linking to the pricetable.js file. It looks like you’re including that JavaScript code directly in the header? If that’s right, remove all of your add_action() calls for wp_enqueue_scripts. That’s only used to add a <script src="myfile.js"></script> tag to the <head> element.

I can see the price table on that page with the different prices and sizes, so I’m really at a bit of a loss to see what the problem is.

Thread Starter bkmason
(@bkmason)

9 years, 11 months ago

catacaustic
As I mention above I put the script in the header to test it but would like to use my child function.php to call the “pricetable.js” file the correct way so that I can clean up my templates and use the add action and filter hooks to place the table in the proper area of the product page.

I forgot to comment out the script in the header and reactivate the enqueue script in the function.php before you viewed the site. I apologize and have done that.I was hoping you would take another look to see if the url is being loaded and if not explain what I’m doing wrong. Or perhaps explain what i need to do in firebug so I can learn how to check and see what resources are being loaded myself.

The table you saw only had dummy data in it. I would like to use the product hooks to link price & size to the table. That’s why I ask if you new the proper syntax to use to retrieve information from a hook and use it as a variable within the script itself.
Thanks again

catacaustic
(@catacaustic)

9 years, 11 months ago

OK, that makes a little more sense.

My first big question now is – Why would you do this thorugh JavaScript? Obviously the product options are going to change for every product, so you’d need to find some way for your Javascript to know what the options are for each product. That would need you to either set up an AJAX call back to the server when the page loads, or you’d need ot code the values into another Javascript block inside the product template page so that they can be read via Javascript.

If it was me doing this, I’d modify the product page template to remove the drop-down selection lists, and add the data table in there in teh template using PHP. That way there’s no messing around with Javascript, no extra server calls, and everything will be loaded on the page without any extra processing. It’s also going to be a whole lot easier. You need to get the data on the page anyway, so why not just use that to build the product page in the first place?

Thread Starter bkmason
(@bkmason)

9 years, 11 months ago

just deciphering what you were saying. I was planning on removing the drop down after I link the base price into the table. Was using JavaScript to display and calculate the data from the base price. Thought if customer wanted to check another product they’d have to leave single product page select another product which would take them back to the single page with the new sizes and base price for java to calculate from. I’m sure your right but how would you add the table and get it to calculate in the product template without script.

catacaustic
(@catacaustic)

9 years, 11 months ago

How do you get the prices to display for the script? They’re obviously being calculated *somewhere* using PHP. Use those values in the PHP script for the page template, loop through them and output the table rows that are needed. You should be able to see the variable that are used in the page template as they have to be used to output the drop-down area.

Thread Starter bkmason
(@bkmason)

9 years, 11 months ago

Just searching through the product templates, might take some time. just for the heck of it I’ve reset the enqueue. when you get a chance could you check and see if it loads or why not. I would appreciate it. meantime I’ll take a look at the templates and try and figure out what your telling me.
thanks agian

Thread Starter bkmason
(@bkmason)

9 years, 11 months ago

resolved: my theme didn’t have a js folder in it’s root directory.guess they just decided not to put one in. that cost me a week and a half of redundant research. This is why I kept asking in what folder do you place the script. This is also the problem when you read the literature. It gives examples like the code goes here or place this in your file. Assuming you know what code, what file! not a good educational technique. Anyway want to thank catacaustic for being the only one for at least trying to help.

Viewing 11 replies - 1 through 11 (of 11 total)

The topic ‘enqueue can't find script file’ is closed to new replies.

enqueue can't find script file

Tags

Topics

Topics with no replies

Non-support topics

Resolved topics

Unresolved topics

All topics