html中opendialog方法,javascript - showOpenDialog() refreshes window - Stack Overflow

So, I'm writing an electron app and at some point I will need a pathname.

On my renderer thread (using jQuery), I have this code:

$("#button-that-you-click-for-dialog").click(() => {

electron.remote.dialog.showOpenDialog({properties:["openDirectory"]});

});

It works great in the sense that the dialog appears exactly how I would expect - however when the dialog closes (OK or Cancel), the page reloads, resetting other values in the form. I for the life of me cannot figure out why this would happen. Here's what I've got platform-wise:

Ubuntu 17.04 with Gnome3

Electron 1.7.5/Chrome 58.0.3029.110

Node 8.5.0

For the record, I am not even caring that I have nothing passing back the value as of yet - I'll get to that once I fix this refreshy bug.

I'm thinking that's plenty of info, but if I'm missing something let me know

update: I added a callback to log my filepath returned, but now the window refreshes as the dialog opens, not when it closes, which means upon trying to close and console.log the results, it says that the resource has been closed or released (presumably because the window refreshed) Code I'm using now:

const electron = require("electron");

$("#dir").click((event) => {

electron.remote.dialog.showOpenDialog({

properties:["openDirectory"]

}, (filepaths) => {console.log(filepaths);});

})

2nd update: I've tried Siddhesh's code and it works great. Now I need to figure out what part of my index.html is triggering a refresh (and, as it turns out, a WebGL console message on my IDE that's running electron)

Here's the full code:

Index.html:

BookRipper

New Book

Sample Text

Title

Author

Year

Number of disks

Folder

Folder

type="button"

class="btn btn-link"

data-toggle="collapse"

data-target="#advanced"

οnclick="$('#advanced').toggleClass('show'); $('#advanced-icon').toggleClass('fa-plus').toggleClass('fa-minus');">

class="fa fa-plus mr-2"

id="advanced-icon">

Advanced Settings

Bitrate

kbps

index.js:

$ = require('jquery');

$(document).ready(function () {

$("#book-title").keydown(copyTitle).keyup(copyTitle);

function copyTitle() {

document.title = this.value ? this.value : "BookRipper";

$("#title").text(!this.value?"New Book":this.value);

}

const electron = require("electron");

$("#dir").click((event) => {

electron.remote.dialog.showOpenDialog({properties:["openDirectory"]}, (filepaths) => {console.log(filepaths)});

})

});