How to make Greasemonkey click automatically on a "weird" link on a specific site?

Question

I'm not really a coder; I can hack some scripts but no more. Talk to me like a REAL NEWBIE. ;-)

I want to automatically expand two links on a page, using a GM Script. It's a French dating site and, in the profile section, you have two places where the default is to show only partial information. So, to have all the information, you need to click on 2 additional links.

Here's a screenshot of the page with the links that I want to trigger:

(Click for larger image)

The target page is reseaucontact.com/profil/3604181

IMPORTANT: When I was testing the Script I was logged in the site... so if you click on the link & you are NOT logged-in, the site will tell you "Register to see full content" in French.

I tried to make a Script to open the first link but since the URL of the link is the SAME URL that the page (reseaucontact.com/profil/3604181) the page was just reloading in an infinite loop ;-)

Here's my First attempt to make a script the result was an infinite loop:

// ==UserScript==
// @name Reseau Contact Automatic Expander
// @version 1.0
// @author Mikha
// @include  http://reseaucontact.com/profil/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
// @grant    GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
    introduced in GM 1.0.   It restores the sandbox.
*/

//--- Note that the contains() text is case-sensitive.
var TargetLink = $("a:contains('Voir tous les détails')")

if (TargetLink.length)
    window.location.href = TargetLink[0].href

Here's the data/print-screen from Firefox Web Developer tools I have collected (When I'm logged) to find the targets/links:

The first link:

(Click for larger image)

The second link:

(Click for larger image)

I understand that when I click on the 2 links it's a GET command for "authentication request" or something like that... but I don't understand how make a script that will really "mimic" the click of my mouse to make expand the 2 sections of the profile without clicking each time.

I'm pretty sure it is simple/easy to do but after 4 hours of trying to find the information with that "kind of links" I need helps.

If you need more information or clarification just ask me.

Answer 1

These are AJAX-driven links with dummy values in the href. Clicking the link fires off javascript events.

The easiest thing to do in this case is to send the mouse event(s) that the javascript expects (usually, but not always a click event). See Choosing and activating the right controls on an AJAX-driven site.

Also, as a practical matter, having a GM script immediately fire on two jQuery-AJAX driven links, like those two are, might run into timing or "race" problems. For sites like this, I recommend a slight delay before clicking. Use setTimeout()^Doc for the delay.

Putting it all together, the complete script could would be like:

// ==UserScript==
// @name     Reseau Contact Automatic Expander
// @version  1.0
// @author   Mikha
// @include  http://reseaucontact.com/profil/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
// @grant    GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
    introduced in GM 1.0.   It restores the sandbox.
*/

//-- Delay the link clicks 333 mS and 777 mS, respectively.
setTimeout (clickLinkWithText, 333, "Voir tous les détails");
setTimeout (clickLinkWithText, 777, "Lire la suite");

function clickLinkWithText (linkText) {
    var targetLink = $("a:contains('" + linkText + "')");
    if (targetLink.length) {
        triggerMouseEvent (targetLink[0], "click");
    }
}

function triggerMouseEvent (node, eventType) {
    var clickEvent = document.createEvent('MouseEvents');
    clickEvent.initEvent (eventType, true, true);
    node.dispatchEvent (clickEvent);
}

Adjust the delays if needed, and beware that there is a small chance that the site uses more, or different, events than click.

Answer 2

If the functionality of clicking on these truncated links is to expand the element or grab more content with an AJAX call or just show a hidden element below, then you don't probably need the link's HREF at all since its probably preventing the default behavior of following the href to a new URL.

Instead of messing with the href try triggering the click event on these links instead:

TargetLink.click();