Open two links when click on 'a' - javascript

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>

Related

How to keep click event even though the page refresh

How to keep click event(colour change event) if URL has changed after click.
this script below that for click a tag, the URL will changing it.
<script type="text/javascript">
function sigun(sigun) {
location.href = '/openSec.do?sigun=' + sigun + '&categoryCode1=select1' + '&categoryCode2=mon' + '&categoryCode3=00';
}
this JSP code is sample code. if section1 cliked, the URL will chaned /openSec.do?sigun=' + section1 ..... like that. I think this mean the page refresh it.
<div class="gnmap_txt_area">
<div class="cw map_box">
<div class="map_txt01">
<a href="javascript:sigun('section1');">
<c:forEach var="eventCnt" items="${eventCnt}">
<c:if test="${eventCnt.signgu == 'section1' && fn:length(eventCnt.signgu) > 0}">
<div class="jb-title"><img src="/images/ico_map_event.png" alt="eventit"> </div></c:if>
<div class="jb-text">
<c:forEach var="eventMain" items="${eventMain}">
<c:if test="${eventMain.signgu == 'section1'}">
<span style="font-size: 5px">* ${eventMain.evenNm} <br /></span>
</c:if>
</c:forEach>
</div>
</c:forEach>
<p>section1</p>
</a>
</div>
</div>
</div>
And JS blew is click event code.
$('.map_box').click(function () {
$('.map_box').removeClass('on');
$(this).addClass('on');
});
if clicked select1, the div (class="cw map_box") will change (class="cw map_box on")..
it works well but the problem is when i clicked select1 the page refresh it then click event also disappear.. is there anay way to keep click event? it just color change event
thank you

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>

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

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();

Click on a link and go to a input

I'd like to make a link to a input. My current link example works (takes me to the area where the id is set) but what I really want is when a user clicks on the link to take him exactly to the input, being able to type right away.
<input type="text" id="search" name="search">
<a href="#search">
<img src="http://www.example.com/images/something.jpg" alt="">
</a>
Is this even achievable without JQuery/JavaScript? Please post solutions in any method you can imagine. Been searching for this for a while and couldn't find an answer.
No need to use javascript: use a label instead of a link with the for attribute
<input type="text" id="search" name="search">
<label for="search">
<img src="http://www.example.com/images/something.jpg" alt="something">
</label>
if you also need a smooth page scroll animation, in order to reach the top offset of the input element, you can instead use a script, e.g.
Codepen Example: http://codepen.io/anon/pen/VLyOqg
$(function() {
$('label[for]').on('click', function(evt) {
evt.preventDefault();
var inputId = "#" + $(this).attr('for');
$('html:not(:animated), body:not(:animated)').animate({
scrollTop: $(inputId).offset().top
}, 600, function() {
$(inputId).focus();
});
});
});
<script>
function setFocus(){
elm = document.getElementById("search");
jump(elm);
elm.focus();
}
function jump(elm){
var top = elm.offsetTop; //Getting Y of target element
window.scrollTo(0, top); //Go there.
}​
</script>
...
<a href="javascript:setFocus('search')">
<img src="http://www.example.com/images/something.jpg" alt="">
</a>
Use jQuery focus!
$('[href="#search"]').click(function(){$('#search').focus();});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="search" name="search">
<a href="#search">
<img src="http://www.example.com/images/something.jpg" alt="">
</a>

having trouble to pass div ID as function parameter

I want to give user options to edit title of navigation bar. So, when user would click edit, I want to give them a text field and a submit button.
Here is the code(within PHP block)
$n1="<div id='nava' class='nav' >
<a href=#>$nava</a>
<input type='submit' id='nav1' class='b' onclick='edit(this.id,???)' value='Edit'>
</div>";
$n2="<div id='navb' class='nav' >
<a href=#>$navb</a>
<input type='submit' id='nav2' class='b' onclick='edit(this.id,???)' value='Edit'>
</div>";
$n3="<div id='navc' class='nav' >
<a href=#>$navc</a>
<input type='submit' id='nav3' class='b' onclick='edit(this.id,???)' value='Edit'>
</div>";
if I do edit(this.id,nava),it gives me object DivElement message,when I do alert.
But I need the id of div as string.Passing the id of submit button works perfectly, but I cannot figure out how to pass the id of corresponding div to edit function. How would I do that?
parentNode is definitely the right way to go about getting the parent Div's id (without using a framework like JQuery). You can read more about it here: https://developer.mozilla.org/en/docs/Web/API/Node.parentNode
Back to your example, you could simply write a JavaScript edit() function like so:
function edit(id) {
var divId = document.getElementById(id).parentNode.id;
console.log(divId);
}
Using your HTML, I have put together a quick fiddle for you to show how this can work
http://jsfiddle.net/wj7bch3m/
Hope that helps!
You could do something like this to change the different navs
html
<div id="nav">
Link
<input type="text" for="link1" id="newLink" class="changeNav"/>
</div>
jquery
$(".changeNav").on("change", function(){
var newLink = $(this).val();
var whichNav = $(this).attr("for");
$("#" + whichNav).empty().append(newLink);
});
here is a JSFIDDLE
Hope this helps

Categories

Resources