1

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);
                    })
                }

            });
        })

    });
});
RT7
  • 27
  • 3

1 Answers1

0

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.

Nathan Hawks
  • 557
  • 4
  • 14
  • @ Nathan Hawks -Thanks!! I went with your option 1 and it resolved the pop-up, but now it's loading the first json url object instead of the one associated with the search expression? Could you provide an example of how to reset the value after clicking the open button? I want the user to be able to load several files as they search for kmz's I've created as different layers. – RT7 Dec 31 '19 at 20:40
  • @RT7 You just need to set `ignoreClick = false` at some point in order to reenable the click handler; I've added an example implementation to my answer. – Nathan Hawks Dec 31 '19 at 22:21
  • @ Nathan Hawks after further testing this is retrieving and opening the first url within the JSON file instead of the one listed next to each button. Ideas? – RT7 Jan 07 '20 at 19:15
  • 1
    Apparently `value.url` is the wrong value. But that's far beyond the scope of this question. – Nathan Hawks Jan 07 '20 at 19:19