How can I use jQuery at Electron?

Question

I am building an Electron App which when run the tooltips are coming up plain and not the ones designed for Bootstrap. If I run the HTML below in its own browser it works fine. If I run it inside of an Electron App it does not work, the tooltips come up plain. I have also tried installing them via npm as a solution, which did not work.

I created a minimal project in electron to which I will import below. To test you will need to create a test directory with electron.

Most things are working for Bootstrap under electron, just not the tooltips and popovers.

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

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

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

  // Open the DevTools.
}

// 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.whenReady().then(createWindow)

// Quit when all windows are closed.
app.on('window-all-closed', () => {
  // On macOS 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', () => {
  // On macOS 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()
  }
})

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

{
  "name": "newelectronapp",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^8.2.3"
  }
}

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  
  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>


</head>
<body>
<div class="container">
<h3 class="text-info">Tooltip Demo in all directions</h3>
<br /><br /><br /><br />
<button type="button" id="tooltip-demo" class="btn btn-danger" data-toggle="tooltip" data-placement="left" title="Left">
  Left Demo
</button>
<button type="button" id="tooltip-demo" class="btn btn-success" data-toggle="tooltip" data-placement="bottom" title="A demo of bottom tooltip">
  Bottom Demo
</button>
<button type="button" id="tooltip-demo" class="btn btn-warning" data-toggle="tooltip" data-placement="top" title="A demo of top tooltip">
  Top Demo
</button>
<button type="button" id="tooltip-demo" class="btn btn-primary" data-toggle="tooltip" data-placement="right" title="A demo of right tooltip">
  Right Demo
</button>

</div>

<script>
$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})
</script>
</body>
</html>

Why are you using CDNs instead of installing the dependencies through node? — spring
– spring, Commented Apr 23, 2020 at 19:12
oh... hmm... I must have missed that detail. I did in fact install the dependencies on my end in my project. Installation of these dependencies does not address the issue. I will try the <script> shown below to see if it works. — DaveK
– DaveK, Commented Apr 23, 2020 at 23:15
If the dependencies are installed and why the package.json doesn't contain the dependency information? — tpikachu
– tpikachu, Commented Apr 24, 2020 at 0:51
Does this answer your question? Electron: jQuery is not defined — balexandre
– balexandre, Commented Apr 24, 2020 at 13:50

tpikachu · Accepted Answer · 2020-04-23 19:01:32Z

1

Please install your jquery as dependency

npm install --save jquery

And then at your index.html add this script.

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

You can remove this jquery cdn library then.

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>

answered Apr 23, 2020 at 19:01

tpikachu

4,8522 gold badges22 silver badges46 bronze badges

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

1 Comment

DaveK Over a year ago

I do have these dependencies installed and proper require functions called however I do not have that <script> I can try adding that to see if it works.

Collectives™ on Stack Overflow

How can I use jQuery at Electron?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related