window is undefined, Document is undefined - Electron

Question

i am working on an application and trying to use mostly jquery, i have tried all the examples online, but i cant seem to get where my error is. please can someone review my code and tell me what i am doing wrong.. heres my code..

const {app, document, BrowserWindow, Menu} = require('electron')
const path = require('path')
const url = require('url')

//define jquery..
window.$ = require('jquery')(window);

  // Keep a global reference of the window object, if you don't, the window will
  // be closed automatically when the JavaScript object is garbage collected.
  let win

  function createWindow () {
    // Create the browser window.
    win = new BrowserWindow({
      name:"AtikuDesk",
      width: 396, 
      height: 356, 
      frame:false,     
      transparent: true,
      toolbar: false
    });

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

    // Open the DevTools.
    win.webContents.openDevTools()

    // Emitted when the window is closed.
    win.on('closed', () => {
      // Dereference the window object, usually you would store windows
      // in an array if your app supports multi windows, this is the time
      // when you should delete the corresponding element.
      win = null
    })
  }

  // 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', () => {
    // 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 (win === null) {
      createWindow()
    }
  })

  menuarr = [
    {
      label:'Home',
      submenu:[
        {label:'About App'},
        {label:'view statistics'},
        {label:'get help'}
      ]
    },
    {
      label:'Exit',
      click(){
         app.quit()
      }

    }

  ];

  var menu = Menu.buildFromTemplate(menuarr);
  Menu.setApplicationMenu(menu);


function clsApp(e){
   app.quit();
}
$('#clsbtn').bind('click', clsApp);

The last function doesnt work, it doesn't work, it displays an error that window is undefined, and when i try using this code either.. without Jquery,

document.querySelector('#clsbtn').addEventListener('click', clsApp)

it keeps telling me that document is undefined. i havent been able to find a suitable solution online, would be glad if someone helps me fix this.

i prefer handling all my events and actions from seperate javascript files and not in the inline script tags on the html pages.

thanks.

It looks like the code is running before the `document` has finished loading. How are you loading the script in your html file? — pushkin, May 30 '18 at 13:04
good observation, how should i load it. because i working with electron here, if it was plain javascript, i would have known what to do... — Ande Caleb, May 30 '18 at 13:10
Looking at your code again, it looks like you're trying to use jQuery in the Main process, which is the wrong approach. You should be using it in the renderer process. `assets/index.html` I take it is your renderer html page. You should load jQuery in *that* page. Is that page where `#clsbtn` is defined? — pushkin, May 30 '18 at 13:15
And see [here](https://stackoverflow.com/questions/32621988/electron-jquery-is-not-defined) for how to load jquery in electron — pushkin, May 30 '18 at 13:17

JeffProd · Answer 1 · 2018-05-30T13:19:47.963

1

Remove this code from the main JS file. Then in index.html :

<script>window.$ = window.jQuery = require('jquery');</script>
<script src="index.js"></script>

And index.js :

function clsApp(e){
   app.quit();
}
$('#clsbtn').bind('click', clsApp);

edited May 30 '18 at 13:19

answered May 30 '18 at 12:33

JeffProd

3,088
1
19
38

i've actually tried this and it didnt work also. but let me do what you said... put the code in the html file. and see.. – Ande Caleb May 30 '18 at 12:57
Uncaught TypeError: $ is not a function at index.html:29 - thats the error i got. – Ande Caleb May 30 '18 at 12:59
I have edited the answer. I guess JQuery must be defined in the HTML, not in the JS. And be sure to have done "npm install jquery". It must be listed in your package.json – JeffProd May 30 '18 at 13:21
1

@Andaeiii Also keep in mind that `app` is really only accessible from the main process. You'd either have to do `const app = require("electron").remote.app` in your `index.js`, or from `clsApp`, send a message to the main process telling *it* to run `app.quit()` – pushkin May 30 '18 at 13:33

window is undefined, Document is undefined - Electron

1 Answers1