I'm a beginner is learning how to code for Tampermonkey.
I know how to click an automated clicking using a class tag or id tag.
But is there anywhere to automate a clicking based on data info such as data-id, name or image URL?
The HTML is like:
<div class="yellow-bot" data-image="//imgurl1.gif" data-id="123" data-name="Image1">...</div>
<div class="yellow-bot" data-image="//imgurl2.gif" data-id="124" data-name="Image2">...</div>
<div class="yellow-bot" data-image="//imgurl3.gif" data-id="125" data-name="Image3">...</div>
...
...
...
<div class="submitButton">
<input id="button" type="submit" value="Submit Now" class="btn-primary">
</div>
So I'd like the click to click id 124 and 125 but the class is all the same. and then click on the Submit button. Can anyone help me with this?
Reference CSS selectors and jQuery selectors.
So, selecting by attribute:
document.querySelector (".yellow-bot[data-id='124']").click ();
document.querySelector (".yellow-bot[data-id='125']").click ();
Or much more robustly:
// ==UserScript==
// #name _Click nodes by attribute
// #match *://YOUR_SERVER.COM/YOUR_PATH/*
// #require https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// #require https://gist.github.com/raw/2625891/waitForKeyElements.js
// #grant GM_addStyle
// #grant GM.getValue
// ==/UserScript==
//- The #grant directives are needed to restore the proper sandbox.
/* global $, waitForKeyElements */
waitForKeyElements (".yellow-bot[data-id='124']", clickNode, true);
waitForKeyElements (".yellow-bot[data-id='125']", clickNode, true);
function clickNode (jNode) {
var clickEvent = document.createEvent ('MouseEvents');
clickEvent.initEvent ('click', true, true);
jNode[0].dispatchEvent (clickEvent);
}
For the rest, see Choosing and activating the right controls on an AJAX-driven site.
Related
Newbie question:
I'd like to scan a page for all links where the href starts with hide? and then I'd like to add style="float:left" to the link like:
<a href="hide?6765765" style="float:left">
How do I do this?
Thank you!
Here's one way. Google any unfamiliar terms (and also "jQuery selectors").
// ==UserScript==
// #name _Float "hide" links
// #match *://YOUR_SERVER.COM/YOUR_PATH/*
// #require https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// #require https://gist.github.com/raw/2625891/waitForKeyElements.js
// #grant GM_addStyle
// #grant GM.getValue
// ==/UserScript==
//- The #grant directives are needed to restore the proper sandbox.
waitForKeyElements ("a[href^='hide?']", floatNodeLeft);
function floatNodeLeft (jNode) {
jNode.css ("float", "left");
}
Since IMDB search can't exclude specific genres, I would like to hide the ones who I am not interested in, using Tampermonkey or Greasemonkey.
Every movie is inside a class named "lister-item mode-advanced":
Inside that is:
<span class="genre">
Animation, Adventure, Family </span>
Looking at other answers, I thought something like this could work:
// ==UserScript==
// #name NoAnimation
// #namespace NoAnimation
// #version 0.1
// #description try to take over the world!
// #author You
// #include *.imdb.com/search*
// #require http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js
// #grant GM_log
// #grant GM_getValue
// #grant GM_setValue
// #grant GM_addStyle
// #grant GM_openInTab
// #grant GM_xmlhttpRequest
// #grant GM_registerMenuCommand
// ==/UserScript==
$("lister-item mode-advanced") .show ()
.has ("span.genre:contains('Animation')")
.hide ();
which doesn't work of course :(
I'm doing this test on akas.imdb.com/search/title?....
I hope I was clear enough. Can anyone give me advice? :)
The main mistake is, that is not how to specify class in a jQuery selector. It should have been $(".lister-item.mode-advanced").
But there are other problems:
Brittle selectors used. For example mode-advanced is not always present. May not always be a span, etc.
Unnecessary logic (.show(), for example).
Very obsolete version of jQuery.
Extraneous and unhelpful meta info.
Here's a complete script that addresses these issues:
// ==UserScript==
// #name Hide Animations from IMBD search results
// #match *://*.imdb.com/search*
// #require http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// #grant GM_addStyle
// ==/UserScript==
//- The #grant directive is needed to restore the proper sandbox.
$(".lister-item").has (".genre:contains('Animation')").hide ();
I'm trying to remove overflow:hidden or change it with :visible in this line:
<div style="width:75px;height:95px;padding:7px;overflow:hidden;background:#fff;border:3px solid gray;border-radius:10px;">
I've tried with var overflow = visible; didn't help.
Standard JavaScript, one div for simplicity:
document.querySelector('div[style*="overflow:hidden"]').style.overflow = 'visible';
jQuery, any number of divs, needs #require meta-property:
// ==UserScript==
.........................
// #require https://code.jquery.com/jquery-2.2.4.min.js
// ==/UserScript==
$('div[style*="overflow:hidden"]').css('overflow', 'visible');
Or simply use Stylish extension with the following CSS:
div[style*="overflow:hidden"] { overflow:visible!important }
This question already has an answer here:
How do I get Greasemonkey to click on a button that only appears after a delay?
(1 answer)
Closed 8 years ago.
Ok Here is the source of the page.
<div id="socialBox"></div>
<div class="friendButton addFriend">
<a>+friend</a>
</div>
Here is my greasemonkey code
// ==UserScript==
// #name Auto click
// #namespace Auto click
// #description Auto click
// #include https://*
// #require http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// #require https://gist.github.com/raw/2625891/waitForKeyElements.js
// #grant GM_addStyle
// ==/UserScript==
waitForKeyElements ("#friendButton addFriend", triggerMostButtons);
function triggerMostButtons (jNode) {
triggerMouseEvent (jNode[0], "mouseover");
triggerMouseEvent (jNode[0], "mousedown");
triggerMouseEvent (jNode[0], "click");
triggerMouseEvent (jNode[0], "mouseup");
}
function triggerMouseEvent (node, eventType) {
var clickEvent = document.createEvent ('MouseEvents');
clickEvent.initEvent (eventType, true, true);
node.dispatchEvent (clickEvent);
}
greasemonkey says its executing the code so it clearly doesn't work. Let me know if you need more info
I wonder if the code below is what you want.
document.querySelector('.friendButton.addFriend a').click()
Demo
You'd better provide a link to one of the pages on which you want your script executed, so that I can make sure the script will work as expected.
I have some input values contained within a bunch of divs and a form. I have a limited knowledge of js and would like to use greasemonkey to set the values when the page loads.
The following shows the order of divs and forms to get to the value.
<div data-role="page" id="finalTest">
<div data-role="content">
<form class="cmxform" id="ftForm">
<div id="finalTestForOtherDiv" >
<div data-role="fieldcontain" class="special-spacing">
<div class="input-div">
<label id="finalTestBeforeAcTgrLabel" for="finalTestBeforeAcTg" data-insight="true"
class="mandatory" data-default="mandatory"><img class="label-image" alt="" src="../Images/icon-alert.png" />AC V (T/G):</label>
<input type="text" id="finalTestBeforeAcTg" name="finalTestBeforeAcTg" value="" style="width:100px; display:inline-block;"
data-bind="binder.BeforeAcTg" data-bind-action-when-hidden="Ignore" />
<span class="ui-content" style="padding-left:7px;">V</span>
<div class="error-message"><ul></ul></div>
</div>
Here is the script I've tried using but does nothing.
// ==UserScript==
// #name Final Test
// #description Final test results
// #include https://techaccess.ad.qintra.com/WorkJobs/WorkJobs.aspx#finalTest
// ==/UserScript==
document.getElementById("finalTestBeforeAcTg").value = "0.00";
document.getElementById("finalTestBeforeAcTg").value = "your value";
If your script attempt is not working, it is likely because one or more of the following:
The #include is too restrictive.
The node does not exist yet. Is AJAX active on the page?
Prerequisite javascript events must be triggered for the page to acknowledge or accept the new value.
For issue 1, change the script to:
// ==UserScript==
// #name Final Test
// #description Final test results
// #include http://techaccess.ad.qintra.com/WorkJobs/*
// #include https://techaccess.ad.qintra.com/WorkJobs/*
// ==/UserScript==
alert ("Script start.");
var finTestInput = document.getElementById ("finalTestBeforeAcTg");
if (finTestInput) {
finTestInput.value = "0.00";
}
else {
alert ("The target input does not exist yet!")
}
Note that if you use Firebug (you should), change the alert()s to unsafeWindow.console.log()s.
For issue 2, use the waitForKeyElements utility. See this answer, for example.
For issue 3, There is little we can do without access to the page to suss out the proper sequence of events.
Give us access to the page, or Use Firebug (and the Events panel) to figure it out, or maybe a snapshot of both the page's HTML, and the page's JS files, at Pastebin.com will be enough (maybe).