Protractor can't click on embedded <span> inside <a> element - javascript

I have two embedded <span> elements inside an <a> element. I need to trigger a click event on the second <span>. The by.id method on the id classes I created didn't trigger a click. I also tried by.binding and that didn't work. help please?
The code:
<div class="add-player">
<a href class="btn" data-ng-if="!currentUser.isAuthenticated && !vm.hasPendingInvitation">
<span>Add Player</span>
</a>
<a href class="btn" id="invite" data-ng-if="currentUser.isAuthenticated && !vm.hasPendingInvitation">
<span id="invite-player">Add Player</span>
</a>
</div>

We can play around with locators:
$("div.add-player a span").click();
$("#invite-player").click();
element(by.xpath("//span[. = 'Add Player']")).click();
We can also wait for the element to be visible:
var addPlayer = $("div.add-player a span"),
EC = protractor.ExpectedConditions;
browser.wait(EC.visibilityOf(addPlayer), 5000);
addPlayer.click();
We can also try clicking via JavaScript:
browser.executeScript("arguments[0].click();", addPlayer.getWebElement());
Or via browser.actions():
browser.actions().mouseMove(addPlayer).click().perform();
Or, scroll into view before clicking:
browser.executeScript("arguments[0].scrollIntoView();", addPlayer.getWebElement());
addPlayer.click();
You can also filter the visible element matching a locator:
var addPlayer = $$("#invite-player").filter(function (elm) {
return elm.isDisplayed();
}).first();
addPlayer.click();

Related

Adding 3 onclicks to one page

I am trying to add 3 onclick popups to one page. But it seems as soon as I add the second one the first one stops working. I renamed them different and still wont work. Please help.
<script>
// When the user clicks on div, open the popup
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
</script>
<script>
// When the user clicks on div, open the popup
function myFunction() {
var popup = document.getElementById("mypopup");
popup.classList.toggle("show");
}
</script>
<span class="tooltip" onclick="myFunction()">
<div class="amount">$234.41</div>
<span class="tooltiptext" id="myPopup">This is how much money our community has raised to help provide meals and support to animal charities in our local communities.</span>
</span>
<!----------------------------------------------------------------------------------------------------------------------------------- Fur Baby Of The Month -->
<span class="tooltips" onclick="myFunction()">
<div class="furbm">
<img src="https://www.capebretoncares.com/images/icons/amazon.png">
</br>
</div>
<span class="tooltipstext" id="mypopup">Fur Baby Of The Month
</br>
<img src="https://www.capebretoncares.com/images/search-icons/duck.png">
</br>
congratulations "Fluffy"
</span>
</span>
Your span content were not valid HTML - you cannot wrap a div in a span - and </br> is the wrong way around - should be <br/> if you want the XHTML slash
Here is the recommended way
target the container (delegate/delegation)
use the class of the clickable element
use a data- attribute to name the element you want to access when clicking
Alternatively use erlative addressing by wrapping each item in a yet another container div and use tgt.closest(".parentClass").querySelector(".popupClass") to access the popup
Here I use the data-attributes - as you can see it does not matter if the popup is a span or a div in this case.
window.addEventListener("load", function() { // on page load
document.getElementById("container").addEventListener("click", function(e) { // clicking anything in the container
const tgt = e.target;
if (tgt.classList.contains("tooltip")) { // we clicked a tooltip
const show = tgt.dataset.pop; // getting the data-pop content
document.getElementById(show).classList.toggle("hide");
}
})
})
.hide {
display: none;
}
<div id="container">
<span class="tooltip" data-pop="myPopup1">Look</span>
<div class="amount">$234.41</div>
<span class="tooltiptext hide" id="myPopup1">This is how much money our community has raised to help provide meals and support to animal charities in our local communities.</span>
<hr/>
<span class="tooltip" data-pop="myPopup2">Look</span>
<div class="furbm">
<img src="https://www.capebretoncares.com/images/icons/amazon.png">
</div>
<div class="tooltipstext hide" id="myPopup2">Fur Baby Of The Month
<img src="https://www.capebretoncares.com/images/search-icons/duck.png"> congratulations "Fluffy"
</div>
</div>
If you want to close when clicking elsewhere, you can again use addEventListener and test that the target is not the popup and not the popup link and then close all open popups. That code is a little more complex

Open two links when click on 'a'

I have DOM like below:
<body>
<table>
<tbody>
<tr></tr>
</tbody>
</table>
<input type="text" class="pi" value=""><br>
<input type="text" class="vi" value="">
<button>users</button>
</body>
When user clicks on button it appends new 'td' to 'tr'. It works good.
Problem:
On 'a' click I want to open two links. The best would be when first redirects current page to another and second opens seperated window. I tried to change 'a' on another tags, but did not help.
$('button').click(function () {
var pic = $('input[type="text"].pi').val();
var vid = $('input[type="text"].vi').val();
var cont = '<td><a data-big-image="' + vid + '" href="#"><img src="' + pic + '"></a></td>'
$('table').children('tbody').children('tr').last().append(cont);
});
$('a').click(function(e) {
e.preventDefault();
var bigImage = $(this).data('big-image');
window.open(bigImage);
window.open('xyz');
});
Make a link like it's normally done
Next place an inline element (ex. <b>, <span>, etc) inside the link
Then add an inline attribute event handler to the new element.
<a href="https://google.com" target="_blank">
<b onclick="location.href='1st_location.html">GO</b>
</a>
Demo
(does not work due to SO's security measures, see PLUNKER)
<a href="https://google.com" target="_blank">
<b onclick="location.href='https://example.com';">GO</b></a>

JQuery - Detecting which div box was clicked

I'm trying to detect which div box was clicked with JQuery and I'm not sure what I am doing wrong. I'm aware that I can approach this in a different method by directly calling functions if a div box is clicked, but I wish to do it this way by first determining what was clicked.
$(document).ready(function() {
$(document).click(function(event){
var id = event.target.id; //looks for the id of what was clicked
if (id != "myDivBox"){
callAFunction();
} else {
callSomeOtherFunction();
}
});
});
Thank you for any suggestions!
You could use the closest function to get the first ancestor element with tag div, see following example:
$(document).ready(function() {
$(document).click(function(event){
var parentDiv = $(event.target).closest("div");
console.log(parentDiv.prop("id"));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">
<span id="span1">Test1</span>
</div>
<div id="div2">
<span id="span2">Test2</span>
</div>
I hope it helps you. Bye.
No matter what you click, you will always know the element that was clicked:
$("#myDiv").click(function(e){
alert("I was pressed by " + e.target.id);
});
Knowing that you don't want to add this to every div, and you have your click on your document, you'll need to figure out what divs can be reported as "clicked".
In order to do this you'll either need a strict hierarchy of elements in your DOM (which is anoyingly bad) or you can decorate "clickable" div's with a specific class.
Fiddle - similar to below. https://jsfiddle.net/us6968Ld/
I would use closest in Jquery to get the result you want.
$(document).ready(function() {
$(document).click(function(event){
var id = event.target.id;
var clickDiv = $(event.target).closest('div[class="clickable"]');
alert(clickDiv[0].id);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="clickable" id="clickable1">
<span id="foo"> click me - Foo - clickable 1</span>
</div>
<div id="notClickable1">
<div class="clickable" id="clickable2">
<span id="span1">
Click Me Inside Span 1 - clickable 2
</span>
</div>
<div class="clickable" id="clickable3">
<div id="notClickable2">
<div id="notClickable3">
<span id="click me">Click Me - clickable 3</span>
</div>
</div>
</div>
</div>
try this:
$('div').click(function() {
alert($(this).attr('id'));
});
https://jsfiddle.net/1ct0kv55/1/

jQuery show unique popup for each link clicked

I have a series of links on my page, each link has a unique id: library_vid_link-UNIQUE_ID. When clicked, I want to show a popup which shows information unique to that link.
For each link, I have a hidden popup, which, when clicked, the popup is displayed. The popup also has a unique id: less_preview_popup-UNIQUE_ID (the unique id for the link and popup both match).
Here is a sample of my html code:
<a href="#" class="library_vid_link" id="library_vid_link-801">CLICK HERE FOR MORE INFO
</a>
<div class="lesson_preview_popup" id="lesson_preview_popup-801">
THIS IS THE POPUP
</div>
<a href="#" class="library_vid_link" id="library_vid_link-802">CLICK HERE FOR MORE INFO
</a>
<div class="lesson_preview_popup" id="lesson_preview_popup-802">
THIS IS THE POPUP 2
</div>
Here is the jquery i'm currently using:
jQuery('.library_vid_link').click(function( event ) {
event.preventDefault();
$('.lesson_preview_popup').css('top', '25%');
$('body').addClass('no-scroll');
});
The issue I'm having is that when I click on a link, ALL the popups show, not just the one that relates to the link clicked. Is there a way to target the popup that belongs to the link clicked?
Use the data-attribute:
<a data-popup="lesson_preview_popup_801" ....
And
$("#"+$(this).data("popup")).show().css('top', '25%');
Using $(this).next() instead, assumes that the div to show is the next sibling of the link
Change this:
$('.lesson_preview_popup').css('top', '25%');
into this:
$(this).next().css('top', '25%');
Alternatively, save the ID (e.g. 801) in a new attribute, like this:
<a data-id="801" ...
Then, call the popup like this:
jQuery('.library_vid_link').click(function( event ) {
event.preventDefault();
var thisId = $(this).attr("data-id"); //get "801"
$('#lesson_preview_popup-' + thisId).css('top', '25%'); //construct the ID and call the popup by its ID
$('body').addClass('no-scroll');
});
Jquery .next() select next sibling of element. Use it like bottom example
$('.library_vid_link').click(function( event ) {
event.preventDefault();
$(this).next().show().css('top', '25%');
$('body').addClass('no-scroll');
});
$('.library_vid_link').click(function( event ) {
//event.preventDefault();
$(this).next().show().css('top', '25%');
//$('body').addClass('no-scroll');
});
.lesson_preview_popup {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="library_vid_link" id="library_vid_link-801">CLICK HERE FOR MORE INFO
</a>
<div class="lesson_preview_popup" id="lesson_preview_popup-801">
THIS IS THE POPUP
</div>
<a href="#" class="library_vid_link" id="library_vid_link-802">CLICK HERE FOR MORE INFO
</a>
<div class="lesson_preview_popup" id="lesson_preview_popup-802">
THIS IS THE POPUP 2
</div>

javascript transfer and element from 1 div to another

I'm trying to do a tag filtering function in the website. The transferring from one div to another works. But transferring it back doesn't work.
This is my html:
<h4>Video Tags</h4>
<div id="tagbox-1">
<span class="tag-filter">tag 1</span>
<span class="tag-filter">tag 2</span>
<span class="tag-filter">tag 3</span>
</div>
<h4>Video Filters</h4>
<div id="tagfilter-1">
</div>
Then this is my javascript/jquery:
function tag_ui_move(tag_object,filter_move_to){
$(filter_move_to).append($(tag_object)).fadeIn();
$(tag_object).remove();
}
$(document).ready(function(){
var stored_tag = [];
$('[id^="tagbox-"] > span').each(function(){
$(this).click(function(){
tag_ui_move(this,'div[id^="tagfilter-"]');
});
});
$('div[id^="tagfilter-"] > span').each(function(){
$(this).click(function(){
tag_ui_move(this,'div[id^="tagbox-"]');
});
});
});
This is pretty much the gist of my html and code. I simplified it because there are more tagbox- and tagfilter- divs.
The problem is that $('[id^="tagbox-"] > span') selects all of the tag span elements that exist in the tagbox at that moment and then you bind a click handler to each of them that moves it to the filter div. And then $('div[id^="tagfilter-"] > span') selects all of the tag span elements that exist in the filter div at that moment and there aren't any. So there is no handler bound to move the elements back.
Also there is no need to use an .each() loop to individually bind .click() to each element in the loop: you can just call .click() directly and it will bind the handler to all elements that matched your selector.
The solution is to use a delegated handler, where you use .on() to bind the click to the parent div elements but supply a secondary selector that jQuery will automatically test at the time the click event occurs:
function tag_ui_move(tag_object,filter_move_to){
$(filter_move_to).append(tag_object).fadeIn();
//$(tag_object).remove(); <-- commented out: don't remove the element,
// because append *moves* it
}
$(document).ready(function(){
var stored_tag = [];
$('[id^="tagbox-"]').on('click', 'span.tag-filter', function(){
tag_ui_move(this,'div[id^="tagfilter-"]');
});
$('div[id^="tagfilter-"]').on('click', 'span', function(){
tag_ui_move(this,'div[id^="tagbox-"]');
});
});
That way, when a click on any element within '[id^="tagbox-"]' occurs, jQuery tests if the target element matches the selector 'span.tag-filter' and if and only if it does it calls your handler function. So then the clicks work on the elements even when they're dynamically moved back and forth between the two parent divs.
Demo: http://jsfiddle.net/6m4aac3k/
HTML
<h4>Video Tags</h4>
<div id="tagbox">
<span class="tag-filter">tag 1</span>
<span class="tag-filter">tag 2</span>
<span class="tag-filter">tag 3</span>
</div>
<h4>Video Filters</h4>
<div id="tagfilter">
</div>
Javascript
function tag_ui_move(tag_object,filter_move_to){
$(filter_move_to).append($(tag_object)).fadeIn();
}
$(document).ready(function(){
$(".tag-filter").click(function(){
var inTagBox=$(this).parent( "#tagbox" ).length>0;
var moveTo=inTagBox ? '#tagfilter' : '#tagbox';
tag_ui_move(this,moveTo);
});
});
JSFiddle
Tag filter

Categories

Resources