Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 400
  • Last Modified:

Uncaught TypeError: $container.imagesLoaded is not a function

Hi,

I am receiving the following error on some of my pages and I have a FAQs plugin that's not working, I think it has something to do with this error:

Uncaught TypeError: $container.imagesLoaded is not a function

Does anyone know how I can get rid of this error?

Many Thanks,

Andrew
0
Andrew Spackman
Asked:
Andrew Spackman
2 Solutions
 
Miguel OzSoftware EngineerCommented:
Chances are you are using a property imagesLoaded as a function in your code.
Please post you JS code and the values of $container when run in debugger for further help if needed
0
 
Kim WalkerWeb Programmer/TechnicianCommented:
As Miguel Oz has suggested, we need to see your code to accurately determine the cause. But imagesLoaded sounds like it would represent a number variable rather than a function. Based on the error you're getting, you may have entered
$container.imagesLoaded()    // this is a function

Open in new window

instead of
$container.imagesLoaded    // this is a variable, possibly a number

Open in new window

You may be able to eliminate the error by removing the pair of parentheses.

However, this question is a Javascript/jQuery question and the $container object name resembles a PHP object name rather than a Javascript object. Although it is acceptable to begin the name of your javascript objects with a $, it makes your code resemble PHP instead of javascript and is confusing to analyze. Are you sure this is javascript? And if this is jQuery, the $ is usually followed by a dot or period, or a selector wrapped in parentheses.
0
 
Julian HansenCommented:
... or it is a function but you are calling it before you have included a library it depends on.

This can cause the problem
<script>
myobject.someFunction();
</script>
<script src="myobject.js"></script>

Open in new window

Instead of
<script src="myobject.js"></script>
<script>
myobject.someFunction();
</script>

Open in new window

0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
Andrew SpackmanHead of CreativeAuthor Commented:
Hi,

Sorry I forgot to include a link to the page that is generating the error.

http://www.landscapes.digital/help-support/

You should be able to get more information there.

Many thanks
0
 
Julian HansenCommented:
After doing some research and looking at your source I found the following in your source file.

<script type='text/javascript' src='http://www.landscapes.digital/wp-includes/js/jquery/jquery.masonry.min.js?ver=3.1.2'></script>

Open in new window

Apparently  imagesLoaded was part of the masonry library up to version 3.0 after it was unbundled. You now have to load it separately - you can get it from here  http://imagesloaded.desandro.com/
0
 
Andrew SpackmanHead of CreativeAuthor Commented:
Hi Julian,

I tried adding this separately yesterday but it didnt seem to work. I will add it again and let you know.

Thanks,
0
 
Andrew SpackmanHead of CreativeAuthor Commented:
I have added the following script in the header but still hasn't worked?

<script src="https://npmcdn.com/imagesloaded@4.1/imagesloaded.pkgd.min.js"></script>
0
 
Julian HansenCommented:
Not seeing that line in the source - are you sure it is in the script you uploaded.

Also remember it has to be BEFORE you use imagesLoaded - your first use (that I can see) is on our about line 203 - so you would need to include the reference to that script before this - preferably in the <head> section
0
 
Andrew SpackmanHead of CreativeAuthor Commented:
I have moved the script higher up but still shows the error :/
0
 
Julian HansenCommented:
I have looked at the source for the link you posted several times - that library is not in the source, Are you sure you have uploaded the file to the server the link you gave us points to?
0
 
Andrew SpackmanHead of CreativeAuthor Commented:
It's there for me, on line 15. I have attached a screenshot
Screen-Shot-2016-08-20-at-16.31.40.png
0
 
Julian HansenCommented:
That's not the same URL - the one you posted earlier was http://www.landscapes.digital/help-support/

I don't get an error on the root domain see screen shots but I still get it on the help-support page

Source of help-support file - no js library present
help-support page source - no imagesloaded JShelp-support page showing error
help-support page showing errorhome page - no error
home page no error
0
 
Andrew SpackmanHead of CreativeAuthor Commented:
Thats really strange because im using the same header.php file both on the home page and contact page template
0
 
Julian HansenCommented:
Well the evidence is that somehow you are not - so start there. The problem is that the function is not defined so you are going to need to track down where (why) in your code the header.php is not loading the library
0
 
Andrew SpackmanHead of CreativeAuthor Commented:
Ok so i have done some research online and some blogs are saying i need to register the script first. I have found a file in my theme that looks like it is handling all the scripts required for the site see below:

<?php

function dcs_load_scripts() {

	// load WP's included jQuery library
	wp_enqueue_script('jquery');
	wp_enqueue_script('jquery-masonry');
	wp_register_script('imagesloaded', get_template_directory_uri() . '/js/imagesloaded.pkgd.min.js');

	// global scripts
	
	wp_enqueue_script('jquery-fancybox', get_template_directory_uri() . '/includes/fancybox/jquery.fancybox.pack.js');
	wp_enqueue_script('jquery-stellar', get_template_directory_uri() . '/includes/js/jquery.stellar.js');
	wp_enqueue_script('jquery-mobilemenu', get_template_directory_uri() . '/includes/js/jquery.mobilemenu.js');
	wp_enqueue_script('jquery-fitvids', get_template_directory_uri() . '/includes/js/jquery.fitvids.js');

	// sticky header
	if (of_get_option('sticky_header') == 'yes') {
		wp_enqueue_script('jquery-sticky', get_template_directory_uri() . '/includes/js/jquery.sticky.js');
	}

	// load singular (posts and pages) scripts
	if ( is_singular() ) {
		wp_enqueue_script( 'comment-reply' ); //enable nested comments
	}

	// global styles
	wp_enqueue_style('css-stocky', get_stylesheet_directory_uri() . '/style.css');
	wp_enqueue_style('jquery-fancybox', get_template_directory_uri() . '/includes/fancybox/jquery.fancybox.css');
	wp_enqueue_style('font-Roboto', '//fonts.googleapis.com/css?family=Roboto:300,400,400italic,700,700italic');
	wp_enqueue_style('font-awesome', '//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');

}
add_action('wp_enqueue_scripts', 'dcs_load_scripts');

// load in header
function dcs_add_header_css() {
	get_template_part('includes/cssoptions');
}
add_action('wp_head', 'dcs_add_header_css');

// load in header
function dcs_add_header_js() {
	get_template_part('includes/js/stockyjs');
}
add_action('wp_head', 'dcs_add_header_js');

Open in new window



I have added this following script in the functions.php file

function wptuts_scripts_with_jquery()
{
    
    // Register the script like this for a theme:
    wp_register_script( 'images-loaded', get_template_directory_uri() . '/js/imagesloaded.pkgd.min.js', array( 'jquery' ) );
 
    // For either a plugin or a theme, you can then enqueue the script:
    wp_enqueue_script( 'images-loaded' );
}
add_action( 'wp_enqueue_scripts', 'wptuts_scripts_with_jquery' );

Open in new window


Not sure if I am going in the right direction? Do you know how this is working?

Many Thanks,

Andrew
0
 
Julian HansenCommented:
I am not a WordPress experts but it seems what you are doing is correct. The question is why is it working on one page and not the other.

If it were me I would be putting debug statements into those functions to check that they are being called first up - if they are then I would follow the path of the enque_scripts function and see where that leads. If not I would try to find out why they are not being called.
0
 
Andrew SpackmanHead of CreativeAuthor Commented:
I'm afraid I'm not an expert on this so wouldn't know where to start with debugging, I've not really had any issues before with linking to scripts but this is out of my skill set.
0
 
Julian HansenCommented:
It might be an idea to open another question and add the Wordpress tag. This question was about why the page was erroring - the answer is you were missing a script. The question of why WP is not putting that script into the head of your page is probably something you want the WP experts to take a look at.
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now