Uncaught ReferenceError: jQuery is not defined #1

lgrn · 2017-05-16T10:29:19Z

I'm using Grav 1.2.4 and the latest version of the plugin. I'm getting this same issue with two different themes, namely the default "Antimatter" as well as "Hydrogen".

My user/plugins/tablesorter/tablesorter.yaml looks like this, which I think is the default:

enabled: true
active: false
include_widgets: false
include_metadata: false
production: true
custom_path: assets/tablesorter  #no leading or trailing slash
themes: blue
table_nums: 1

When I look at the source of a page (after cleaning cache, makes no difference), I just see a <table>. What's strange though is that if I set active: true in the above file, which I understand should make this plugin only work per-file (calling this attribute "active" is terribly confusing, it should be called "activate" or something but that's another subject), it doesn't start working but I do see a difference in behavior. With active: true I no longer see just <table> in my pages, but <table id="tstableid1" class="tablesorter">. There is nothing in the pages themselves stating that the plugin should be used (i.e. no active: true).

I've read the readme but I can't figure out what I'm doing wrong. Isn't this plugin just supposed to work on all tables if it's enabled?

The text was updated successfully, but these errors were encountered:

Perlkonig · 2017-05-16T11:24:28Z

I will test with newer versions of Grav, just to make sure.

You should indeed see syntax like <table id="tstableid1" class="tablesorter"> in the final output. That means it's executing.

If active is set to false in the main config, then you have to activate it on a per page basis. The "Usage" section of the readme explains what you have to add to your page headers.

Even if you do site-wide activation, you will still need to update the table_nums field for each page, unless all your pages only have one table. In the "Configuration" section of the docs, it explains how table_nums works.

lgrn · 2017-05-16T12:12:07Z

If active is set to false in the main config, then you have to activate it on a per page basis.

If this statement is correct then by default the plugin would do nothing, correct? The readme states that:

The active field is what lets you activiate [sic] the plugin on a page-by-page basis. The default is false. To activiate [sic] it for a specific page, put the following in the page header: tablesorter: active: true

Reading this makes me think that the "active" value is only used when the plugin processes on a per-page basis. Inversely, if the "active" value is not used (not enabled), it should process all pages.

Can you clarify what the default behavior is?

Also, table_nums is 1 as this is the default, and it is failing on a page with only one table.

Further to your point above I added the following to the top of my page:

tablesorter:
  active: true

I cleared the cache, but still nothing. This doesn't work regardless of whether tablesorter.yaml has active: true or active: false.

Perlkonig · 2017-05-16T12:27:23Z

Thank you for highlighting the typos. I will correct those.

The default global config is active: false, meaning that the plugin will not be run unless a specific page activates it. If you set active: true globally, then the plugin will process every single page.

The separation of enabled and active is a standard idiom in Grav plugins to minimize overhead of plugins that are not useful for every page.

If you see syntax like <table id="tstableid1" class="tablesorter"> in the final output, then the plugin is correctly munging the output. What exactly is not working?

lgrn · 2017-05-16T12:34:05Z

Ok, so here is my current configuration:

tablesorter.yaml has active: false, as is the default.
I have added tablesorter: active: true as described to the top of my .md file, with correct linebreaks and indentation.
After verifying these two points, I run bin/grav clearcache just in case.
I refresh the page with CTRL+SHIFT+R
I see <table id="tstableid1" class="tablesorter"> , and in the <head> I see: <script src="/user/plugins/tablesorter/dist/js/jquery.tablesorter.min.js" type="text/javascript"></script>

At this point, I cannot sort the table. There is nothing indicating it can be sorted, and I cannot click the headers.

Is there anything I can look for to help troubleshoot?

Perlkonig · 2017-05-16T12:35:38Z

Check your browser's developer console (I think F12 works in most browsers) and see if there's some sort of JavaScript error or something. If you send me a URL, I'm happy to look.

lgrn · 2017-05-16T12:38:48Z

I can't share the page as it's on an internal network, but I saw this in the console, maybe it's of some use:

jquery.tablesorter.min.js:1 Uncaught ReferenceError: jQuery is not defined
    at jquery.tablesorter.min.js:1
    at jquery.tablesorter.min.js:1
(anonymous) @ jquery.tablesorter.min.js:1
(anonymous) @ jquery.tablesorter.min.js:1
nmap:29 Uncaught ReferenceError: $ is not defined
    at nmap:29
(anonymous) @ nmap:29

Line 29 as referenced in the second error looks like this:

$(function(){$("#tstableid1").tablesorter({"theme":"blue"});})

Perlkonig · 2017-05-16T12:53:44Z

Tablesorter is a jQuery plugin. jQuery must be loaded to function properly. Grav should automatically be loading that.

lgrn · 2017-05-16T13:00:24Z

The default theme indeed does, I switched back to it and can see <script src="/system/assets/jquery/jquery-2.x.min.js" type="text/javascript" ></script>. The table sort works then. However, it seems that jQuery is loaded on a per-theme basis, so with any other theme than the default one you can not assume that it has already been loaded.

I'll leave it up to you to decide where the blame should be here since I don't know enough about Grav, maybe the jQuery base should be loaded on a per-theme basis, or maybe Grav should force it upon every theme, or maybe this plugin should include jQuery (sounds bad).

Thanks for the help!

lgrn · 2017-05-16T13:07:17Z

Here's some more info that may be of use: in the Gantry framework (which my theme uses), you can add your own JS frameworks. However, even when I set the priority to 0 (or 10, it has nothing to compete with) I will still end up with this order in the code:

    <script src="/user/plugins/tablesorter/dist/js/jquery.tablesorter.min.js" type="text/javascript" ></script>
<script src="/system/assets/jquery/jquery-2.x.min.js" type="text/javascript" ></script>
<script src="/user/plugins/highlight/js/highlight.pack.js" type="text/javascript" ></script>

<script>
$(function(){$("#tstableid1").tablesorter({"theme":"blue"});})
$(document).ready(function() {
                    $('pre code').each(function(i, block) {
                        hljs.highlightBlock(block);
                    });
                 });

</script>

(...)
                    </head>

...so if the plugin was a bit more lenient on its placement of the script tag (don't place it at the end of the CSS, place it just before </head> so that it loads last), they would end up in the right order and play nice. I believe that loading jquery.tablesorter.min.js before jquery will always fail.

Just a thought, cheers.

Perlkonig · 2017-05-16T13:19:22Z

Well I hesitate to force load jQuery. I don't want the hassle of different versions and all that. The very top of the documentation makes it clear this is a jQuery plugin.

As for the order, I'll have to look more into it. The plugin uses Grav's own pipelining functions to inject itself, so I don't know what control I have over placement.

Thanks for the info! It will be helpful.

lgrn changed the title ~~Plugin does not work~~ Uncaught ReferenceError: jQuery is not defined May 16, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uncaught ReferenceError: jQuery is not defined #1

Uncaught ReferenceError: jQuery is not defined #1

lgrn commented May 16, 2017

Perlkonig commented May 16, 2017

lgrn commented May 16, 2017 •

edited

Loading

Perlkonig commented May 16, 2017

lgrn commented May 16, 2017 •

edited

Loading

Perlkonig commented May 16, 2017

lgrn commented May 16, 2017

Perlkonig commented May 16, 2017

lgrn commented May 16, 2017

lgrn commented May 16, 2017 •

edited

Loading

Perlkonig commented May 16, 2017

Uncaught ReferenceError: jQuery is not defined #1

Uncaught ReferenceError: jQuery is not defined #1

Comments

lgrn commented May 16, 2017

Perlkonig commented May 16, 2017

lgrn commented May 16, 2017 • edited Loading

Perlkonig commented May 16, 2017

lgrn commented May 16, 2017 • edited Loading

Perlkonig commented May 16, 2017

lgrn commented May 16, 2017

Perlkonig commented May 16, 2017

lgrn commented May 16, 2017

lgrn commented May 16, 2017 • edited Loading

Perlkonig commented May 16, 2017

lgrn commented May 16, 2017 •

edited

Loading

lgrn commented May 16, 2017 •

edited

Loading

lgrn commented May 16, 2017 •

edited

Loading