Skip Navigation

[Resolved] Images not displaying and showing: Uncaught TypeError: $ is not a function

This support ticket is created 4 years, 6 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 - -
13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 - -

Supporter timezone: America/New_York (GMT-04:00)

Tagged: 

This topic contains 7 replies, has 2 voices.

Last updated by Christian Cox 4 years, 5 months ago.

Assisted by: Christian Cox.

Author
Posts
#1359869

I am trying to: show images in pages. these functions have worked previously with the exact same code

Link to a page where the issue can be seen: hidden link

I expected to see: In the blue sections scheduled presenters there should be a image next to the name and title for each section.

Also images are missing on the all speaker pages here: hidden link

Instead, I got: missing images

I think it has to do with a particular jquery function is getting overridden somewhere but i am not sure how to address it. The function does not like the wpv image call is using an ID "$presenters" and the $ is throwing it off or possibly This is the root here that is part of that function in the Toolset backend: $(document).ready(function() {"

I found this article: hidden link

but i am not sure how to correct it on the toolset side if that is really the issue.

The Content template that is driving this page is called "01a - Workshop Template" The specific view that has this code in it is: "01-b3-workshop-schedule-presenters-regular"

#1359909

There's some code added with your Custom JS and CSS plugin that utilizes '$' instead of 'jQuery'. If you want to use the $ namespace, you should set up the document ready handler like this instead:

jQuery(document).ready(function($) {

This is in Custom CSS & JS, saved as /wp-content/uploads/custom-css-js/18472.js

#1360223
Screen Shot 2019-10-10 at 11.32.01 PM.png

Ok I am still having an issue. It seems that the error message i was receiving and reported was an issue but after correcting the issue it still is not showing the images. After some testing this is what I found.

URL: hidden link

View: 01-a1 - workshop - presenters - main
Line 8 has this code in it: [wpv-post-featured-image size="custom" width="60" item="$participant"]

The HTML Image tag will not output an image. If i change the output to "URL" then it will output the correct url to the image. I can then go in and manually build out the normal HTML image tag around it and it will display correctly (See attached screenshot).
the above statement just means i change this:<a class="presenterlink" href="[wpv-post-url id='$participant']"> [wpv-post-featured-image size:'custom' width:'60' id='$participant']" </a>

To This:
<a class="presenterlink" href="[wpv-post-url id='$participant']"><img src="[wpv-post-featured-image output='url' id='$participant']" width="60px" height="auto" /></a>

After some further testing I see it is the custom size parameter that seems to be making the impact. If I remove the size="custom and width="60" then it loads but its not the correct size. I can go about correcting this issue with some CSS, but I will still have to touch every single view and content template that uses a custom size and that will be a lot of pages. Is there something not working on this function or is it just my site?

Shouldn't the HTML Image tag option be able to properly spit out an image that is a custom size since it gives the option? It would be a very huge pain for me to go through and update this code across my entire site when this functionality should work. Is there something that is possibly interfering with that function now that its updated that didn't previously interfere?

#1360873

The HTML tag should give a properly resized image tag. Can you try a different size to see if something is cached in the image resize system?

[wpv-post-featured-image size="custom" width="80" height="80" item="$participant"]

If that doesn't work, please hard-code a participant post ID and try again. Let me know the results.

#1364327

The code that you sent over with the image size set to 80 does not work. If I go in and hard code a post Id of 3191 which is the first presenter on this page: hidden link does not work. Its something in the size function of the field that is causing the image to not display. if I remove the size parameter then it shows the image and I have to style it via css class instead of inline. Is there a way to fix this issue? The size parameters should work on the individual field. I would rather not update all of our views and templates to make this change system wide if I can avoid it.

#1365639

Do any image resize tags work on your site? I'm beginning to suspect your server is missing a PHP extension like imagick, imagemagick, or some other similar graphics extension that allows processing images on the server, because the exact same files work correctly on my site.

#1370621

It appears rolling back to php 5.6 instead of 7.1 resolves the issue. Is that helpful in knowing if imagick is installed? I am not completely sure how to verify and my attempts to test it have not worked.

#1371021

You can upload a PHP info file to your server and check the extensions that are loaded, then switch the server to use the other PHP version and check the extensions again. We have information about creating a PHP Info page here: https://toolset.com/toolset-requirements/

Basically you will create a small text file called "php_info.php" and add the following PHP code:

<?php phpinfo();>

Save and upload this file to the root directory of your site with FTP. Then you can navigate to https://yoursite.com/php_info.php to see the current PHP configurations. This should tell you if imagick or another graphics library is active or not. My guess is that when 5.x is active, imagick is installed and active. But when PHP 7.x is active, imagick is not available. Once you have checked the configurations for both PHP versions, you should remove the file from the server.

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.