I have popup in which I need to update the data inside it in reactively. What function or event is needed to track when a popup closes?
Currently my code structure is as follows:
let BG = browser.extension.getBackgroundPage();
let timer = BG.timer;
function updatePageTime(secondsElapsed) {
const content = document.getElementById("content");
content.innerHTML = "Current Time Spent: " + timer.getTimeElapsed();
}
document.addEventListener("DOMContentLoaded", function () {
timer.subscribe(updatePageTime);
});
document.addEventListener("unload", function () {
timer.unsubscribe(updatePageTime);
});
The problem is that unload and beforeunload do not trigger on popup closes, thus I am unable to stop updates to a non-existant DOM.
Unfortunately I did not see that unload is defined on window and not document. Simply changing the document.addEventListener("unload" to window.addEventListener("unload" fixes the problem.
Related
I have below line of code which simply places a link on the parent page:
<caps:msg textId="createNews"/>
Onclick of the above link 2 functions are getting called:
###func1():
var timestamp;
function func1() {
timestamp = +new Date();
return false;
}
###func2():
function func2(param1,param2,param3,param4){
var win;
var location = window.location.href; // location A
var encodeStringVar = encodeString(param3);
win = window.open(param1+'/struts1.action?param2='+param2+'¶m3='+ escape(encodeStringVar) +'#'+param4,target='t1','toolbar=no,scrollbars=yes,menubar=no,location=no,width=990,height=630, top=100, left=100');
window.location.href = location; // location A
return win;
}
On click of link on parent page, a popup opens by calling struts action, and it works just fine. Only problem is when the link on parent page is clicked, it refreshes the parent page. I don't want it to refresh and I tried adding return false in the link and Javascript void() function, Also I tried by adding an event listener for click event on this link as below:
$(document).ready(function() {
$("#createNewsLink").click(function(event) {
//return false;
event.preventDefault();
})
})
and below:
$(document).ready(function() {
document.getElementById("createNewsLink").addEventListener("click", function(event) {
event.preventDefault();
});
})
But none of these did the trick, can someone please point out the mistake in my code?
Could you consider to try :
(function(){
var linkElement = document.querySelector('#createNewsLink');
linkElement.addEventListener('click',function(e) {
var param1 = e.target.getAttribute('attr-param1');
var param2 = e.target.getAttribute('attr-param2');
console.log(param1,param2);
// Do what ever you want here.
e.preventDefault();
});
})();
Click me
Here i avoid any Event binding from html, and centralize all traitment / binding in one place. Then i point one way to find back mandatory params for your traitment.
I have a clickable image that when you click a modal popup appears. I want to make sure you can only click it once and while the popup is showing, the clickable image is unclickable. I've tried several methods but no solution works as I want it to.
Here is the code:
init: function () {
var myButton = document.getElementById("kaffePic");
var clickable = true;
console.log(clickable);
myButton.onclick = function(e) {
e.preventDefault();
console.log(clickable);
if(clickable)
{
clickable = false;
popup(myButton, clickable);
}
else
{
return false;
}
};
}
And here is a part of the popup window (removed some code that has nothing to do with the issue).
function popup(theButton, returnClick) {
var myDiv = document.createElement("div");
myDiv.className = "popupWindow";
var newButton = document.createElement('a');
var image = document.createElement('img');
image.src = 'img/theclosebutton.png';
image.className = "popupImage";
newButton.appendChild(image);
myDiv.appendChild(newButton);
newButton.onclick = function () {
document.body.removeChild(myDiv);
returnClick = true;
};
}
Right now I can click it once, and then never again.
Any suggestions?
it's called only once because clickable is set to false after the first click. i suspect you are trying to set it to true in your popup-method by calling returnClick = true; but all that does is setting your argument-value, not the actual clickable-variable itself.
right now, clickable is a variable in the scope of init, so popup can't access it. you could, for example, make clickable a var in the scope of init's parent object. then in popup, you'd access clickable by parentObject.clickable.
//illustration of my example
parentObject {
var clickable,
function init()
}
function popup() {
...
parentObject.clickable = true;
}
Check .one() event handler attachment of jquery and this the .one() of jquery is used to Attach a handler to an event for the elements. The handler is executed at most once per element per event type. second one is link to an stack overflow questions about resetting the .one().Hope this helps
I have a link that when clicked, opens a new window using:
var win = window.open(url,....);
This window contains a flash game.
I want to close the window after 20 minutes of inactivity.
I know I can create a timeout using:
var t = setTimeout("dosomething()", 5000)
But how can I figure out if there was activity or not on the popup?
If the user interacts with the flash, can I get this information still via the dom events?
I want to avoid the situation of closing the window while they are playing :)
This is in a IE based environment.
theInterval = 0;
function doSomething(){
do something;
}
function ScheduleDoSomething(){
theInterval = setInterval(function () {
doSomething();}, timeToClose);
}
jQuery(document).keydown(function (e) {
clearInterval(theInterval);scheduleDoSomething();
});
I hope this helps.
How about adding a listening event for the mousemove, keypress, and click events and clearing the timer every time the events happen.
var t = setTimeout(closeWindow, 5000);
$(document).on('mousemove keypress click', function(){
clearTimeout(t);
t = setTimeout(closeWindow, 5000);
});
function closeWindow(){
window.close();
}
According to the documentation (I'm only using Firefox) :
https://developer.mozilla.org/en/DOM/window.onunload
The unload event is raised when the
document is unloaded.
But my code below would trigger the alert even though the child window (i.e. variable name "win") has just been opened, not closed.
alert("failed but still reload:" + win.isSuccess);
"failed but still reload: undefined"
My attention is to invoke that onunload when the child window is closed. What am I doing wrong here??
Code
function showInsertPopup() {
var ddId = document.getElementById("workRegionDropdown");
var index = ddId.selectedIndex;
var workRegionCode = ddId.options[index].value;
if(workRegionCode != "") {
var win = window.open(machineFormPopup + "?typeFlag=1&workRegionCode=" + workRegionCode, "window1", "menubar=no, width=700, height=550, toolbar=no");
win.onunload = function() {
if(win.isSuccess) {
alert("success reload!")
getRecordByWorkRegion();
}
else {
//here gets print out somehow
alert("failed but still reload:" + win.isSuccess);
getRecordByWorkRegion();
}
}//end inner function onunload
}
}//end showInsertPopup()
Child window page has just simple js:
window.isSuccess = 1;
window.close();
You actually see the unload for the original about:blank document in the popup window first. (You can verify this by looking at the window's location.) You should then see another unload when the popup window closes.
Using JavaScript
i have the refresh button in my parent window,
when i click refresh button ,
i want to refresh my child window ,
window.location.href='add_billing_order_frm.php?session_re_genrate=new
This snippet redirecting the page instead refresh ,
I thing there is a snippet like
opener.document.location.reload(true);
but this one for parent window refresh, but i want for child window wiht URL location option
function show_billing_order_form(url){
var childWindow = window.open(url);
}
function refresh_my_child_window(){
return childWindow.location.reload('add_billing_order_frm.php');
}
To open a popup window(child window) , i used this show_billing_order_form call back ,
To refresh the child window , i add one refresh icon in my parent window , To refresh the child window , in that refresh icon onclick i called refresh_my_child_window ,
but function refreshing my child window..
When opening your child window from the parent, remember the return value in a variable somewhere:
var childWindow = window.open(/* ... */);
...and when you want to refresh the child:
childWindow.location.reload();
Note that some browsers will prevent access to childWindow.location.reload if the parent and child aren't loaded from the same origin.
Here's a quick-and-dirty example (live copy — note: the live copy only works in non-edit mode, like the link given, because otherwise JSBin uses null.jsbin.com instead of output.jsbin.com and so the origin doesn't match):
HTML:
<input type='button' id='btnOpen' value='Open Child'>
<input type='button' id='btnClose' value='Close Child'>
<input type='button' id='btnRefresh' value='Refresh Child'>
JavaScript:
(function() {
var childWindow;
document.getElementById('btnOpen').onclick = openChildWindow;
document.getElementById('btnClose').onclick = closeChildWindow;
document.getElementById('btnRefresh').onclick = refreshChildWindow;
function openChildWindow() {
if (childWindow) {
alert("We already have one open.");
} else {
childWindow = window.open(location.protocol + "//" + location.host + "/cotokijigu/1");
}
}
function closeChildWindow() {
if (!childWindow) {
alert("There is no child window open.");
}
else {
childWindow.close();
childWindow = undefined;
}
}
function refreshChildWindow() {
if (!childWindow) {
alert("There is no child window open.");
} else {
childWindow.location.reload();
}
}
})();
Caveat: I would never recommend hooking up event handlers with onclick properties as above. Instead, I'd use addEventListener (on standards-based browsers) or attachEvent (on IE), by using a library or a utility function like this one. Used the properties above to avoid obscuring the main point.
var childWindow = window.open("","name",/* .. */);
childWindow.location.reload();