The NWJS documentation states that after opening a window, you have to wait for the loaded event before you can interact with it:
You should wait for the Window’s loaded event before interacting with any of its components.
So I tried to add a loaded event handler for the win object after opening it.
nw.Window.open('test.html', {}, (win) => {
win.showDevTools()
win.addEventListener("loaded", () => {
console.log("NW Window loaded not working...")
})
}
I get the following error:
Uncaught TypeError: win.addEventListener is not a function
How can I listen for NWWindow events in NWJS? Sidenote: I CAN listen for DOM window load events, but that's not the same is it?
nw.Window.open('test.html', options, (win) => {
win.showDevTools()
win.window.addEventListener("load", () => {
console.log("dom window load IS working...")
})
}
There is an example on how to use the Event Listener on the nw.Window:
nw.Window.open('test.html', {}, win => {
win.showDevTools();
win.on("loaded", () => {
console.log("NW Window loaded not working...")
})
}
Example from here, I changed it so that it fits to your problem
Edit: I changed the nw.Window.get() to win
addEventListener is from DOM. Refer https://nodejs.org/api/events.html#events_emitter_addlistener_eventname_listener & then try again. Also console may work as win.window.console here.
Related
I want to store in variable the path of local directory selected using dialog.showOpenDialog.
I tried every tutorial and stack answer without any luck.
Best part is that even the electron-api-demos solution isn't working (I am using one here)
So, dialog opens, I can select a folder or a file - but nothing is send back to renderer process.
Here I am testing this with opening files but also no results.
I am using jquery btw and elcetron v 12.
Here is my code:
Renderer process:
$('.js_select_folder').on('click', (e) =>{
ipcRenderer.send('open-folder')
e.preventDefault();
})
ipcRenderer.on('selected-folder', (event, path) => {
console.log('wtf',path)
$('#info').text('Result :'+path)
})
Main process:
ipcMain.on('open-folder', (event) => {
dialog.showOpenDialog({ properties:['openFile']}, (files) => {
if(files){
console.log(files)
event.reply('selected-folder', files)
}
})
})
No trace of console.log(files) anywhere.
Any ideas what I am doing wrong?
I figured it out:
renderer process:
$('.js_test').on('click', (e)=>{
e.preventDefault();
ipcRenderer.send('open-folder')
})
ipcRenderer.on('sel-dir', (event, path) => {
const message = `This app is located at: ${path}`
$('#info').text(message)
})
main process:
ipcMain.on('open-folder', (event, arg) => {
dialog.showOpenDialog({properties: ['openDirectory']}).then(result=>{
event.sender.send('sel-dir', result.filePaths)
})
})
So it is actually super simple as you can see but took me two days to figure it out.
The result is that I get the path (or any data) back to renderer after choosing dir or file.
Regards, Mac.
Heads up to anyone who is self hosting who also runs across this bug....
In version 5.6.0 silver theme, the dialog urlinput enable/disable works for the input field but not the browse button of the control. The problem is that the enable/disable events are intercepted by the typeaheadBehaviours portion of the internal object so they never make it to the event handlers for the overall field. The fix is to add the onDisabled and onEnabled handlers to the Disabling.config for typeaheadBehaviours and remove the line of code from each handler that addresses the input field.
Original typeaheadBehaviours Disabling.config....
Disabling.config({
disabled: function () {
return spec.disabled || providersBackstage.isDisabled();
}
})
Amended code....
Disabling.config({
disabled: function () {
return spec.disabled || providersBackstage.isDisabled();
},
onDisabled: function (comp) {
memUrlPickerButton.getOpt(comp).each(Disabling.disable);
},
onEnabled: function (comp) {
memUrlPickerButton.getOpt(comp).each(Disabling.enable);
}
})
Haven't been able to figure out how to get those events to bubble up to the the overall control handlers but this seems to make things work as expected.
I'm using the API successfully but encountered an error this morning with "OOPS! Something went wrong" sitting in the textbox and the user cannot type into it. I found the issue to be key related and fixed, however, this brought to light that some issue may arise and the user cannot complete because of this blocking. I'd like to be able to detect in javascript if there is some issue with the google.maps.places.Autocomplete object and not bind it to the textbox.
For anyone else wanting to do this.
Thanks to the folks for the idea over at:
Capturing javascript console.log?
// error filter to capture the google error
(function () {
var oldError = console.error;
console.error = function (message) {
if (message.toLowerCase().includes("google maps api error")) {
document.getElementById('<%=hdnGoogleSelected.ClientID %>').value = "DISABLE";
triggerUpdatePanel();
//alert(message);
}
oldError.apply(console, arguments);
};
})();
Mine is in an update panel so I triggered the update which sets the onfocus back to this.select(); for the textbox which effectively disables the autocomplete attempts.
tbAddress1.Attributes["onfocus"] = "javascript:this.select();";
Another option:
Google will return an error after about 5 seconds from loading.
"gm-err-autocomplete" class indicates any error with the autocomplete component.
You can periodically check for the error class google returns. I do it for 10 seconds after loading:
function checkForGoogleApiErrors() {
var secCounter = 0;
var googleErrorCheckinterval = setInterval(function () {
if (document.getElementById("AddressAutocomplete").classList.contains("gm-err-autocomplete")) {
console.log("error detected");
clearInterval(googleErrorCheckinterval);
}
secCounter++;
if (secCounter === 10){
clearInterval(googleErrorCheckinterval);
}
}, 1000);
}
Assume button A in an HTML5 webapp built with jQuery Mobile.
If someone taps button A, we call foo(). Foo() should get called once even if the user double taps button A.
We tried using event.preventDefault(), but that didn't stop the second tap from invoking foo(). event.stopImmediatePropagation() might work, but it also stops other methods further up the stack and may not lead to clean code maintenance.
Other suggestions? Maintaining a tracking variable seems like an awfully ugly solution and is undesirable.
You can set a flag and check if it's OK to run the foo() function or unbind the event for the time you don't want the user to be able to use it and then re-bind the event handler after a delay (just a couple options).
Here's what I would do. I would use a timeout to exclude the subsequent events:
$(document).delegate('#my-page-id', 'pageinit', function () {
//setup a flag to determine if it's OK to run the event handler
var okFlag = true;
//bind event handler to the element in question for the `click` event
$('#my-button-id').bind('click', function () {
//check to see if the flag is set to `true`, do nothing if it's not
if (okFlag) {
//set the flag to `false` so the event handler will be disabled until the timeout resolves
okFlag = false;
//set a timeout to set the flag back to `true` which enables the event handler once again
//you can change the delay for the timeout to whatever you may need, note that units are in milliseconds
setTimeout(function () {
okFlag = true;
}, 300);
//and now, finally, run your original event handler
foo();
}
});
});
I've created a sample here http://jsfiddle.net/kiliman/kH924/
If you're using <a data-role="button"> type buttons, there is no 'disabled' status, but you can add the appropriate class to give it the disabled look.
In your event handler, check to see if the button has the ui-disabled class, and if so, you can return right away. If it doesn't, add the ui-disabled class, then call foo()
If you want to re-enable the button, simply remove the class.
$(function() {
$('#page').bind('pageinit', function(e, data) {
// initialize page
$('#dofoo').click(function() {
var $btn = $(this),
isDisabled = $btn.hasClass('ui-disabled');
if (isDisabled) {
e.preventDefault();
return;
}
$btn.addClass('ui-disabled');
foo();
});
});
function foo() {
alert('I did foo');
}
});
I'm using the jQuery Tools tooltip plugin, which is initialized with $('selector').tooltip(). I'd like to call this on any current or future .tooltipper element. I figured that the following would work:
$('.tooltipper').live('ready', function(){
$(this).tooltip()
}
But it was unsuccessful---the ready event did not fire. The same for load. I've read that livequery can produce the result of I'm looking for, but surely there is a way to use jQuery .live() to pull it off, considering the documentation says that it works for all jQuery events, of which I believe ready is one.
Quoted from the jQ API (http://api.jquery.com/live/):
In jQuery 1.3.x only the following JavaScript events (in addition to custom events) could be bound with .live(): click, dblclick, keydown, keypress, keyup, mousedown, mousemove, mouseout, mouseover, and mouseup.
As of jQuery 1.4 the .live() method supports custom events as well as all JavaScript events.
As of jQuery 1.4.1 even focus and blur work with live (mapping to the more appropriate, bubbling, events focusin and focusout).
As of jQuery 1.4.1 the hover event can be specified (mapping to "mouseenter mouseleave").
.live() does not appear to support the ready event.
To add to HurnsMobile's excellent answer; Looking at bindReady(), which is the internal call that jQuery makes to bind to the document load event every time you call $(some_function) or $(document).ready(some_function) we see why we cannot bind to "ready":
bindReady: function() {
if ( readyBound ) {
return;
}
readyBound = true;
// Catch cases where $(document).ready() is called after the
// browser event has already occurred.
if ( document.readyState === "complete" ) {
return jQuery.ready();
}
// Mozilla, Opera and webkit nightlies currently support this event
if ( document.addEventListener ) {
// Use the handy event callback
document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
// A fallback to window.onload, that will always work
window.addEventListener( "load", jQuery.ready, false );
// If IE event model is used
} else if ( document.attachEvent ) {
// ensure firing before onload,
// maybe late but safe also for iframes
document.attachEvent("onreadystatechange", DOMContentLoaded);
// A fallback to window.onload, that will always work
window.attachEvent( "onload", jQuery.ready );
// If IE and not a frame
// continually check to see if the document is ready
var toplevel = false;
try {
toplevel = window.frameElement == null;
} catch(e) { //and silently drop any errors
}
// If the document supports the scroll check and we're not in a frame:
if ( document.documentElement.doScroll && toplevel ) {
doScrollCheck();
}
}
}
To sum it up, $(some_function) calls a function which binds to:
DOMContentLoaded
onreadystatechange (DOMContentLoaded)
window.load / onload
Your best bet would be to bind to those actions that might create new .tooltipper elements, rather than trying to listen for the ready event (which happens only once).
HurnsMobile is right. JQuery live does not support the ready-event.
This is why I created a plugin that combines the two. You register your callback once, and then you will need to call the plugin once for content you add manually.
$.liveReady('.tooltipper', function(){
this.tooltip()
});
Then when creating new content:
element.html(somehtml);
element.liveReady();
or
$('<div class="tooltipper">...').appendTo($('body')).liveReady();
A demo is available here: http://cdn.bitbucket.org/larscorneliussen/jquery.liveready/downloads/demo.html
Check out the introductory post here: http://startbigthinksmall.wordpress.com/2011/04/20/announcing-jquery-live-ready-1-0-release/
Also have a look at http://docs.jquery.com/Plugins/livequery, which listenes for changes on the dom.