0

I am trying to make it so that when i press a button, a modal appears. However, I am having trouble as it is not working in my java script file functionality. I already got the html and css parts down, but I am unsure how to make the javascript work. I started to wonder if this electron js thing is different from the usual javascript thing.

Javascript:

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

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

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


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

  var menu = Menu.buildFromTemplate([
      {
          label: "Menu",
          submenu: [
              {label: 'Exit',
                accelerator: process.platform == 'darwin' ? 'Command+Q' :
                'Ctrl+Q',
                click(){
                    app.quit();
                }
            }
          ]
      },
      {
          label: 'Classes',
          submenu: [
              {label: 'Add Classes'},
              {label: 'Manage Classes'}
          ]
      },
      {
          label: 'Reply Slips',
          submenu: [
              {label: 'Add Reply Slips'},
              {label: 'Manage Reply Slips'}
          ]
      }
  ])
  Menu.setApplicationMenu(menu);
}

// 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.
Kenser Nut
  • 11
  • 1
  • 4
  • I think you just need to put your js code in your index.html like a normal page and it should work. Did you get any problem? – IFZR Feb 25 '20 at 03:02
  • Oof did not really work. I followed this video but the javascript part did not work for me. Either it did not realize document.querySelector or when it has no errors, then it won't work anyways https://www.youtube.com/watch?v=gLWIYk0Sd38 – Kenser Nut Feb 25 '20 at 03:07
  • Oh sorry, I found that it can't load jquery, bootstrap script normally. But I found the solution in another question, see my answer below. – IFZR Feb 25 '20 at 03:29

1 Answers1

0

I found the solution in this question: Electron: jQuery is not defined

You just need to copy that and replace with your js.

Example:

index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="bootstrap.min.css">
</head>

<body>
    <!-- Trigger the modal with a button -->
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

    <!-- Modal -->
    <div id="myModal" class="modal fade" role="dialog">
        <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Modal Header</h4>
                </div>
                <div class="modal-body">
                    <p>Some text in the modal.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>

        </div>
    </div>
</body>

<!-- Insert this line above script imports  -->
<script>
    if (typeof module === 'object') {
        window.module = module;
        module = undefined;
    }
</script>

<!-- normal script imports etc  -->
<script src="jquery-3.4.1.js"></script>
<script src="bootstrap.min.js"></script>

<!-- Insert this line after script imports -->
<script>
    if (window.module) module = window.module;
</script>

</html>
IFZR
  • 316
  • 1
  • 12