showOpenDialog() refreshes window

1
votes

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:

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="../common/jquery.min.js"></script>
    <meta charset="UTF-8">
    <title>BookRipper</title>
    <link rel="stylesheet" href="../common/bootstrap.min.css"/>
    <link rel="stylesheet" href="../common/bootstrap-grid.min.css"/>
    <link rel="stylesheet" href="../common/bootstrap-reboot.min.css"/>
    <link rel="stylesheet" href="../common/css/font-awesome.min.css" />
    <link rel="stylesheet" href="index.css"/>
    <script src="../common/bootstrap.min.js"></script>
    <script src="index.js" type="application/javascript"></script>
</head>
<body>

<div class="jumbotron">
    <h3 class="display-4" id="title">New Book</h3>
</div>
<footer class="footer clearfix">
    <div class="container">
        Sample Text
    </div>
</footer>
<div class="container">
    <form>
        <div class="row mb-2">
            <div class="col-sm-3 col-md-2 col-lg-1">
                <label for="book-title" class="mt-sm-2">Title</label>
            </div>
            <div class="col">
                <input id="book-title" class="form-control"/>
            </div>
        </div>
        <div class="row mb-2">
            <div class="col-sm-3 col-md-2 col-lg-1">
                <label for="book-author" class="mt-sm-2">Author</label>
            </div>
            <div class="col">
                <input id="book-author" class="form-control"/>
            </div>
        </div>
        <div class="row mb-2">
            <div class="col-sm-3 col-md-2 col-lg-1">
                <label for="book-year" class="mt-sm-2">Year</label>
            </div>
            <div class="col">
                <input type="number" id="book-year" class="form-control" value="2000" />
            </div>
        </div>
        <div class="row mb-2">
            <div class="col-sm-3 col-md-2 col-lg-1">
                <label for="book-n" class="mt-sm-2">Number of disks</label>
            </div>
            <div class="col">
                <input type="number" id="book-n" class="form-control" value="1"/>
            </div>
        </div>
        <div class="row mb-2">
            <div class="col-sm-3 col-md-2 col-lg-1">
                <label for="dir" class="mt-sm-2">Folder</label>
            </div>
            <div class="col">
                <!-- |||||| This is the button in question |||||| -->
                <button id="dir" class="btn">Folder</button>
            </div>
        </div>
        <div class="row mb-2">
            <button
                    type="button"
                    class="btn btn-link"
                    data-toggle="collapse"
                    data-target="#advanced"
                    onclick="$('#advanced').toggleClass('show'); $('#advanced-icon').toggleClass('fa-plus').toggleClass('fa-minus');">
                <i
                        class="fa fa-plus mr-2"
                        id="advanced-icon">
                </i>
                Advanced Settings
            </button>
        </div>
        <div class="collapse" id="advanced">
            <div class="row mb-2">
                <div class="col-sm-3 col-md-2 col-lg-1">
                    <label for="bitrate" class="mt-sm-2">Bitrate</label>
                </div>
                <div class="col">
                    <div class="input-group">
                        <input type="number" id="bitrate" class="form-control" value="24" min="16" max="256" step="4" />
                        <span class="input-group-addon">kbps</span>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

</body>
</html>

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)});
    })
});
2
javascripthtmlnode.jselectron

2 Answers

3
votes

Hot dang. I finally found it. My issue was that the button that was clicked-its type was not specified. I assume that means it was defaulting to "submit" or "reset". When I set it to "button", it quit refreshing for me and I'm able to go on my merry way.

1
votes

The resetting of the form/ reloading of page is not triggered by electron implicitly.

Some part of your code might be triggering it explicitly, like $("#myForm")[0].reset() or something else.

Try creating a new HTML page and just render the code below. This works fine for me without resetting the form. If your problem still persists, try pasting your complete code.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js" onload="window.$ = window.jQuery = module.exports;"></script>

<script>
    const {dialog} = require("electron").remote

    $(document).ready(function(){    

        $("#btn1").click((event) => {
            dialog.showOpenDialog({ properties:["openDirectory"] }, 
            (paths) => console.log(paths));
        });
    });

</script>

</head>

<body>

    <form action="" id="myForm">
        <input type="text" id="inp1">
        <input type="text" id="inp2">
        <input type="text" id="inp3">
    </form>

    <button id="btn1">Get Path</button>

</body>
</html>