JQuery not working with electron framework

Question

I'm trying to using jquery with electron framework using electron fiddle. However jquery seems not working properly and animation are not executed. The example is the following: https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_animation1

main.js

// Modules to control application life and create native browser window

const {app, BrowserWindow} = require('electron')

function createWindow () {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  // and load the index.html of the app.
  mainWindow.loadFile('index.html')

  // Open the DevTools.
  // mainWindow.webContents.openDevTools()
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)

// Quit when all windows are closed.
app.on('window-all-closed', function () {
  // On OS X it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', function () {
  // On OS X it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <link rel="stylesheet" type="text/css" href="./styles.css">
<script>window.$ = window.jQuery = require('https://code.jquery.com/jquery-3.3.1.slim.min.js');</script>

<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({left: '250px'});
  });
});
</script> 

  </head>
  <body>
    
<button>Start Animation</button>

<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>

<script>
  // You can also require other files to run in this process
  require('./renderer.js')
</script>

  </body>
</html>

Nothing happens once clicked on the button.

Does this answer your question? [Electron: jQuery is not defined](https://stackoverflow.com/questions/32621988/electron-jquery-is-not-defined) — Joshua, Aug 21 '20 at 09:23

score 2 · Accepted Answer · answered Aug 21 '20 at 04:46

2

Normally you'd install electron via npm install jquery to your node_modules folder and require it inside your renderer.js. So:

window.$ = window.jQuery = require('jquery');

belongs inside the renderer.js. This way you have it locally and yiu are not depndant on an external CDN anymore.

answered Aug 21 '20 at 04:46

Torf

1,154
11
29

Yeah but it needs also to be added in index.html: – Virgula Aug 21 '20 at 07:08
No, it does not. I use jquery in nearly every project - there is no need to add it to your html files. Your `renderer.js` is required in the index.html and renderer.js requires jquery. (to be save I always require it in the very first line) – Torf Aug 21 '20 at 18:28
but I don't know for what reason if I don't add it in index, jquery doesn't work. – Virgula Aug 22 '20 at 07:09
1

I found the error. It works the way I told you, but of course you have to move the `` part with the `document ready` beneath the require of `renderer.js`. Tried it. It works. – Torf Aug 22 '20 at 12:49

score 0 · Answer 2 · answered Jul 15 '22 at 07:49

Well in 2022. This was how I got it working.

Install JQuery

npm install jquery --save

Use the script tag to add jquery to your index.html file. The src should be the path to jquery in your node_modules folder

    <script type="text/javascript" src="../node_modules/jquery/dist/jquery.min.js"></script>

Now JQuery would be available as $ in your renderer process (renderer.js file)

JQuery not working with electron framework

2 Answers2