Develop Reference

Watir Click JS Button

I can't seem to get past a button in a landing page. Here is the JS element with parent nodes:
<div class="modal-body-content callfor-popup">
<h3>Welcome | Bienvenue</h3>
<p class="body_M_normal" aria-level="4" role="heading">Please select a language | Veuillez sélectionner une langue</p>
<div class="small_btn lcbo_cookie">
<a class="body_M_normal" href="https://www.lcbo.com/en/stores/store/redirect/___store/en/___from_store/en/uenc/aHR0cHM6Ly93d3cubGNiby5jb20vZW4v/">English</a>
</div>
<div class="small_btn lcbo_cookie">
<a class="body_M_normal" href="https://www.lcbo.com/en/stores/store/redirect/___store/fr/___from_store/en/uenc/aHR0cHM6Ly93d3cubGNiby5jb20vZnIv/">Français</a>
</div>
<hr>
<p class="caption_xxs_noletterspace">
You must be 19 years of age to purchase alcohol. Please note that we only deliver in Ontario / Vous devez avoir au moins 19 ans pour acheter de l'alcool. Veuillez noter que nous ne livrons pas à l'extérieur de l’Ontario.
</p>
</div>
This is what I am currently trying:
puts '1' if a.element(visible_text: 'English').exist?
puts '2' if a.link(visible_text: 'English').exist?
puts '3' if a.button(text: 'English').exist?
puts '4' if a.link(visible_text: 'English').exist?
puts '5' if a.element(visible_text: 'English').exist?
a.button(text: 'English').click
a.element(visible_text: 'English').click
a.link(visible_text: 'English').click
puts "clicks finished"
1, 2, 4 and 5 show up, indicating Watir knows they are there and exist. I can't seem to click that element though. It's not a formal HTML button, so that's why I'm trying several elements.
Is there a better way of dealing with such JS elements? I'm not sure how to focus on the English option.

Removing all language tags from InDesign file

When I export my InDesign file that I was given by a designer to HTML there are hundreds of language span tags scattered all over the place. Example below.
How can I remove these language spans from the InDesign file instead of having to remove them manually from the HTML file.
<p>
<span lang="fr-FR"><a id="_idTextAnchor002"></a>En cherchant </span
><span lang="ar-SA">à </span
><span lang="fr-FR"
>appuyer un élève, certains pédagogues interviennent personnellement et
posent des gestes inappropriés<a id="_idTextAnchor003"></a>. D’autres –
aussi rares soient-ils – ne se préoccupent pas du bienêtre de l’</span
><span lang="ar-SA">élève, mais </span><span lang="fr-FR">cherchent</span
><span lang="ar-SA"> délibérément</span><span lang="fr-FR"> à le </span
><span lang="ar-SA">«</span><span lang="fr-FR">conditionner</span
><span lang="ar-SA">»</span
><span lang="fr-FR"> dans le but d’entretenir </span
><span lang="ar-SA">éventuellement </span
><span lang="fr-FR"
>une relation de nature sexuelle. <a id="_idTextAnchor004"></a>Souvent, ce
mécanisme, que nous appellerons «pédopiégeage» (</span
><span lang="fr-FR">grooming</span
><span lang="fr-FR"
>, en anglais), ne peut être mis au jour qu’après coup, par la police,
l’employeur, l’Ordre et les victimes elles-m</span
>ê<span lang="fr-FR">mes. </span>
</p>

the following one-line AppleScript will remove all language attributes from text in an InDesign layout.
tell application "Adobe InDesign 2020" to set applied language of text style ranges of stories of document 1 to (item 1 of languages of document 1 whose name is "[No Language]")

Copying all HTML contents from one div to another using jQuery

This question may seem as a duplicate one, but I cannot seem to find a solution for my problem.
I am fetching content from external websites using the iFramely API. Which works for almost all requested websites.
However, if I try to fetch for example a post from Reddit and display this in a sort of custom made 'preview box' the requested iFrame get rendered correctly, so far so good.
When I try to copy the HTML content of the 'preview box' in order to append it to another div using jQuery. It does not copy all HTML elements.
Complete function
$('#btn-add-extern-snippet').click(function() {
let embed_preview_container = $('#embed-preview');
let embed_target_number = $('#embed-target-number');
let target_number = $(embed_target_number).val();
$('.embed-no-' + target_number).html($(embed_preview_container).html());
...
});
I've tried the jQuery functions:
clone $('.embed-no-' + target_number).html($(embed_preview_container).clone());
html $('.embed-no-' + target_number).html($(embed_preview_container).html());
contents $('.embed-no-' + target_number).html($(embed_preview_container).contents());
using append $('.embed-no-' + target_number).append($(embed_preview_container).html());
But all of these functions do not seem the copy the full "innerHTML" of the mentioned 'preview box' (see pictures below).
The copied HTML content inside the 'other div' with an empty body & head.
The actual content in side the 'preview box'.
I must note here that this only seems to be te case for Reddit related content. It works for example with Soundcloud/Spotify/Bandcamp.
PS. I am using jQuery version 3.3.1

Code sample below:-
$("#copyToDiv").append($("#copyFromDiv").html());
Thanks

you can try this.
$('#copy').click(function(){
$('#div2').html($('#div1').html());
});
#div1{
background:green;
}
#div2{
background:blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id='copy'>Copy</button>
<div id='div1'>
<p>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.
</p>
<div>
<h2>Lorem Ipsum</h2>
<p>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles
</p>
</div>
<div id='div2'></div>

Alright, so I've found the solution/workaround to my own problem. Instead of copying the contents of the 'preview box', I stored the fetched HTML in a temporary variable, and appended the contents of this variable inside an 'another div' (this works).
Noteworthy, something strange that occurred to me while debugging is that the browser (in this case Chrome), does not render/display HTML correctly (see picture) (note the empty iFrame).
This is exactly what .html() copied. So long story short the following code worked for me:
// temporary variable for storing html.
let currentSnippet = '';
$('#btn-add-extern-snippet').click(function() {
let embed_preview_container = $('#embed-preview');
let embed_target_number = $('#embed-target-number');
let target_number = $(embed_target_number).val();
$('.embed-no-' + target_number).html(currentSnippet);
...
});

Alert box to accept cookies in a web site

I wanna know how to put a .js code in a button that it's in a bootstrap alert that when the user clicked accept, the alert box no appear again.
Thanks a lot.
This is the code that I have, but doesn't work.
JS:
$(".btn_cerrar").on({
click: function(){
location.reload(
$(".pb-element-alert").hidden();
});
});
<div id="modal">
<p style="text-align: center;">Este sitio web emplea cookies para ofrecerle un servicio más</p>
<p> personalizado.</p>
<p style="text-align: center;">Si continúa navegando entenderemos que acepta nuestra</p>
<p style="text-align: center;"><a title="Politicas" href="images/eventos/POLITICA_DE_TRATAMIENTOS_DE_DATOS.pdf" target="_blank"><strong>Políticas de tratamiento de la información</strong></a> de nuestro sitio web.</p>
<button class=" btn_cerrar btn pull-right btn-success" type="button" data-dismiss="alert"> Aceptar</button></div>
HTML:
`
Este sitio web emplea cookies para ofrecerle un servicio más
 personalizado.
Si continúa navegando entenderemos que acepta nuestra
Políticas de tratamiento de la información de nuestro sitio web.
Aceptar
`

I am not sure what exactly is the alert you are talking about since it is not shown in your html.
The correct syntax of your script should be that:
$(".btn_cerrar").on('click', function(){
// Do what you want.
});
Now if the element you want hide can be selected from the selector $(".pb-element-alert") you mention in your question then you can use this:
$(".pb-element-alert").hide();
All of it together would be:
$(".btn_cerrar").on('click', function(){
$(".pb-element-alert").hide();
});
UPDATE
$( document ).ready(function() {
bool isBtnClicked = sessionStorage.getItem('buttonClicked') == true;
if(isBtnClicked){
$(".pb-element-alert").hide();
}
});
$(".btn_cerrar").on('click', function(){
sessionStorage.setItem('buttonClicked', true);
$(".pb-element-alert").hide();
});

use id attribute as reference or variable for tooltip

I am currently using this code .
However the text I wish to display must be in one line, and if there is a apostrophe ( ' ) in the text, it will not work anymore .
imgover(this, 'Text to display')
Is there a way to remplace the second variable of onmouseover by an id of a div so that it will display everything in the div please ?
Here is an example of the div :
<div id ="text1" >
<em><img class="floatLeft" src="images/F9979.jpg" alt="" />
TITRE DU FILM : Man of Steel
<br />
<br />
RESUME :
Film fantastique américain réalisé par Zack Snyder avec Henry Cavill, Amy Adams, Diane Lane
<br />
<br />
DUREE : 2H23
<br />
Un petit garçon découvre qu'il possède des pouvoirs surnaturels et qu'il n'est pas né sur la Terre. Plus tard, il s'engage dans un périple afin de comprendre d'où il vient et pourquoi il a été envoyé sur notre planète. Mais il devra devenir un héros s'il veut sauver le monde de la destruction totale et incarner l'espoir pour toute l'humanité...
</em>
</div>
I would like to remplace 'Text to display' from
imgover(this, 'Text to display')
by what's in the div (text1) so that at the place where there is the div ( tooltip) I will see the text and the image from the div ( text1).

I'm not really sure whether I understood your question properly but this should work. You need to put the value of the id tag of your html element in the parameter of getElementById
<script>
function imgover(img, tip) {
document.getElementById('text1').style.display = 'block';
document.getElementById('text1').innerHTML = tip;
document.getElementById('text1').style.left = img.offsetLeft + 'px';
}
function imgout() {
document.getElementById('text1').style.display = 'none';
}
</script>