Javascript appending onload to a popup window - javascript

I'm trying to append an onload event to a popup window in the following manner:
var explorerWindow = window.open(PARAMS...);
explorerWindow.onload = function() {window.opener.unlockObj(id);}
The idea is to make the button that generates the popup window readonly, making it usable again once the popup window has loaded all of its contents. However, the event doesn't seem to be firing at all. I even changed it to the following and got nothing:
explorerWindow.onload = function() {alert("bloop");}
Is there something terribly wrong with my syntax or am I missing something else entirely? Also, I'm using JQuery if there are any appropriate gems there that will help in this situation. I tried the following with similar results, but I'm not so sure I got the call right:
$(explorerWindow).load(function() {alert("bloop");});
Any help is greatly appreciated.

This won't work in all browsers. I'd suggest putting the onload handler in the document loaded into the new window and have that call out to the original page:
window.onload = function() {
opener.doStuff();
}

I actually managed to get it working in the browsers I have to support with the following:
explorerWindow.onload = new function() { explorerWindow.opener.unlockObj(id); }
Thanks for the reply though Tim.

Related

Something blocks addEventListener(type, handler) to work in DOM

I'm learning Vanilla JS and DOM, and I'm testing some codes in console. I have a question.
Step 1) Navigate to website "http://rehub.wpsoul.com" in chrome.
Step 2) Open a console.
Step 3) Write down below code in console.
var neww = window.open('/')
neww.addEventListener('click', function() {
alert('hi');
})
This code is not working. However, if I change the event type from 'click' to 'scroll', it does work well.
What makes it hinder to work in DOM?
Whenever I tested this code, some websites does not work event type, 'load' like this website.
I've had a headache for this for a few days. I would like to know the reason and principle of DOM and JS.
I need your help, thanks! :)
As you are opening a new window and its DOM is not yet available or ready, the event is not getting bind. Please try following code:
var neww = window.open('/')
neww.addEventListener('load', function() {
neww.document.body.addEventListener('click', function() {
alert('hi');
});
});

Dynamic CFTab onClose event

I simply can't find any real documentation on ColdFusion Layout Tabs. For the most part I've got them working, but I'd like to tie some logic to a close event. I was wondering if anyone had a working example they could show me? The catch is that I will need to trigger these events in JavaScript. But if you have a working version in plain ColdFusion, I'd still love to see it!
var tab = ColdFusion.Layout.getTabLayout("innerTabLayout").activeTab._cf_body;
$('#' + tab).on('close', blah); // doesn't work
tab.on('close', blah) // doesn't work
ColdFusion.Layout.getTabLayout("innerTabLayout").activeTab._cf_body.onTabClose( function(), blah ); //doesn't work
I have also tried setting the event on tab creation:
var tab = ColdFusion.Layout.createTab();
tab.onTabClose()
tab.on('close');
However, none of these work either. I've tried looking at EXT.JS which is what CFtabs were created from, but I don't seem to have any luck there either.
The Coldfusion.Layout object has a function for tab closing, so there must be a way to trigger it! (I would think, haha).
So after spending some too much messing around with the tab, I've got a solution.
ColdFusion.Layout.getTabLayout('innerTabLayout').activeTab.on('close', function(e) {
console.log(this) //this will return the tab object
console.log(e)//this also returns the tab object
});
This will trigger the event when the active tab within a parent is closed. I'm interested to see if there's another, better solution.

Chrome Extension: Handling Clicks

I want to write a little chrome-extension, which does something on clicking on specific buttons on a specific page. The Problem is: How can I implement a click-event in a chrome-extension? I've always used jQuerys selector + on('click', 'element', callbackfunction); ...
Anyone knows how?
Kindly Regards
Don't bother with the hassle of jQuery and just use something like:
document.getElementById('submitButton').addEventListener('click',function(e) {
var _this = e.target; //the submit button
var text = document.getElementById('theForm').getElementsByTagName('textarea')[0].value;
return text!="";
}, false);
You can still use jquery with a chrome extension, but you need to put if out of the html
my_script.js and your version of jquery to the html
and then, in my_script.js:
$(document).ready(function(){
// Your jquery here
});
I'm not sure that the $(document).ready... is required, it depend if you put the script balises in the head or at the end of you body
I hope it will helps you

Greasemonkey addEventListener not firing?

I've looked through various other questions about this and they are all fixed by using addEventListener rather than onclick. My problem now is, the events dont fire at all.
Basically I have an array of elements on my page which are "buttons", I then loop through that with this code:
for (var i = 0; i < buttons.length; i++) {
buttons[i].className = "button";
buttons[i].style.width = "50px";
buttons[i].href = "#";
$(buttons[i]).bind('click',function (e) { alert("Hi"); }); //I have even tried jQuery. This isnt here when the line below is here.
buttons[i].addEventListener('click',function (e) { alert("Hi"); },false);
}
Heck I even tried loading it into a tag it just never works and I am unsure as to why. I have another user script on the same page which is able to bind on to things perfectly fine with the same method.
There is no errors in the console, just nothing happens. However when I make the function self invoke by adding () to the end of it, it runs the code when the page loads resulting in the alerts being shown.
Hmm, this is more about how to debug your greasemonkey code I think. I can't see anything wrong with the code.
I usually have 1 function to throw things to firebug:
function GM_log(element) {
unsafeWindow.console && unsafeWindow.console.log(element);
}
In this case, I'd be curious whether there are any buttons selected, so I'd log the buttons-array, and log something (in stead of an alert) in the click-functions.
Another possibility is to set the userscript in chrome, which allows you to debug the code there (firebug doesn't know the greasemonkey scripts code). But locating/altering the script is harder there, so it's only for when you are really lost.

$(window).load(function()-how it works with FF

I have a jquery code.
$(window).load(function() {
document.title = $("#myid").text(); //not working in FF
});
Here I have used $(window).load(function() because in the #myid I am getting value through another javascript, if I use ready(), its giving me error. so I am first loading the window then start reading value.
Now in IE, after the window loads itself , I am getting the value of document.title,
but for FF its coming as blank.undefined.
Why? any idea or alternate sln.
It might be a rendering/timing issue.
How are you setting the #myid text? Im assuming you are running this code on page load?
Personaly on another note, i like to use the shorthand version of jQuery DOM ready, this might also fix your problem too.
jQuery(function(){
document.title = jQuery("#myid").text();
});
And i would make sure that you call it at the end of the body or ideally in the head tag.
I think it is possible that firefox triggers ready and load at the same time when it loads quickly (localhost, small experiment page with one div, etc.)
Why not put the title setting in the ready function right after getting it? If You put it in a div, You can put it in the title too.
I didn't check this code and it isn't a good way, but maybe it help you...
If your code isn't working in Firefox only, you can check browser by Javascript and execute my code for Firefox only.
<script type="text/javascript">
var timerId = 0;
function checkElement() {
// If don't work: try .html() or $("#myid").text() != undefined or smth like this
if($("#myid").text()) {
document.title = $("#myid").text();
clearInterval(timerId);
}
}
$(document).ready(function() {
timerId = setInterval('checkElement()', 500);
});
</script>

Categories