We Keep Coding

Add popup based on class (most likely)

I'm trying to use Tampermonkey to add a popup on pages in the Canvas LMS. It's a forum, and after each post there is a "Reply" option, which is what I want to add the popup to. But when I click the "Reply" link, no popup appears. It opens the Reply box, as normal, but my popup is nowhere to be seen.
The code looks roughly like this:
<div class="entry-controls hide-if-collapsed hide-if-replying">
<div class="notification" data-bind="notification"></div>
<a role="button" class="discussion-reply-action entry-control" data-event="addReply" href="#">
<i class="icon-replied"></i>
<span aria-hidden="true">Reply</span>
<span class="screenreader-only">Reply to Comment</span>
</a>
</div>
The JS code I'm trying to add is:
document.querySelectorAll('.discussion-reply-action').forEach(item => {
item.addEventListener('click', event => {
alert("Popup text here");
})
})
In addition to .discussion-reply-action, I've tried using .entry-controls, .notification, .entry-control, even stuff like span[aria-hidden="true"]. Nothing seems to work.
I know the Tampermonkey script itself is applying correctly, because it has other functionality that is showing up as usual.
Any idea why this bit isn't working for me? I'm a complete JS noob, for what that's worth.

This got answered in the replies, but just wanted to formally note that it came down to delaying my code injection. I was trying to attach to elements that loaded after the doc. Once I got behind them, it worked fine.

Malformed Html, function in onclick

I'm struggling to find workaround with GAS.
This very simple, work perfectly fine in this snippet or in any html tool.
<a href="#" onclick=dummyFunc(foo)>OK</a>
<a href="#" onclick=dummyFunc("param")>not OK</a>
But google app script dont reconize the seconde line like valid html. If you put it in HtmlService.createHtmlOutput() or any other function that create html from the HtmlService it will raise Exception: Malformed HTML content.
EDIT
The only way I find to make it work is using:
<script>var param="param";</script>
<a href="#" onclick=dummyFunc(param)>OK</a>
Thank for you help. Have a great day.

Indeed, your html is not valid.
Here's the right way :
OK

Watir Random Popup

High all, I'm testing this e-commerce and I get this random popup (it's a div)that gets in the way of my scripts, given its random appereance I can't relly predict when it's going to show, otherwise I can easily interact with it, as it is a simple div, whenever I see it. It's there a way that can I catch this popup and do as I please whenever it dares to show? Thanks in advance
<div class="fsrFloatingMid"><div class="fsrInvite">
<div class="fsrDialogs">
<div style="margin-left: 0px;" class="fsrDialog ">
<div class="fsrLogos">
<img src="/_ui/desktop/common/foresee/sitelogo.gif" alt="" class="fsrSiteLogo">
<img src="/_ui/desktop/common/foresee/fsrlogo.gif" alt="Foresee" class="fsrCorpLogo">
</div>
<h1 class="fsrHeading">We'd welcome your feedback!</h1>
<p class="fsrBlurb">Some bullshit text</p>
<p class="fsrSubBlurb">The survey is designed to measure your entire experience, please look for it at the <u>conclusion</u> of your visit.</p>
<p class="fsrAttribution">This survey is conducted by an independent company, on behalf of the site you are visiting.</p>
<div style="" class="fsrB">
<div class="fsrAcceptButtonContainer">
Yes, I'll give feedback<span class="hidden-accessible"> (this will launch a new window)</span>
</div>
<div class="fsrDeclineButtonContainer">No, thanks
</div>
</div>
<div class="fsrFooter">
<img src="/_ui/desktop/common/foresee/truste.png" alt="TRUSTe verified" class="fsrTruste">
</div>
</div>
</div>
×<span class="hidden-accessible">Click to close.</span>

If this pop-up appears randomly then I think using the "protection proxy" design pattern would help most. The purpose of it is to execute a particular piece of code, in our example this:
if browser.div(class: 'fsrDialogs').exists?
browser.a(class: 'fsrCloseBtn').click
end
BEFORE any method on the "subject" ("subject" is the object we wrap inside the Proxy class, in our case it's the browser) is called. The Proxy design pattern is pretty straightforward to implement in Ruby, here's how we'd do it in your particular case:
class WatirProxy
attr_reader :subject
def initialize(browser)
#subject = browser
end
def method_missing(method, *args)
puts "I am executing the code below before calling #{method} with args #{args}"
if subject.div(class: 'fsrDialogs').exists?
subject.a(class: 'fsrCloseBtn').click
end
subject.send(method, *args)
end
end
You can remove the puts below method_missing in production, however, I'd recommend you keep it for now if you're not 100% clear on how the code below works.
Let's try playing with it:
browser = WatirProxy.new(Watir::Browser.new(:chrome)) # you can use ANY method on browser, although it's wrapped in a proxy
browser.goto 'https://google.com'
puts browser.text_field(name: 'q').exists?
Ruby should output:
I am executing the code below before calling goto with args ["https://google.com"]
I am executing the code below before calling text_field with args [{:name=>"q"}]
true # May change if google search box 'name' attribute changed to something other than 'q' in the future
In your specific case, this pop-up is raising errors because the browser didn't expect it, now we make sure there's a check BEFORE ANY method on browser is called. A great book for reading about the Proxy design pattern (and some other useful ones in Ruby) is Design Patterns in Ruby by Russ Olsen.

#browser.link(class: "fsrCloseBtn").click if #browser.h1(class: "hsrHeading").visible?
Something like this should be enough. Obviously, sub whatever you name your WebDriver instance for #browser. This clicks the close link if the dialog is visible and skips this step if the dialog is not there. My syntax might be a little wrong, so double check that. I'm used to wrapping all this in page-object, which would look like:
page_class.close_dialog if page_class.dialog_header_element.visible?

Had same issue with Foresee survey, I got around it by adding
while browser.text.include?("We'd welcome your feedback!") == false do
browser.refresh
sleep 1
end
browser.link(:class => /declineButton/).click
end
to the first step after going to the page. It's not the best option but it deals with the Foresee because once you close the window you get a fsr cookie that prevents the survey from popping up again during that browser session. The "sleep 1" was added so chrome would slow down and look for the Foresee survey. Hope it helps.

Fancybox 2.1.3 indirectly called from iframe returns 'The requested content cannot be loaded. Please try again later.'

I am struggling with setting up the latest fancybox. I manage to call fancybox from an iframe to open on the main-page, but it does not seem to find the content.
So, I have the following setup:
main-page:
Opens iframes and contains javascript functions to display an image in the fancybox.
For testing purposes I do not call the function with any arguments yet and I use hardcoded images, till I get it working. So the javascript functions looks like this:
$jj = jQuery.noConflict();
function triggerFancybox(){
$jj(".triggerid").trigger("click");
alert("Fancybox triggered!");}
function callMe(){
$jj(".triggerid").fancybox('images/showroom/playground/displaced/dispm_6.jpg' , {'type' : 'image'});
triggerFancybox();}
function callMe1(){
$jj(".triggerid").fancybox('http://demo.artonbit.com/images/showroom/playground/displaced/dispm_6.jpg' , {'type' : 'image'});
triggerFancybox();}
function callMe2(){
$jj(".triggerid").fancybox('http://demo.artonbit.com/images/showroom/playground/displaced/dispm_6.jpg');
triggerFancybox();}
The main-page also contains a dummy element, which I use to open the fancybox content:
<!-- This id can be called by an iframe for the fancybox>
iframe:
The iframe currently only contains an onclick trigger, here are the latest attempts:
<p><a class="fancyframe" rel="group" href="images/showroom/playground/displaced/dispm_6.jpg" onclick="parent.callMe();return false;"><img style="float: left;" alt="PXM Commercial Shot1" src="images/showroom/playground/displaced/dispm_6.jpg" height="135" width="240" /> </a>
</p>
<p><a class="fancyframe" rel="group" href="images/showroom/playground/displaced/Disp_7b1.jpg" onclick="parent.callMe1();return false;"><img style="float: left;" alt="PXM Commercial Shot1" src="images/showroom/playground/displaced/dispm_6.jpg" height="135" width="240" /> </a>
</p>
<p><a class="fancyframe" rel="group" href="images/showroom/playground/displaced/dispm_9.jpg" onclick="parent.callMe2();return false;"><img style="float: left;" alt="PXM Commercial Shot1" src="images/showroom/playground/displaced/dispm_6.jpg" height="135" width="240" /> </a>
</p>
<p>Another Test
So, the fancybox gets triggered, but it can't find the content. I tried many different ways of calling fancybox, but I always end up with the error message from the title.
The image references are correct. All the libraries necessary, should be included. I tested this with an id as target and currently I am using a class (as somewhere suggested in the Fancybox FAQ).
What do I miss?
I first implemented this with the older fancybox 1.3.4, which worked fine.
You can find a running demo of the problem at this address:
http://demo.artonbit.com
Once you are on the front-page, just click the most top-left tile (Displaced!), which will open an iframe containing some text and three thumbnails. These are the triggers for the fancybox. They succesfully call the "callMe" methods, but then fancybox fails to find the content.

First thing I checked was your site and the scripts you loaded, so I think that you only need a single instance of jQuery rather than complicate yourself with two different versions and namespaces ..... anyway.
Now your code, it doesn't have the proper format because you either :
1) Bind fancybox to a selector (a class for instance) like :
$(".selector").fancybox({
// API options
});
2) Call fancybox manually
$.fancybox([
href: 'images/showroom/playground/displaced/dispm_6.jpg'
],{
// API options
type: "image"
});
... but not :
$(".triggerid").fancybox('images/showroom/playground/displaced/dispm_6.jpg', {
// API options
'type' : 'image'
});
... which is a mix of the two above.
In your particular case, you just need to change inside your functions the fancybox script to the proper format like :
function callMe(){
$(".triggerid").fancybox({
href: 'http://demo.artonbit.com/images/showroom/playground/displaced/dispm_6.jpg'
});
triggerFancybox();
}
... or use your namespace $jj
NOTE : since the href has an image extension you don't actually need to specify type: "image"
Seeing is believing ...JSFIDDLE

How to auto-translate a section using google translate tools?

This is more like a auto-click link problem. But my problem is this link is generate by google's script.
http://translate.google.com/translate_tools
If you choose "translate a section" , there will be a link generate inside the goog-trans-control class
Original script:
<div class="goog-trans-section">
<div class="goog-trans-control">
</div>
Original Text here.
</div>
Script code after execute (Check Component):
<div class="goog-trans-section">
<div class="goog-trans-control">
<div class="skiptranslate goog-te-sectional-gadget-link" style="">
<div id=":1.gadgetLink">
<a class="goog-te-gadget-link" href="javascript:void(0)">
<span class="goog-te-sectional-gadget-link-text">Translate</span>
</a>
</div>
</div>
</div>
Original Text here.
</div>
How would I auto-click (or execute) the Translate link after this page is totally loaded?
For some reason, jsfiddle is not working with my script, though I still post this for your convenience.
http://jsfiddle.net/Wb7tE/
Really appreciate for your time and help.
Edited:
I tried Google translate API, but there is a limitation of 5000 words at a time.
My translations include whole html with tables and scripts, so it reach the limit with no exception.

I have a similar problem, and I solved it temporally like this
google_initialized = false;
function google_auto_translate()
{
if(google_initialized)
{
$('a.goog-te-gadget-link')[0].click();
}
else if(google.translate)
{
google_initialized = true;
setTimeout(google_auto_translate, 500);
}
else
setTimeout(google_auto_translate, 100);
}
window.onload = google_auto_translate;
but on slower connection, in 50 % of time google doesn't load on time, and script already clicks before loading is done. So if anyone know any other way to do this, via some events or something similar please add it here...
P.S. Don't use Google Translation API it's Deprecated and will be removed till the end of this year.