Solved

Uncaught TypeError: $container.imagesLoaded is not a function

Posted on 2016-08-19
19
22 Views
Last Modified: 2016-11-21
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
Comment
Question by:Andrew Spackman
19 Comments
 
LVL 35

Expert Comment

by:Miguel Oz
ID: 41763258
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
 
LVL 21

Expert Comment

by:Kim Walker
ID: 41763373
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
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41763429
... 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
 

Author Comment

by:Andrew Spackman
ID: 41763456
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
 
LVL 51

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 41763520
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
 

Author Comment

by:Andrew Spackman
ID: 41763526
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
 

Author Comment

by:Andrew Spackman
ID: 41763529
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
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41763592
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
 

Author Comment

by:Andrew Spackman
ID: 41763626
I have moved the script higher up but still shows the error :/
0
Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41763627
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
 

Author Comment

by:Andrew Spackman
ID: 41763681
It's there for me, on line 15. I have attached a screenshot
Screen-Shot-2016-08-20-at-16.31.40.png
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41763759
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
 

Author Comment

by:Andrew Spackman
ID: 41763762
Thats really strange because im using the same header.php file both on the home page and contact page template
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41763828
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
 

Assisted Solution

by:Andrew Spackman
Andrew Spackman earned 0 total points
ID: 41764213
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
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41764239
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
 

Author Comment

by:Andrew Spackman
ID: 41764255
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
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41764322
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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

706 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now