Electron - another program is using this file?

Question

I created a search bar that searches JSON and displays the info in html with an "open link" button. The files are local kmz/kml files that are opened up in Google Earth when a user clicks the button.

Why when I click the open button does Google Earth load it and then I receive a pop-up in my app that says "Another program is currently using this file" and then won't clear till i restart the app?

$(document).ready(function() {
    $('#myInput').keyup(function() {
        $('#aceCategory').html('');
        var searchField = $('#myInput').val();
        var expression = new RegExp(searchField, "i");
        $.getJSON('jsoncleanmaster.json', function(data) {
            $.each(data, function(key, value) {
                if (value.category.search(expression) != -1 ||
                    value.name.search(expression) != -1 ||
                    value.desc.search(expression) != -1 ||
                    value.url.search(expression) != -1) {
                    $('#aceCategory').append("<tr>" + "<td>" + "<b>" +
                        value.name + "---" + "(" + value.category + ")" + "</b>" + "<br>" +
                        value.desc + "</br>" + "<input type='button' id='openBtn1' style='border-radius: 25px; outline: none' value='Open Link'  >" +
                        "</td>" + "</tr")
                    const shell = require('electron').shell;
                    $(document).on("click", "#openBtn1", function(event) {
                        shell.openItem(value.url);
                    })
                }

            });
        })

    });
});

Answer 1

It's possible your click event is firing multiple times. If so, one possible solution can be found at jQuery click events firing multiple times However quick that answer is, it's also a little bit more work to reverse, if you intend to re-enable the button later.

Another couple options: set and check a variable, or just disable the button.

Option 1: set and check a var

In your application vars, at the top of your main entry point:

var ignoreClick = false;

Then in your click handler:

$(document).on("click", "#openBtn1", function(event) {
  if (ignoreClick) return;
  ignoreClick = true;
  shell.openItem(value.url);
})

Option 2: disable the button:

$(document).on("click", "#openBtn1", function(event) {
  $('#openBtn1').attr('disabled', true);
  shell.openItem(value.url);
})

Re-enabling the click-handler

Either way you will also have to decide by what logic the button gets re-enabled (or the ignoreClick variable gets reset to false). One possible example of doing this (expanding on Option 1 above) is to set a short (one second) timer:

$(document).on("click", "#openBtn1", function(event) {
  if (ignoreClick) return;
  ignoreClick = true;
  shell.openItem(value.url);
  setTimeout(() => { ignoreClick = false; }, 1000);
})

You can play around with that number at the end of the setTimeout line; it's in milliseconds, aka 1000 = 1 second. A half second or even less might suffice, albeit this is only a general/example solution.