Watir Click JS Button - javascript

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.

Related

Change text on button if another div contains certain words

<span class="distance any-1-8 S-1-6 align-left" title="Avstand "><span>10</span> Km unna</span>
<span class="delivery-time any-2-7 S-1-3 align-left" title="Leveringsinformasjon">Ikke på lager i valgt butikk. Bestillingen din vil bli sendt fra hovedlageret og kan hentes i butikken innen 3-7 dager. Du vil motta en SMS når ordren din er klar for henting.</span>
<span class="any-1-6 S-1-1 align-right btn-container">
<button type="button" data-selector="1019" title="Velg denne butikken" data-parsley-required="false" class="js-select-store btn-select-store el-button normal-btn align-center see-more">
<span class="el-button-text">
<span class="text">
<span>Velg denne butikken</span>
</span>
</span>
</button>
</span>
Hi.
I want to use jQuery to change the text on a CTA button, if the text in the div next to it contains "Ikke på lager..." (Don't need the whole string, only those 3 words can do). If it does not contain those words, I don't want any change.
Basically: If text A exist --> change text B to "Blabla", if not --> do nothing
I want this change to only apply to the FIRST button coming after this div its searching for, because there are several buttons of the same class(it's a list).
Is this possible? Thanks.
When do you want the code to be executed?
On Page load, on click on a buton or text?
First of all, add IDs to your spans.
Then do sth like this:
$('#clickme').click(function(){
if ($('#a').text().indexOf("Ikke på lager") >= 0){
$('#b').text('Blabla');
}
});
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<span id="clickme">click me</span>
<br/>
<span id="a">Ikke på lager i valgt butikk. Bestillingen din vil bli sendt fra hovedlageret og kan hentes i butikken innen 3-7 dager. Du vil motta en SMS når ordren din er klar for henting.</span>
<br/>
<span id="b">Velg denne butikken</span>

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]")

element.click() is not emulating the click

document.querySelectorAll('button:nth-child(2)').click()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="Dialog ui-dialog-type-message" style="min-width: 300px;"><header><h1 class="dialog-title">Pile Nouveaux éléments pleine</h1></header><div class="dialog-body"><p class="dialog-msg">Vous ne pouvez pas acheter cet élément car vous avez 5 éléments ou plus dans votre pile d'éléments non attribués.</p><div class="ut-button-group"><button class=""><span class="btn-text">Annuler</span><span class="btn-subtext"></span></button><button class=""><span class="btn-text">M'y emmener</span><span class="btn-subtext"></span></button></div></div></section>
I'm making a chrome extension and i'm looking to click on the following button :
<button class=""><span class="btn-text">M'y emmener</span><span class="btn-subtext"></span></button>
On the console with query selector i've got the element :
document.querySelectorAll('button:nth-child(2)')[4]
It is the right button, every thing is good so far but when i add .click() after the element like so, the element doesn't get clicked either:
document.querySelectorAll('button:nth-child(2)')[4].click()
How can i get this to click on my button ?

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);
...
});

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>

Categories

Resources