We Keep Coding

How to find a link in an email and click on it? (Chrome / applescript / javascript)

What i've got part of code of outlook inbox letter:
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse;">
<tbody><tr>
<td height="2" colspan="3" style="line-height:2px;"> </td>
</tr>
<tr>
<td><**a href="https://www.facebook.com/confirmcontact.php?c=31085&z=0&gfid=AQALAirKRBiAw5qf1L4"** target="_blank" rel="noopener noreferrer" data-auth="NotApplicable" style="color:#3B5998;text-decoration:none;" data-linkindex="2">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse;">
<tbody><tr>
<td style="text-align:center;background-color:#4C649B;display:block;border-collapse:collapse;border-radius:2px;padding:7px 16px 11px 16px;border:1px solid #344C80;">
<a href="https://www.facebook.com/confirmcontact.php?c=31085&z=0&gfid=AQALAirKRBiAw5qf1L4" target="_blank" rel="noopener noreferrer" data-auth="NotApplicable" style="color:#3B5998;display:block;text-decoration:none;" data-linkindex="3">
<center><font size="3"><span style="color:white;font-size:14px;font-family:Helvetica Neue,Helvetica,Lucida Grande,tahoma,verdana,arial,sans-serif;font-weight:bold;vertical-align:middle;white-space:nowrap;line-height:14px;">Подтвердить</span></font></center>
</a></td>
</tr>
</tbody></table>
</a></td>
<td width="100%"></td>
</tr>
<tr>
<td height="32" colspan="3" style="line-height:32px;"> </td>
</tr>
</tbody></table>
</span>
How to find a link that starts with https://www.facebook.com/confirmcontact.php and click on it using apple script / javascript. Chrome.
I try this, but not yet very much.
tell application "Google Chrome"
activate
tell active tab of window 1
execute javascript "document.querySelector('a[href=www.facebook.com/confirmcontact]').click()"
end tell
end tell
Also got advice, but with error: Error: ReferenceError: Can't find variable: document
var links=document.getElementsByTagName('a');
for(var i=0; i<links.length;i++){
if(links[i].match('www.facebook.com/confirmcontact')){
links[i].click();
break;//break the loop
}
}
Need your help, colleagues.

Keep in mind, I'm no expert at Javascript but there were two problems with your code:
You didn't quote the link
document.querySelector(); returns a list. You have to specify which element you want to target
The end product looks something like this:
tell application "Google Chrome"
activate
tell active tab of window 1
execute javascript "document.querySelectorAll(\"a[href*='www.facebook.com/confirmcontact']\")[0].click();"
end tell
end tell
The code posted above was tested on a MacBook Air 2019 on Google Chrome Version 92.0.4515.131 (Official Build) (x86_64)

Using javascript you could find all links on a page using a query:document.querySelectorAll("a"); or document.getElementsByTagName(a);. After you've gotten the links you can iterate through the list/array and use string1.match(string2); where 'string1' is the href attribute of a link at position i of the array and 'string2' is the href you're looking for. After you have retrieved the link(the one that matches) just use .click(); on it to trigger a click.
It should look something like this:
var links=document.getElementsByTagName('a');
for(var i=0; i<links.length;i++){
if(links[i].match('www.facebook.com/confirmcontact')){
links[i].click();
break;//break the loop
}
}

HTML JavaScript error in atom

I've managed to create some code which makes divs appear when the user clicks the navigation buttons.
This works without the html code inside the javascript (which will be the information shown on the pafge when the use clicks a button).
I've had a huge red error come up on my atom and I cant seem to find what I've done wrong. I've tried using Linter too and nothing is coming up.
Can anyone suggest anything?
Here is an image with the error:
here is the code:
$('#myhtmlcss').click( function() {
$('#content-reveal').fadeOut( 500, function() {
$('#content-reveal').html( '<div> <h2>HTML AND CSS</h2> <p>Below is example HTML and CSS for the Aguillar Family Wine Festival Schedule website.</p> <br> <p> <textarea name="textareahtml" rows="10" cols="30" readonly> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Aguillar Family Wine Festival</title> <link rel="stylesheet" type="text/css" href="/examples/winestyle.css" /> <link href="https://fonts.googleapis.com/css?family=Oswal" rel="stylesheet"> </head> <body> <header> <h1>Annual Aguillar Family Wine Festival</h1> </header> <div class="container"> <table> <thead> <tr> <th colspan="2"> <h1>Wine Festival Schedule</h1> </th> </tr> <tr> <th> <h2>Time</h2> </th> <th> <h2>Event</h2> </th> </tr> </thead> <tbody> <tr> <td class="left"> <h3>12:00PM</h3> </td> <td> <h3>Welcome Reception</h3> </td> </tr> <tr> <td class="left"> <h3>1:00PM</h3> </td> <td> <h3>Storytelling & Tasting</h3> </td> </tr> <tr> <td class="left"> <h3>2:00 PM</h3> </td> <td> <h3>Wine Luncheon</h3> </td> </tr> <tr> <td> <h3>3:00PM</h3> </td> <td> <h3>Aguillar Family Wines</h3> </td> </tr> <tr> <td> <h3>4:00PM</h3> </td> <td> <h3>Wine & Cheese Tasting</h3> </td> </tr> </tbody> </table> </div> <footer> <h3>Contact</h3> <h3>Location</h3> <h3>Privacy Policy</h3> </footer> </body> </html> </textarea> <textarea name="textareacss" rows="10" cols="30" readonly></textarea> </p> <p>CLICK HERE TO SEE THE EXAMPLE ABOVE IN ACTION </p> <p>This site is also another example of my HTML, CSS & SCSS skills. The code for this website, plus plenty of other examples, are on my GITHUB. </p> </div>' );
$('#content-reveal').fadeIn( 500 );
} );
} );

For performance reasons, Atom will stop looking at a line when it exceeds ~1000 characters. Fortunately, there are a few options to circumvent this:
Use Tree Sitter
As of Atom v1.25, there's a new experimental parsing system called tree-sitter. You can enable it in the Atom core settings:
Note: You might have to close and re-open your file (or re-assign the grammar) for the changes to apply.
Change Your Code
Alternatively, you can always split up your code into smaller chunks and concatenate them to avoid very long strings. This might also make it easier to maintain.

This may be caused by the fact you have <html> written inside the .Html tag.
Unless it's inside an iframe, you shouldn't write <html>.
You can escape the brackets using
< (<)
> (>)

HTML,Asp.net and Javascript Menu not working

I have a menu.js file in solution, and a masterpage.aspx:
One of the codeblock of masterpage as follows
<body>
<table id="table2" blah blah>
<tr>
<td valign="top">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img id="img" blah blah />
<td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="height: 14px">
<%SelectJSMenu%>
</td>
</tr>
</table>
</body>
In code behind masterpage.aspx.vb
Public Sub SelectJSMenu()
{
Select Case System.Configration.ConfigurationManager.AppSettinges("stage")
Case 1
Response.Output.Write("script") 'loading menu.js file via script
Case 2
Response.Output.Write("scirpt") 'loading another menu2.js file via this script
}
What I have to do is to check the user permission and write this menu if user is not who he claims to be, then load the second.

I'm not expert in js and asp but reviewing your post, I think the problem is that you don't close your <td> tag in the second enclosed table:
_edit: there's some exception in html which allow tag omission, and < td> tag is part of them. But complex parser could have a more strict validation stage that could complain about it.
try replace:
<tr>
<td><img id="img" blah blah />
<td>
</tr>
by:
<tr>
<td>
<img id="img" blah blah />
</td>
</tr>

Apart from an issue with the closing of the tag as mentioned in #j-p's answer, the following needs to be corrected.
Instead of
Case 1
Response.Output.Write("script") 'loading menu.js file via script
Case 2
Response.Output.Write("scirpt") 'loading another menu2.js file
do-
Case 1
Response.Output.Write("<script src=\"menu.js\"></script>") //loading menu.js file via script
Case 2
Response.Output.Write("<script src=\"menu2.js\"></script>") //loading another menu2.js file via this script

JavaScript jQuery: Table rows are not drag/dropping

This is the JavaScript portion that I have that should make the table's rows that I have drag and droppable (aka movable). This doesn't work for some reason.
<script type="text/javascript">
jQuery(function(){ jQuery("#sortable93032188").sortable({ items: "tr:.sortable" }); })
</script>
Here's the table info:
<table id="sortable93032188" cellpadding="5" cellspacing="0" border="0" width="0" leftmargin="50">
<thead>
<tr>
<td colspan="1" class="vdarkbluebw" valign="centre">
<font>Field Order - Drag fields up or down as required to preferred order</font>
</td>
</tr>
<tr bgcolor="#eeeee8" class="sortable" id="11874272">
<td id="68937878">
<span class="small">Sample Origin Name<input type="hidden" name="new_field_order" value="Sample Origin Name"></span>
</td>
</tr>
... This table keeps going (it's decently sized).
Now the thing is that I've googled around on drag/drop tables -- and I can't seem to find what's wrong with this. I have very little jQuery/HTML/JavaScript experience and am stumped at this point. What am I doing wrong?

You need to take out the semicolon in your jQuery after the tr.
jQuery(function(){ jQuery("#sortable93032188").sortable({ items: "tr.sortable" }); })
It should work then. Heres a demo: http://jsfiddle.net/7kZY4/

divs created (javascript/mootools) from ajax response not showing until entire response processed

Chrome 18.0.1025.162m
Struts 1.x
Here's the basic structure of the divs I'm creating using js/mootools:
<div class="track">
<table>
<tr>
<td style="white-space:nowrap; width:1%;">
<td style="white-space:nowrap; width:1%;">
<td>
</tr>
</table>
<div>
<table>
<tr>
<td style="width:50%;">
<fieldset style="height: 244px; ">
<legend></legend>
<table>
<tr>
<td>
<img>
</td>
<td>
<table>
<tr>
<td class="label"></td>
<td class="comparable"></td>
</tr>
<tr>
<td class="label"></td>
<td class="comparable"></td>
</tr>
... 8 more of same
</table>
</td>
</tr>
</table>
<table>
<tr>
<td style="text-align: center; ">
<button type="button"></button>
</td>
</tr>
</table>
</fieldset>
</td>
<td>
...essentially same as prior td
</td>
</tr>
</table>
</div>
</div>
relevant css:
div.track {
outline:solid thin;
margin-bottom:10px;
background-color:#DCEDEA;
}
td.label {
text-align:right;
white-space:nowrap;
}
'comparable' is just a flag so I can find and possible restyle them later.
These structures are created in the onreadystatechange function from a single JSON response. 100+ of these are being created but I don't see anything until they're all ready and then they all appear at once. I would expect (and prefer so the user sees progress) each div to display as soon as it's ready and added (using mootools Element.inject) to the DOM. If I step through using Chrome's dev tools I see the expected behavior of the div displaying immediately after the inject.
I'm fairly new to web development, so if you feel the need to critique my methods I'm open to hearing your thoughts, but I'd really like an explanation for the behavior I'm seeing.
Thanks.
edit
Basic idea of page html:
<body>
<div id='foo'></ div>
</body>
Basic idea of js (within onreadystatechange):
var jsonObj = JSON.decode(req.responseText);
for (var i = 0; i < jsonObj.objects.length; ++i) {
getStructure(jsonObj.objects[i]).inject('foo'); //getStructure builds the div above and returns the div element
}

I suspect that the DIVs are being displayed one at a time, but they're all being displayed so quickly that it looks like it's happening all at once. Add console.log(i); into that for loop and watch your console while the DIVs are loading. You can bring up the console with Ctrl+Shift+J using Google Chrome, or by installing the Firebug extension under Firefox.
EDIT:
In that case, I'd guess it has something to do with the display loop in your browser. Probably something like (in very rough pseudocode):
while (1) {
executeJavascript(); // blocks until all javascript is executed, including your loop
displayPage();
}
You may therefore find this discussion useful: How can I force the browser to redraw while my script is doing some heavy processing?