ReferenceError: <Function> is not defined

Question

I am getting a ReferenceError: serializeProducts is not defined error in my console and not sure why.

I have a Javascript file called components.js that contains a function called serializeProducts.

A template calls this components.js script and then a script below uses the serializeProducts function.

    <script type="text/javascript" src="{{STATIC_URL}}js/components.js"></script>
    <script type="text/javascript">
     if($("#parsed_found").val() == undefined)
        items_found = ""
    else
        items_found = serializeProducts($("#parsed_found").val().split("\n"));

    if($("#parsed_not_found").val() == undefined)
        items_not_found = ""
    else
        items_not_found = serializeProductsNotFound($("#parsed_not_found").val().split("\n"));

Notes

components.js is definitely being found properly as I can access through console, 200 status, etc.
I am not getting the error when running the script locally, but when I load the components.js file from Amazon S3 this is when it seems to not work, which I am having trouble figuring out as the permissions are public.

I am wondering if this could be an issue with the components.js script not loading fully before the script on the page runs? I've tried adding a delay, but still am getting the error. Any other ideas?

components.js: http://snapeda.s3.amazonaws.com/js/components.js

Can you paste your components.js, please?

Henrik Andersson
– Henrik Andersson

2014-10-30 08:50:36 +00:00
Commented Oct 30, 2014 at 8:50 — Henrik Andersson
– Henrik Andersson, Commented Oct 30, 2014 at 8:50
It is here: snapeda.s3.amazonaws.com/js/components.js

natab
– natab

2014-10-30 13:21:26 +00:00
Commented Oct 30, 2014 at 13:21 — natab
– natab, Commented Oct 30, 2014 at 13:21

mccc · Accepted Answer · 2014-10-30 09:05:25Z

1

Since you're already using JQuery, and have some code in your page depending on an external component, I'd really wrap that inside a $(document).ready(function() { ... });, just to make sure that everything is nice and dandy before executing instructions.

A different option would be putting that code in the same components.js script, but I don't know if that would be feasible for your case.

answered Oct 30, 2014 at 9:05

mccc

2,4541 gold badge21 silver badges22 bronze badges

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

5 Comments

natab Over a year ago

Thank you- I just tried wrapping it inside this but no luck still. Still the same error.

mccc Over a year ago

Just to be on the safe side, then, try using $(window).load instead of $(document).ready: it still might be just a timing issue.

natab Over a year ago

Ok that worked! Now I have what appears to be another timing issue in another file though. I am getting TypeError: undefined is not a function. Do you think that is also timing related? Again, this works when I"m running from my files locally. Would it make sense to post a separate question about this one?

mccc Over a year ago

That more likely means you're trying to use something that doesn't exist as a function: doesn't it tell you where the error happens?

natab Over a year ago

Actually I figured out a solution. I placed my script in a template that was inheriting my current template. That gave the script enough time to load before the next script ran and solved all my problems.

Collectives™ on Stack Overflow

ReferenceError: <Function> is not defined

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related