0

I have a strange situation where jQuery is not loading into the window object. My app is an Electron app. My startup page does in fact load jQuery. But while the startup page is loading, I have some code that decides whether to reload the browser window with a different url. That url is another html page in the app and it contains a reference to the jQuery library in the script tag. jQuery does appear to load in this new page because I am able to open DevTools and type $ in the console and it indicates that it is loaded. However, in my javascript code, which is embedded in the page, the $ is not recognized. I am not loading any other scripts that could conflict with the jQuery script. The jQuery script is the only script loaded. What could be preventing jQuery from being attached to the window object? This only happens when I load that new page using window.location.href. If I don't load that page, but simply use jQuery in the startup page, jQuery is attached to the window object.

Here is how I am loading jQuery:

<head>
    <script type="text/javascript" src="../../jquery/jquery-3.2.1.min.js"></script>
</head>

I have tried waiting for jQuery to load using:

function defer(method) {
    if (window.jQuery) {
        method();
    } else {
        setTimeout(function() { defer(method) }, 50);
    }
}

defer(function () {
    alert("jQuery is now loaded");
});

but window.jQuery never gets set.

Johann
  • 27,536
  • 39
  • 165
  • 279
  • There are not many *details* we can build answers on top of. The code above perfectly works. – Adam Azad Jan 03 '18 at 09:41
  • Maybe this is an issue with Electron?? – Johann Jan 03 '18 at 09:42
  • yes it is, see my answer. – Solver Jan 03 '18 at 09:42
  • Is your second page contained in a sub-folder ? – Serge K. Jan 03 '18 at 09:43
  • Yes it is. But I use sub folders all the time in the app and there is no issue. The page does load. – Johann Jan 03 '18 at 09:44
  • What does it say when you type window.jQuery on the console? Because chrome has window.$ by default. Probably jquery is not being loaded at all. You are just being referred to chrome's inbuilt jquery – Vinod Bhavnani Jan 03 '18 at 09:45
  • Is the relative path correct ? – Serge K. Jan 03 '18 at 09:46
  • @VinodBhavnani "**chrome's inbuilt jquery**" ??? – Serge K. Jan 03 '18 at 09:47
  • Typing window.jQuery doesn't list anything in the console. However, just typing $ in the console does list jQuery. For some reason, it isn't being attached to the window object. – Johann Jan 03 '18 at 09:47
  • So that is the problem. window.$ is provided by chrome. window.jQuery isn't. However if your jquery reference was loaded, window.jQuery should have worked – Vinod Bhavnani Jan 03 '18 at 09:48
  • @SergeK. Although Electron uses Chromium, which is the same as Chrome, it is not the current version of Chrome, so I'm not sure if Chromium 58 has jQuery built in. I doubt it. Besides, loading jQuery in the startup page using the normal script tag works. Why doesn't it work when I reload the page with a different url? – Johann Jan 03 '18 at 09:49
  • 1
    @AndroidDev I was asking Vinod about "chrome's inbuilt jquery", because [I doubt it too](https://stackoverflow.com/questions/11778477/variable-in-chrome). If your second page is in a sub folder, you have to add `../` in the script relative path. – Serge K. Jan 03 '18 at 09:52
  • 1
    As far as I know, the Chromium that electron uses does have a $ in window. I don't think it is jQuery though, just an in-built thing.. – Solver Jan 03 '18 at 09:52
  • @VinodBhavnani window.$ does not exist when I type it in the console. Only if I type $. – Johann Jan 03 '18 at 09:52
  • ah, yes that is correct - took a look at @SergeK. 's link. Also make sure that you fix the relative path on the second page (as also mentioned by SergeK.) – Solver Jan 03 '18 at 09:53
  • @AndroidDev when I type window.$ on a blank chrome tab console, it gives me this `ƒ $(selector, [startNode]) { [Command Line API] }` – Vinod Bhavnani Jan 03 '18 at 09:53
  • @VinodBhavnani take a look at this answer: https://stackoverflow.com/questions/11778477/variable-in-chrome – Solver Jan 03 '18 at 09:55
  • 1
    Possible duplicate of [Electron: jQuery is not defined](https://stackoverflow.com/questions/32621988/electron-jquery-is-not-defined) – Solver Jan 03 '18 at 09:59
  • @SergeK. The second page does load correctly. In DevTools I clearly see that jQuery is loaded. If the path were incorrect, jQuery would not show up in DevTools as part of the sources. – Johann Jan 03 '18 at 10:01
  • @AndroidDev, Solver must be true. – Serge K. Jan 03 '18 at 10:05

1 Answers1

2

In Electron, jquery isn't loaded as a script.

Use this instead (in your header):

<script>window.$ = window.jQuery = require('jquery');</script>

and install jQuery as a package with npm install --save jquery

If that doesn't work, try using

<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>

//put all of scripts here
<script src="path/to/jquery"></script>

<script>if (window.module) module = window.module;</script>

Or you can use:

<script>window.$ = window.jQuery = require('./path/to/jquery');</script>
Solver
  • 618
  • 7
  • 15
  • Actually it is. I have no problem loading jQuery or any script in Electron using the script tag. – Johann Jan 03 '18 at 09:43
  • Sorry, I don't understand. Have you tried this? I'm not sure, but this is what I use in my projects – Solver Jan 03 '18 at 09:43
  • 1
    The second solution works. I'm not sure why this is necessary since my startup page just loads jQuery the normal way with just a script tag. This appears to be an issue with Electron. Thanks. – Johann Jan 03 '18 at 10:21