-1

I have been asked to fix an issue with a website and I am encountering an issue with a JavaScript error.

On the home page, [removed website link], I am receiving the error Uncaught TypeError: undefined is not a function. However, the function being called on that line (line 30) should exist, as the jQuery plugin is being loaded.

The call-stack just shows a series of anonymous functions pointing towards the jQuery file. I am having trouble determining why this is producing an undefined function error.

I have tried using the Chrome debugger to step through the code where the error occurs but it just seems to highlight the jQuery source file for every step.

My question is this:

  1. How do I go about tracking down the source of the issue when the trail is just a series of anonymous functions in the jQuery source file?
  2. Is there something I am missing here or that I am not considering?

Thank you.

Edit:

As is it not clear, the method being called, jQuery.ContentSlider is in fact being included within the page within the file testimonials.js.

This is not just a "What's wrong with my code" question, but also an inquiry into how I handle situations such as this in the context of JavaScript & jQuery specifically.

A call stack of anonymous functions is confusing to me, and I have already attempted to take the obvious steps, such as verifying the plugin is included and that this inclusion takes place before attempting to utilize that plugin.

Sorry for the confusion.

Edit - Solution Found

It appears that although jQuery and the plugin were included prior to use, another copy of the same jQuery file was being injected by a Joomla! module. Since this was the exact same Google hosted jQuery file, it did NOT appear twice in the Resources tab in the Chrome Developer Tools. It appears that Chrome will parse jQuery twice, but doesn't show it as being included twice. So, the version with the plugin attached was being overwritten.

Thank you to those who answered. Thanks to A. Wolff for bringing that piece of information about the Resource tab to my attention.

Improve this question
6
  • 4
    You are not including plugin ContentSlider before calling it. It looks like you didn't made so much effort to resolve your issue... Commented May 22, 2014 at 15:12
  • @A.Wolff Actually, the plugin is included, but the name of the file is testimonials.js. The ContentSlider plugin is within that file, which is included on line 26, 4 lines before the plugin is called. Commented May 22, 2014 at 15:35
  • Ok i see, you are including jQuery more than once so jQuery is pointing to latest included version (the same version as the former one anyway). This then removes reference to plugin method. So remove second inclusion: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> line 380 Be aware, you could use jQuery noConflict() method but seems useless in your case api.jquery.com/jquery.noconflict Commented May 22, 2014 at 15:41
  • @A.Wolff Ah, that makes sense. It appears like that second jQuery might be coming from a Joomla! module as opposed to the page source. That explains why I didn't see it. I'm going to look into that. Thank you for bringing that to my attention. Commented May 22, 2014 at 15:46
  • Check the HTML source code (ctrl+u) and search for 1.3.2/jquery.min.js Chrome seems clever enough to not recall same script twice, doesn't mean though it is not processing it Commented May 22, 2014 at 15:50

1 Answer 1

Reset to default
2

You're loading the slider after you instantiate it.

Reverse the order of these two blocks:

    <script type="text/javascript">
        $(function() {
            jQuery('#two').ContentSlider({
                width : '440px',
                height : '240px',
                speed : 400,
                easing : 'easeOutQuad',
                textResize : true
            });
        });
    </script>

    <script src="/templates/sp/javascript/jquery.sudoSlider.min.js"></script>

Edit: To the heart of your well-formed question about debugging, generally, Undefined is not a function, especially when dealing with frameworks, is a symptom of trying to access a method before it exists, which is why your attempted function call returns undefined rather than a function.

It's almost always the result of loading a framework after trying to call it, or in an asynchronous context, of not waiting for the framework to load or do something important.

EDIT 2: The above answer is not correct, as A.Wolff points out: it's not that you must reverse the order of the two blocks, but that: 1) The second framework is probably not the one you want, or 2) You have called jQuery('#two').ContentSlider when you meant to call .sudoSlider, (or whatever is appropriate for that framework).

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

sudoSlider ≠ ContentSlider, though.
As i can check it, this even not this plugin which include ContentSlider method. Anyway +1 for the idea...
@BuckDoyle Quite! I took a chance on that because it was the only framework in the page with a named /*slider/. It seems that A.Wolff hit on the answer...the framework's not being included at all, or the wrong method name is being called.
@msanford Thank you for your response. Unfortunately, ContentSlider and sudoSlider are two different things. The ContentSlider is in the poorly named testimonials.js file and it is being loaded prior to it's use. I understand your confusion, the source is pretty chaotic! jQuery.ContentSlider() is what I need to call, and it is being loaded first. That is part of what leads me the confusion I currently have.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.