How to add two id together - javascript

I am working on a site which opens a href link on a site when the form is submitted on contact form-7. I have a question: It is opening one link. But I want to open two links simultaneously when the form is sent. I dont know how to achieve this.
Please help
document.addEventListener('wpcf7mailsent', function(event) {
location = document.getElementById("link").getAttribute("href");
}, false);
document.addEventListener('wpcf7mailsent', function(event) {
location = document.getElementById("link2").getAttribute("href");
}, false);
<a href="http://www.annualpm.com/wp-content/uploads/Fabius-GS-User-Manual.pdf" target="_blank" id="link">
<p><img style="height:40px;" src="http://www.annualpm.com/wp-content/uploads/Hopstarter-Software-Adobe-Acrobat-Standard.ico">Fabius GS User Manual</p>
</a>
<a href="http://www.annualpm.com/wp-content/uploads/FabiusGSSpecSheet.pdf" target="_blank" id="link2">
<p><img style="height:40px;" src="http://www.annualpm.com/wp-content/uploads/Hopstarter-Software-Adobe-Acrobat-Standard.ico">Fabius GS SpecSheet</p>
</a>

Since 'location' redirects the current window, you can only do this once. Try using 'open' instead. Note: this will open the link in a new tab.
See: https://www.w3schools.com/jsref/met_win_open.asp

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
window.open(document.getElementById("link").getAttribute("href"));
setTimeout(function(){
window.open(document.getElementById("link2").getAttribute("href"));
},500);
}, false );
</script>
the setTimeout function prevents the browser to flag the second link as a popup (in that case the second window will be blocked) :)

Related

How to make both href and jquery click event work

I have a reporting function answerCardInnerLinkReportingCall which gets invoked on click on <a> tag inside a specific div. I use event.preventDefault(); to override the default click behavior.
Currently I am redirecting the user to the target url in the reporting function after sending all the reporting parameters using window.open('http://stackoverflow.com/', '_blank'); method.
jQuery(document).on('click','#answerCard a', function(event) {
event.preventDefault();
answerCardInnerLinkReportingCall(this);
});
If I use onclick function in the tag I would have returned true and it would make href work without me redirecting the user manually but is it possible to do the same in click handler? I can't use onclick since I dont have control over the html data.
I wanted to check if there is a better way of implementing this?
Edit1: Adding sample HTML
<div class="answer" style="display: block;">
<div class="well">
<div id="answerCard" answercardid="check_phone_acard">
<h3 id="answerTitle">check your phone</h3>
<div><ol class="answerSteps"><li>Go to <a title="Link opens in a new window" href="https://test.com" target="_blank">Check phone</a>. If prompted, log in.</li></ol></div>
<label id="seeMoreAnswer">Displaying 1 of 1 steps. </label></div>
<!-- Utility Section -->
<div class="util">
<span class="pull-left"><a id="viewFull" href="/test.jsp?sid=52345">View full article ?</a></span>
<span class="pull-right">
</div>
</div>
</div>
</div>
I guess you dont need to use any 'event.preventDefault();' if you want to use links native functionality after the script executed.
try like this
jQuery(document).on('click','#answerCard a', function(event) {
//event.preventDefault();
alert('script running');
answerCardInnerLinkReportingCall(this);
});
also created JS Fiddle. check it out.
You can use javascript's:
window.location.href = 'http://url.here.com';
To tell the browser to navigate to a page. Hope it helps.
Other way can be of returning true or false from answerCardInnerLinkReportingCall and depending on that call or dont call event.PreventDefault();
Try something like this:
$('#answerCard a').click(function(event) {
var loc = $(this).attr('href');
event.preventDefault();
answerCardInnerLinkReportingCall(loc, this);
});
function answerCardInnerLinkReportingCall(loc, that){
// your code to do stuff here
window.open(loc, '_blank');
}
See this demo fiddle

How to open different link in new tab with different popup buttons

I'm using a button to open a ajax html popup and a link onclick at the same time.
But the problem is I have several buttons placed on the page and with each button I want to open different links any help appreciated
Heres the html code
<a href="test.html" class="ajax-popup-link">
<button type="button" style="background:green;float:right;">
Activate
</button>
</a>
Heres the javascript function
<script src="../assets/jquery.magnific-popup.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.ajax-popup-link').magnificPopup({
type: 'ajax',
overflowY: 'scroll',
closeOnContentClick: false
});
$('.ajax-popup-link').click(function(){
window.open("/some-link.html");
});
});</script>
I have got the workaround anyway
here it is
<p onclick="window.open('http://google.com', '_new')"><a class="ajax-popup-link" href="test.html" style="top:-10px;left:650px;background:green;text-align:center;height:50px;">ACTIVATE DEAL</a></p>
In your click function, just reference the href attribute instead of hard coding the link. Also a good idea to prevent the browser's default behaviour on link click:
$('.ajax-popup-link').click(function(e){
e.preventDefault();
window.open($(this).attr("href"));
});

data-content not working when clicked

There is a javascript and jquery for which I need your help:
$(document).ready(function ()
{
$( '.website' ).popover(
{
'trigger' : 'click',
'placement' : 'right'
});
});
HTML:
<a href="javascript:void(0)" data-content="www.google.com" class="website" >
Google Website
</a>
When I click on the "Google Website", it displays "www.google.com". But what I want is, when I click on "www.google.com", this URL show open in a new tab also.
What if there is 2 different website like "google.com"; and "yahoo.com"; in the same data-content, so that when clicked on anyone, it should redirect to respective page
How do I do it?
I've made some changes in the code, to keep more than on one link in a data-content, you can try it:-
<a href="javascript:void(0)" data-content="http://www.google.com" class="website" >
Google Website
</a>
<a href="javascript:void(0)" data-content='http://www.google.com,http://www.yahoo.com' class="website" >
Websites
</a>
And change your javascript like this:-
$('.website').click(function(e){
e.preventDefault();
var dataContents = $(e.target).attr('data-content').split(",");
for(var i=0; i<dataContents.length;i++){
window.open(dataContents[i], '_blank');
}
})
And if popup is blocked in your browser, you've to unblock that.
I'm trying to open the second window also in a tab rather than in a new window.
Try this:-
$('.website').click(function(e){
e.preventDefault();
window.open($(e.target).attr('data-content'), '_blank')
})
Also make some change in the html:-
<a href="javascript:void(0)" data-content="http://www.google.com" class="website" >
Google Website
</a>
You can also add another data-content in the html, and then also it'll work fine.
<a href="javascript:void(0)" data-content="www.yahoo.com" class="website" >
Yahoo Website
</a>
Fix your data-content attribute to include http://, otherwise it will open relative to the current url:
<a href data-content="http://www.google.com" class="website">
Google Website
</a>
and keep user Indra's code:
$('.website').click(function(e){
e.preventDefault();
window.open($(e.target).attr('data-content'), '_blank');
});
JSFiddle Example
http://jsfiddle.net/BM7Tc/

why window.open() opens in the same window?

I write following code`
Holiday
<script>
a.popup.click(function(event)
{
event.preventDefault();
window.open($(this).attr('href'));
});
</script>
It'll open b.html in a new window, but opens in the same, why?
I include JQuery like this`
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"/>
Which is the latest version? Can it be a reason?
a.popup.click will throw an error because a is not defined.
You are trying to use the jQuery click method, so you need to create a jQuery object that references the element you are trying to select.
jQuery("a.popup").click(your_function)
You can achieve opening in a different tab functionality in your case by simply specifying target="_blank" for your anchor tag as
<a href="b.html" target="_blank" class="popup" >
Holiday
</a>
You please try using the following code, it works, and you can choose your title and set different parameters that are suitable for you:
$(document).ready(function(event) {
$('a.popup').on('click', function(event) {
var params = "menubar=yes,location=yes,resizable=yes,scrollbars=yes,status=yes";
event.preventDefault();
window.open($(this).attr('href'), "Title", params);
});
});
Just change this part
<a href="b.html" target="_blank" class="popup" >
jsFiddle

Facebook Connect button question - please help

<fb:login-button onlogin="window.location = '/custompage.html';">Connect</fb:login-button>
That's currently my code for users to log in to my site. It's in FBML.
It will pop up a box, the user then logs in. And then, it closes the new window, followed by a redirect to "custompage.html".
Now, I would like to manually render my button instead of using FBML, because it's too slow on mobile" http://wiki.developers.facebook.com/index.php/Facebook_Connect_Login_Buttons#Facebook_Connect_for_iPhone_Buttons
How do I close the popup window and redirect, using this code as explained in the doc?:
<img src="http://wiki.developers.facebook.com/images/6/6f/Connect_iphone.png">
The code you want run on successful login should be passed as an argument to requireSession(). In your case, I believe you want
<a href="" onclick="FB.Connect.requireSession(function () {
window.location = '/custompage.html'
});return false;">
<img src="http://wiki.developers.facebook.com/images/6/6f/Connect_iphone.png">
</a>
Fixed.
put this inside the requireSession:
function() { window.location='/'; }

Categories

Resources