.serializeJSON returns undefined

[DMCK96]

So I have both script tags in the header (serializeJSON after jQuery). HTML form is created and filled in, just a couple selects and a few text inputs, nothing fancy.

• When I execute $('#json-form') in the console it correctly identifies the element.
• When I execute $('#json-form').serializeJSON() I get an error that says "Uncaught TypeError: $(...).serializeJSON is not a function at :1:17"
• When I execute $('#json-form').serializeJSON without the brackets it returns undefined.

This is all being tested in the console to ensure it wasn't an issue with the code I was writing (copy and pasted from the read me), however they both produce the same issue.

I downloaded the file manually and referenced it in the element. I have not used NPM.

I have tested both release 3.0 and 3.1 and also tried on jQuery 2.1.3 (included in the release) and jQuery 2.1.4 (what I usually use).

[marioizquierdo]

"serializeJSON is not a function" means that the plugin was not loaded. Could you add more details about how you are loading the plugin? Are you executing the code before loading the plugin maybe? Are you using AMD, CommonJS or Browser globals? Do you see any other error in the JS console before this one?

FYI: the plugin is loaded depending on what environment you are running it: https://github.com/marioizquierdo/jquery.serializeJSON/blob/master/jquery.serializejson.js#L10

[DMCK96]

"serializeJSON is not a function" means that the plugin was not loaded. Could you add more details about how you are loading the plugin? Are you executing the code before loading the plugin maybe? Are you using AMD, CommonJS or Browser globals? Do you see any other error in the JS console before this one?

FYI: the plugin is loaded depending on what environment you are running it: https://github.com/marioizquierdo/jquery.serializeJSON/blob/master/jquery.serializejson.js#L10

Both script elements where at the start of the page and loaded on page load (double checked by checking source tab in dev tools to ensure it had been correctly loaded).

I'm not using AMD, CommonJS or Browser globals and there are no other JS errors in the console. All other JS and JQuery on the page loads and executes as intended.

If I use serializeJSON without the brackets the function executes but returns undefined, if it hadn't loaded that too would've returned a 'is not a function' error.

[marioizquierdo]

In JavaScript, accessing a property without the brackets is just accessing the property. If the property was not defined, JavaScript doesn't return an error, it returns undefined. You could do $.foobar and that would return undefined as well. Using the brackets on undefined values is what returns the error is not a function (doing $.foobar() is like doing undefined() if the foobar property does not exist on the & object).

Somehow, the plugin was not loaded in your environment. I don't know how your HTML is structured or how are you loading it. Maybe try something like this:

<script type="text/javascript" src="jquery.js"></script>
<script>
    console.log("Check if jQuery was loaded");
    console.log(jQuery);
    console.log($); // $ is the jQuery alias
    console.log(jQuery.fn.jquery);
</script>

<script type="text/javascript" src="jquery.serializejson.js"></script>
<script>
    console.log("Check if jQuery.serializeJSON plugin was loaded");
    console.log($.serializeJSON); // check if the plugin was properly loaded
    console.log($("<input type=\"text\" name=\"1\" value=\"1\"/>").serializeJSON());
</script>

[davidraedev]

Double check and make sure jQuery isn't being included twice on the page. I had a very similar issue where serializeJSON was defined on load, but not later when called. Tracked it down to an extra jquery script include overwriting the original.